/* style.css */
/* fonts */
	@font-face {
		font-family: 'Orbitron Medium';src: url(/fonts/orbitron-medium-webfont.woff) format('woff'), 
			url(/fonts/orbitron-medium-webfont.eot) format('opentype'),
			url(/fonts/orbitron-medium-webfont.ttf) format('truetype');
		font-weight: normal;
		}

/* links */
	a:link {color:#06a5ba; text-decoration:underline;}
	a:visited {color:#497abc;}
	a:hover {color:#ffffff;}
	a:active {color:#06a5ba;}

/* headers */
	h {color:#6e6635;}
	h1 {font-size:2rem; padding: 0 5px 0 5px;} /* page title */
	h2 {width:100%; text-align:center; font-size:2rem;}
	h3 {font-size:1.6rem;}
	h4 {font-size:1.2rem;}
	h5 {font-size:1rem;}
	span.hTldr {display:block;font-style:italic;font-size:.9em;} /* set tldr to full width, italic, size to 90% of h element */

/* text and background colors, font, kill x scroll, link styling */
	body {font-family:'Orbitron Medium',courier,sans-serif; font-size:18pt; 
		background-color:#01031a; color:#d5ae63;
		max-width:100%;  margin:0; overflow-x:hidden;
		display:flex; flex-direction:row; justify-content:center;
		}
	#pageContent {max-width:100%; overflow-x:hidden; min-height:95vh; display:flex; flex-direction: column;} /* kill x scroll mobile, flexbox to keep footer at page bottom */ 

/* site banner */
	#siteLogo {font-size:5vh; margin:0; padding:0; flex-grow:0;} /* font size and fixed spacing */
	#siteLogo a {
		writing-mode:vertical-lr; text-orientation:upright; letter-spacing:5vh; /* vertical text logo */
		margin:1em 1em 0em 1em; top:1em; position:sticky; height:max-content;  /* spacing and sticky */
		background-image:linear-gradient(#4e3183, #d5ae63); color: transparent; background-clip: text; /* apply gradient to text */
		}

/* menu links */
	header {display:flex; flex-direction:row; flex-wrap: wrap; justify-content: space-between; align-items: center;  min-width: 0;  max-width: 100%;}
	header a:link, header a:visited {color:#06a5ba; text-decoration:none;}
	header a:hover {color:#497abc;}
	header a:active {color:#ffffff;}

/* navigation menu */
	input.menuButton {display:none;} /* hide menu checkbox when unused */
	label.menuBurger {font-size:0px;} /* hide menuburger text */
	ul.siteMenu {
		display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center;  
		min-width: 0;  max-width: 100%; list-style-type: none;
		list-style-type: none; padding: 0rem; margin: 0rem;
		}
	li.siteMenuItem {padding: .5em; margin: .5em; border: 1px solid #497abc; border-radius: 12px;} /* menu button */

/* mobile header and menu styling */
	@media only screen and (max-width: 62em) {
		body {flex-direction:column;}
		#siteLogo a ::before {content: "\00a0";} /* adds a space to adust for letter spacing */
		#siteLogo a {writing-mode:revert; font-size:8vw; letter-spacing:.6em; text-align:center; display:block; margin:5px 0 0 0;}
		/* burger and x */
			#dropMenu:not(:checked) ~ul.siteMenu {display:none;} /* hides menu until burger clicked */
			label.menuBurger {cursor:pointer; user-select:none; height:26px; width:30px; margin:.5rem .5rem 1rem .5rem;} /* creates location for burger */
			#dropMenu:not(:checked) ~label.menuBurger {background: url("/menu-burger.svg");} /* display burger */
			#dropMenu:checked ~label.menuBurger {background: url("/menu-x.svg");} /* switch burger to x when menu active */
		}

/* content style */
	p {max-width: 52em; line-height: 1.6em; padding: 0 5px 0 5px}
	iframe {max-width: 100%;}
	div.mainContent {
		flex: 1 1 auto; display:flex; flex-direction: column; flex-wrap:wrap; justify-content:left; align-items:flex-start; 
		min-width:0;  max-width:100%; 
		border-top: 1px solid #497abc; margin-top: 1em;}
	div.mainContent ul, div.mainContent ol {flex: 0 1 38em; padding:0em 1em 0em 1em;}
	div.mainContent blockquote {margin: 1em 1em 1em 1em;}
	div.mainContent li {margin-bottom:5px;}

/* footer style */
	footer  {flex: 0 1 auto; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center; width: 100%; border-top: 1px solid #497abc; margin-top: 1em;}


/* maybe unneeded */


	div.textContainer {flex: 0 1 42em;}
	div.homeContainer {flex: 0 1 500px; max-width: 100%;}

/* page content flexbox containers */
	div.container  {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center;  min-width: 0;  max-width: 100%;}
	div.containerReverse  {display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: space-evenly; align-items: center;}
	div.containerCenter  {display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;}
	div.containerColumn  {display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-evenly; align-items: center;}
	div.internal  {flex: 0 1 auto;} /* just in case, try to avoid using this */

/* discography list style */
	span.workTitle {font-weight:bold; font-style:italic;}
	span.discogEntry {font-weight:bold; display:block;}
	span.workArtist {display:block; text-transform:none;}
	div.trackItem {display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
	span.trackArtist {font-weight:bold;}
	span.trackAlbum {font-weight:bold; font-style:italic;}
	div.trackData {font-size:.8em;}
	ul.creditList {padding:0em 1em 0em 1em; list-style-type:none;}
	span.creditType {text-transform:uppercase; font-weight: bold;}