@charset "UTF-8";

/*
   TheBrassPack.css
	v3.0 2023-09-24
	  v3.1 2023-10-??
	v2.0 2022-09-23
	v1.0 2007-11-15
*/

/* CSS RESET */
  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	box-sizing: border-box; 
  }

  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, main, mark, menu, nav, 
  section, summary, time {
	display: block;
  }

  body {
	line-height: 1;
  }

  /* ol, ul {
	list-style: none;
  } */

  blockquote, q {
	quotes: none;
  }

  blockquote:before, blockquote:after,
  q:before, q:after {
	content: '';
	content: none;
  }

  table {
	border-collapse: collapse;
	border-spacing: 0;
  }
/* END CSS RESET */


/* VARIABLES */

  :root { 

	/* Color Scheme */
	--main-bg-color-low: #333333;
	--main-bg-color-mid: #000000; 
	--main-bg-color-high: #000033;
	--main-text-color-low: #ccaa00;
	--main-text-color-mid: #ddddaa; 
	--main-text-color-high: #ffffbb; 
	--alt-bg-color-low: #5588cc; /* not used */
	--alt-bg-color-mid: #eebb33; 
	--alt-bg-color-high: #aaccff;  /* not used */
	--contrast-bg-color-low: #c0c0c0;
	--contrast-bg-color-mid: #dddddd;
	--contrast-bg-color-high: #ffffff; /* #f0e8e0; */
	--contrast-text-color: var(--main-bg-color-mid);
	--splash-color: #ffdd66;
	--splash-color-high: #ffee99;
	--shadow-mid: rgba(51,91,123,0.8);
	--shadow-high: rgba(51,91,123,1);
	--shadow-size: 0.4rem 0.4rem 0.2rem;

	/* Fonts */
	--display-font: 'Georgia', 'Verdana-Bold', 'Futura-CondensedExtraBold', 'Arial-BoldMT', 'Arial Black', 'Arial-Black', 'Roboto-Black', sans-serif;
	--heading-font: 'Georgia', 'Verdana-Bold', 'Futura-CondensedExtraBold', 'Arial-BoldMT', 'Arial Black', 'Arial-Black', 'Roboto-Black', sans-serif;
	--body-font: 'Trebuchet', 'Arial', 'HelveticaNeue', 'Helvetica', sans-serif;

	/* Content margins */
	--content-first-edge: 0.5rem;
	--content-second-edge: calc(100% - 1rem); 
	
	/* Animation parameters */
	--sequence-time: 4s;
	--header-text-time: 4s;
	--start-color: var(--alt-bg-color-mid);
	--end-color: var(--splash-color);
	
  }
/* END VARIABLES */


/* ANIMATIONS */
/* END ANIMATIONS */


/* STYLES */

/* Up to 36rem (576px): Portrait phones and defaults */

  aside {
	color: var(--main-bg-color-mid);
	background-color: var(--main-text-color-mid);
	margin: 0 20%;
	padding: 1rem;
	border: 0.5rem solid var(--main-text-color-low);
	border-radius: 2rem;
  }

  body {
	display: grid;
	grid-template-columns: minmax(auto, 65rem);
	justify-content: center;
	color: var(--main-text-color-mid);
	background-color: var(--main-bg-color-mid); 
  }

  a {
	color: var(--main-text-color-mid);
  }

  a:hover {
	background-color: var(--main-bg-color-low);
	color: var(--main-text-color-high);
	padding: 0.2em 0; 
  }

  a:hover img {
/*	background-color: var(--main-bg-color-mid); */
  }

  em {
    	font-style: italic;
  }

  footer {
	min-height: 2em;
	padding-top: 1em;
	padding-bottom: 1em;
  }

  footer p {
	font-size: 0.6em;
	text-align: center;
  }

  footer, header, main {
	padding-left: var(--content-first-edge);
	padding-right: var(--content-first-edge);
  }


  h1 {
	font-size: 2rem;
	font-family: var(--heading-font);
/*	font-weight: bold; */
/*	font-style: italic; */
/*	text-shadow: -1.5px 1.5px 2px var(--contrast-bg-color-low); */
	color: var(--splash-color); 
	margin: 1em 0 1em 0;
	padding-bottom: 0.5rem;
	text-align: center;
	clear: both;
  }

  h2 {
	font-size: 1.5rem;
	font-family: var(--heading-font);
	font-style: italic;
	font-weight: bold;
	color: var(--splash-color); 
	margin: 2em 0 0.5em 0;
	text-align: center;
	clear: both;
  }
  
  h3 {
	color: var(--splash-color);
	font-size: 1.25rem;
	font-family: var(--heading-font);
	font-weight: bold;
	margin: 2em 0 0 0;
	padding: 0 0.5em 1em 0.5em;
	clear: both;
  }

  h4 {
	color: var(--splash-color);
	font-size: 1.15rem;
	font-family: var(--body-font);
	font-style: italic;
	font-weight: bold;
	text-align: center;
	padding: 0.5em 0 0.5em 0;
	clear: both;
  }

  header {
/*  	grid-area: header | 1 / 1 / 2 / 2;
	top: 0;
	width: 100%;
	right: 0;
*/	padding-top: 1em;
	padding-bottom: 1em;
	background-color: var(--main-bg-color-mid); 
	color: var(--main-text-color-mid); 
/*	justify-self: stretch; /* center; */
	text-align: center;
  }
  
  html {
    	scroll-behavior: smooth; 
	font-kerning: normal;
  }

  img {
	width: 100%;
  }

  main {
	padding-top: 2em;
	padding-bottom: 1em; 
  }

  nav {
	line-height: 1.8em; 
	top: 100px; 
	width: 100%;
	text-align: center;
/*	background-color: var(--main-bg-color-mid); */
	cursor: pointer; /* added to make click work in IOS Safari per http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari */
	color: var(--main-text-color-mid); 
  	border-bottom: 0.25em solid var(--splash-color); 
  }

  nav:hover .navlink, nav:hover .navsublink { 
	display: block; 
  }

  nav:hover .navlinkpng { 
	display: inline; /* working on menu */
  }

  nav a {
	text-decoration: none;
	border-bottom: none;
  }
  
  nav a:hover {
  }

  p, li {
	font-family: var(--body-font); 
	font-size: 100%;
	line-height: 1.5;
	padding: 0 0.5em 1em 0.5em;
  }

  nav p {
  }

  ul {
	margin-left: 1.5em;
	padding: 0.5em 0 0.5em 0.5em;
  }

  .bannertext {
    	font-family: var(--heading-font);
    	font-style: italic;
    	font-size: 4rem;
    	line-height: 4rem;
    	margin: 0;
    	padding: 0;
    	text-shadow: 0.05rem 0.05rem 0rem var(--main-bg-color-mid), 0.05rem -0.05rem 0rem var(--main-bg-color-mid), 
    	-0.05rem 0.05rem 0rem var(--main-bg-color-mid), -0.05rem -0.05rem 0rem var(--main-bg-color-mid), 0.15rem 0.15rem 0.28rem var(--shadow-mid);
  }

  .bold {
  	font-weight: bold;
  }

  .bp-logo {
	width: 80%; 
	padding-top: 1em;
  }

  .burger {
	background-color: var(--main-text-color-high);
	width: 100%;
	height: 16%;
	margin: 0;
  }

  .burger-box {
	width: 30px;
	height: 30px;
	margin: 0 0 0 1em;
  }

  .burger-condiment {
	width: 100%;
	height: 16%;
	margin: 0;
  }

  .caption {
	margin: 0 0 1rem 0;
	font-size: 85%;
	color: var(--splash-color);
  }

  .center {
	text-align: center;
  }

  .gig-info {
  	padding-left: 1rem;
  	font-weight: bold;
  }

  .horns {
	color: var(--main-text-color-mid);
	font-style: italic;
	font-weight: bold;
	text-align: center;
  }

  .horns-left {
	color: var(--main-text-color-mid);
	font-style: italic;
	font-weight: bold;
	text-align: left;
  }

  .icon {
	width: 25%;
	max-width: 8em;
  }

  .italic {
	font-style: italic;
  }

  .left {
	width: 30%;
	float: left;
/*	margin-right: 0.5rem;
	padding-left: 0.5rem; */
    margin: 0 0.5rem;
}

  .link-up {
	font-family: var(--heading-font);
	font-style: italic;
    	font-size: 80%;
	text-align: right;
  }

  .logo {
	max-width: calc(99% - 4rem);
  }

  .logo-block {
  	justify-self: center;
  }

  .navicon {
  	width: 1rem;
  }

  .navlink, .navlinkpng, .navsublink {
	display: none;
	padding: 0; /*0.1rem 0.25rem; */
	margin: 0; /*0 0.25rem; */
	color: var(--main-splash-color);
	font-family: var(--heading-font);
	font-size: 100%;
	font-weight: bold; 
  }

  .navlink img {
	width: 8rem; 
  }

  .navlink:hover, .navlinkpng, .navsublink:hover {
  }

  .navsublink {
	padding-left: 2rem;
	font-weight: normal;
  }

  .no-break {
	break-inside: avoid;
  }

  .outline {
	border: solid 0.1rem var(--main-text-color-low);
  }

  .photo-credit {
	text-align: right;
	font-size: 67%;
	/* font-variant-caps: small-caps; */
	text-transform: uppercase;
  }

  .photo-credit-text {
	font-size: 67%;
	/* font-variant-caps: small-caps; */
	text-transform: uppercase;
  }
  .quote {
	font-style: italic;
	font-weight: bold;
  }

  .quote-attrib {
	margin: 0 1em 0 0;
	font-style: italic;
	text-align: right;
  }

  .red-alert {
	font-size: 125%;
	color: red;
	font-weight: bold;
  }

  .right {
	width: 30%;
	float: right;
	margin-left: 0.5rem;
  }

  /* Use this for consistent shadows wherever needed */
  .shadow {
	box-shadow: var(--shadow-size) var(--shadow-mid);
  }
	
  .side-by-side {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	align-items: flex-end;
  }

  .smaller {
    	font-size: 85%;
  }

  .splash {
	color: var(--splash-color);
  }

  .strikethrough {
	text-decoration: line-through;
  }

  .stats {
  	font-family: var(--heading-font);
  	font-style: italic;
  	color: var(--splash-color);
  }

  .title {
  	font-style: italic;
  }

  .to-top {
	text-align: right;
	font-size: 85%;
  }
 
  .visual-index {
	max-width: 200px;
  }
  .yearbook {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 15rem));
	gap: 1rem;
	justify-content: center;
  }

  .yearbook-text {
	font-size: 80%;
  }

  .youtube {
	width: 100%;
	max-width: 560px;
	height: calc(100vw * 315 / 560);
	max-height: 315px;
  }

  .youtube-caption {
	font-size: 85%;
	width: 100%;
	max-width: 560px;
  }

/* End Up to 36rem */

/* Kindle and Kindle Fire up to 599px */
@media only amzn-mobi, 
       only amzn-kf8 /* and (device-aspect-ratio:1280/800) */ { 

} /* End Kindle and Kindle Fire to 599px */

  
/* 36-46rem (576-736px): Landscape small phones, portrait large phones */
@media only screen and (min-width: 36rem) {


} /* End 36-46rem */


/* 46-60rem (736-960px): Landscape phones, portrait tablets */
@media only screen and (min-width: 46rem) {
  
  h1 {
/*	font-size: 4rem; */
  }
	
} /* End 46-60rem */


/* 60-79rem (960-1232px): Landscape tablets, portrait PCs */
@media only screen and (min-width: 60rem) {

  .burger, .burger-box, .burger-condiment {
	display: none;
  }
      
  .navlink, .navlinkpng, .navsublink {
	display: inline;
	text-align: center;
  }

  nav:hover .navlink, nav:hover .navlinkpng, nav:hover .navsublink { 
	display: inline;
  }

  .navlinkpng {
	width: 12%;
  }
  
  .navsublink {
	padding-left: 0;
  }

} /* End 60-79rem */


/* 79-125rem (1232-2000px): Landscape PCs 
   NB 75rem = 1200px. Using 79rem (1232px) to allow 2rem gradient on sides */
@media only screen and (min-width: 79rem) {

  :root { /* reset variables */
/*      --content-first-edge: calc((100% - 75rem) / 2);
      --content-second-edge: calc(75rem + ((100% - 75rem) / 2)); */
  }

  body {
/*      background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--main-bg-color-mid) var(--content-first-edge), 
      	var(--main-bg-color-mid) var(--content-second-edge), var(--alt-bg-color-mid));
*/  }

  footer, header, main {
      padding-left: max(1rem, var(--content-first-edge)); 
      padding-right: max(1rem, var(--content-first-edge)); 
  }

  h1 {
	font-size: 2.5rem; 
  }

  header, nav {
/*      background-image: linear-gradient(to right, var(--alt-bg-color-mid), var(--contrast-bg-color-mid) var(--content-first-edge), 
      	var(--contrast-bg-color-mid) var(--content-second-edge), var(--alt-bg-color-mid));
*/  }

  nav {
  }

  .bp-logo {
/*	width: 35%; */
  }

} /* End 79-125rem */


/* 125rem (2000px) up: Landscape TVs */
@media only screen and (min-width: 125rem) {

} /* End 125+rem */


/* Reduced motion */
@media (prefers-reduced-motion) {

}