@charset "utf-8";
@import url( "/css/fntDiscognate.css" );
@import url( "/css/fntNoto.css" );

/* Styles derived from old borderlinemorris.com site 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/* variables 
=====================================================================================================================*/
	:root { 
		/* font-family */
		--fBase:				'notoSemibold';
		--fLarge:				'notoLight';
		--fFancy:				'Discognate';
		
		/* color */
		--bmGreen:				#09fe02;
		--bmOrange:				#fd8a2d;
		--bmPink:				#fd43ee;
		--bmYellow:				#dffe00;
	}


/* globals 
=====================================================================================================================*/
	body, td, th				{ font-family: var( --fBase ); font-size: 18px; color: var( --bmYellow ); }
	body 						{ margin: 8px; background: black; padding-right: 10px; }
	h1							{ margin: 0; }
	h1#desk						{ position: fixed; top: 0; left: 0; }
	h1#mob						{ display: none; float: left; max-width: calc( 100vw - 80px ); }
	h2							{ font-family: var( --fFancy ); font-size: 300%; font-weight: normal; 
									text-shadow: 0 0 12px; }
	h3							{ font-family: var( --fLarge ); font-weight: normal; font-size: 150%; }
	p							{ max-width: 36em; }
	a							{ text-decoration: none; color: var( --bmGreen ); }
	a:hover						{ text-decoration: underline; color: var( --bmYellow ); }


/* template
=====================================================================================================================*/
	/* top navigation - desktop */
	#navTop 					{ clear: right; float : right; width: 800px; font-family: var( --fFancy ); 
									font-size: 42px; text-transform: lowercase; }
	#navTop a 					{ display: inline-block; width: 150px; margin: 0; text-align: center; }
	#navTop a:hover 			{ text-decoration: none; text-shadow: 0 0 8px, 0 0 24px white; }
	.navP, .navP:hover 			{ color: var( --bmPink ); }
	.navY, .navY:hover 			{ color: var( --bmYellow ); }
	.navO, .navO:hover 			{ color: var( --bmOrange ); }
	.navG, .navG:hover 			{ color: var( --bmGreen ); }

	/* hamburger menu */
	#ham, #hamClose 			{ display: none; float: right; cursor: pointer; }
	#hamClose 					{ margin: 20px; }
	#hm img						{ max-width: 100%; }
	#hamLogo 					{ margin: 8px; }
	#menuHam 					{ display: none; position: absolute; z-index: 10; top: 0; bottom: 0; left: 0; right: 0; 
									background: black; }
	#menuHam ul 				{ margin: 1em; margin-top: 2em; font-size: 36px; text-transform: lowercase; }
	#menuHam li 				{ font-family: var( --fFancy ); font-size: 150%; list-style: none; }
	
	/* text content */
	#content					{ clear: right; float: right; }
	#content h2, #content h3, #content p
								{ clear: right; float: right; text-align: right; }	
	#content h3 + p				{ margin-top: -1.4em; }
	#content p					{ margin-top: 1em; }	
	#content img				{ margin: 1em 0; clear: right; float: right; }			
	#content table				{ clear: right; float: right; width: 750px; }
	#content td img				{ float: none; }


/* objects
=====================================================================================================================*/
	/* home page: animation */
	#barrier 					{ position: absolute; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 20; 
									background: black; }
	#barrier img 				{ position: absolute; left: calc( 50vw - 430px ); top: calc( 50vh - 241px ); 
									width: 860px; height: 482px; }
	
	/* home page: text */
	#pgHome #content *			{ color: var( --bmPink ); }
	#pgHome #content h3			{ color: var( --bmYellow ); }
	#pgHome #content a			{ color: var( --bmGreen ); }
	
	/* diary page: text */
	#pgDiary #content h2, #pgDiary #content p
								{ color: var( --bmOrange ); }
								
	/* diary page: table */
	#publicDiary thead th		{ color: var( --bmOrange ); }
	#publicDiary th				{ border: 1px solid var( --bmGreen ); }

	/* team page: text */
	#pgTeam #content *			{ color: var( --bmGreen ); }
	#pgTeam td					{ text-align: center; }
	
	/* gallery page: text */
	#pgGall #content *			{ color: var( --bmPink ); }
	#pgGall #content h3			{ float: none; color: var( --bmYellow ); text-align: center; }
	#pgGall #content a			{ color: var( --bmGreen ); }
	#pgGall td					{ text-align: center; }
	



/* open 
=====================================================================================================================*/
	.bm_green 					{ color: var( --bmGreen ); }
	.bm_orange 					{ color: var( --bmOrange ); }
	.bm_purple 					{ color: var( --bmPink ); }
	.bm_yellow 					{ color: var( --bmYellow ); }

	


/* responsive - adapt for narrower screens
=====================================================================================================================*/
	@media( max-width: 1000px ) {
		body					{ padding: 0; }
		body *					{ max-width: 96%; }
		body #menuHam			{ max-width: 115%; }
		h1#desk					{ display: none; }
		h1#mob					{ display: block; }
		#navTop 				{ display: none; }
		#ham, #hamClose 		{ display: block; }
		#barrier				{ display: none; }
	}