:root{
	--navWidth: 8rem; /* width of left nav div with menu */
	--textWidth: 36rem; /* width of right main div with content */
	--textPadding: 4rem; /* padding around */
	--minWidth: 36rem;
		
	/*--shadow: 12px 12px black;;*/
	

	--shadow: 10px 10px 10px 5px black;

	--colMain: hsla(200,  8%, 68%, 1);
	--colNav:  hsla(200,  8%, 62%, 1);
	--colHead: hsla(200,  8%, 38%, 1);
	--colBack: hsla(200, 10%, 18%, 1);
	--colFont: hsla(200,  8%,  6%, 1);
	
	--gradNav: linear-gradient(to left top, #819098, #8b99a0, #96a2a9, #a0acb1, #abb5ba); /*linear-gradient(to left top, #73848c, #819097, #8f9ca3, #9da8ae, #abb5ba);*/
	/*  hsla(200, 10%, 55%, 1) to hsla(200, 10%, 70%, 1) */
	--gradMain: linear-gradient(to left top, #9da9af, #a7b2b7, #b2bbc0, #bcc5c8, #c7ced1);
	/*  hsla(200, 10%, 65%, 1) to hsla(200, 10%, 80%, 1) */
	
	--gradBack: linear-gradient(to right bottom, #394246, #333b3f, #2d3538, #282e31, #22282a);
	/*  hsla(200, 15%, 50%, 1) to hsla(200, 10%, 25%, 1) */
	
	--colLink:  hsla(200, 100%, 10%, 1); /*hsla(200,  44%, 68%, 1);*/
	
	--colHigh: hsla(200, 100%, 20%, 1);


}


body {
	min-height: 100vh;
	background-color: black;
	background-image: linear-gradient(to right bottom, #394246, #333b3f, #2d3538, #282e31, #22282a);
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	color: var(--colFont)
}


#container {
	/*background-color: var(--colBack);*/
	
	/* grid */
	display: grid;
		
	grid-template-columns: 
		auto 
		calc( var(--navWidth) + var(--textPadding)  ) 
		minmax(20rem, 	calc(  var(--textWidth) + ( 2 * var(--textPadding) )  )   )
		calc( var(--navWidth) / 2 )
		auto;
		
	grid-template-rows: 
		calc( var(--textPadding) / 2 )
		minmax( calc(  100vh - ( var(--textPadding) * 2 )  ), auto)
		calc( var(--textPadding) / 2 );
		
	grid-template-areas: 
		". top top . ."
		". nav mid . ."
		". bot bot . .";
		
}

header {
	grid-area: top;
	/*background-color: var(--colBack);*/
}

nav {
	grid-area: nav;
	background-color: var(--colNav);
	background-image: var(--gradNav);
	padding-top: var(--textPadding);
	box-shadow: var(--shadow); 
	-webkit-box-shadow: var(--shadow); 
}

main {
	grid-area: mid;
	background-color: var(--colMain);
	background-image: var(--gradMain);
	
	padding: var(--textPadding);
	box-shadow: var(--shadow); 
	-webkit-box-shadow: var(--shadow); 

}

footer {
	grid-area: bot;
	background-color: var(--colBack);
	opacity: 0; /* TODO TEMPFIX to make the shadow visible through */
}



#menu {
	display: flex;
	flex-direction: column;
	
}


h1 {
	text-align: center;
	color: var(--colHigh);
	/*font-size: */
}

h2{
	color: var(--colHigh);
}

/* links */
a:link {
  color: var(--colLink);
  text-decoration: none;
}

a:visited {
  color: var(--colLink);
}

a:hover {
  color: var(--colLink);
}

a:active {
  color: var(--colLink);
}


/* links used in-line */
.link {
	display: in-line;
	font-weight: bold;
	cursor: pointer;
}
.link:hover {
	color: var(--colMain);
	background-color: var(--colLink);
	border-radius: 9px;
}

/* looking link-lik */
.high {
	display: in-line;
	font-weight: bold;
}



/* links used menu and big play/download links */
.button {
	display: block;
	font-size: 100%;
	font-weight: bold;
	padding: 1rem;
	text-align: center;
	cursor: pointer;
	
}
.button:hover {
	color: var(--colMain);
	background-color: var(--colLink);
	border-radius: 9px;
}



.image {
	max-width: 100%;
	/*width: 100%;*/
	border-radius: 10px;
	margin-top: 0.5rem;
}

 

/* folloving used for enlarging images */ 
#enlargedImage{
	max-width: 100vw;
	max-height: 100vh;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#curtain{
	position: fixed;
	zIndex: 4;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: hsla(0, 0%, 10%, 0.75);
	cursor: pointer;
	overflow: scroll;
}




/* fancy padding is smaller, assumed the screen is not big enough for enlarged image, made scrollable */
@media only screen and (max-width: 800px) {
		
	main {
		padding:  calc( var(--textPadding) / 2); 
	}
	
	nav {
		padding: 0rem; /* calc( var(--textPadding) / 2); */
		padding-top:  calc( var(--textPadding) / 2); 
	}

	#enlargedImage{
		position: absolute;
		top: 0%;
		left: 0%;
		transform: translate(0%, 0%);
	}
	
	#curtain{
		overflow: scroll;
	}

}


/* column */
@media only screen and (max-width: 42rem) {
		
	main {
		padding: var(--textPadding);
	}
	
	nav {
		padding: 1rem; /*var(--textPadding);*/
	}

	.breaker {
		display: none;
	}
	
	#container {
		display: grid;
		grid-template-columns: auto;
		grid-template-rows: 0 auto auto 0;
		grid-template-areas: 
			"top"
			"nav"
			"mid"
			"bot";			
	}

}