@charset "utf-8";

/*
PO'BMC styles
2025+ 
*/


/* global
-----------------------------------------------------------------------------------------------------------*/
	body, textarea			{ font-family: Aptos, "Trebuchet MS", Verdana, Arial, Helvetica, 
								SunSans-Regular, sans-serif; font-size: 15px; }
	body 					{ background-color: #FFFFdd; }
	header nav				{ float: right; width: 430px; padding-top: 75px; text-transform: uppercase; 
								display: flex; flex-direction: row; justify-content: space-between; }
	header:after			{ content: ""; display: block; clear: both; }
	#container 				{ margin: 0 auto; width: 700px; max-width: 100%; padding-top: 0; }

	h1 						{ float: left; margin: 0; width: 250px; height: 156px; }
	h2						{ margin-bottom: 1em; font-weight: normal;  font-size: 140%; }
	h3						{ margin: 0; }

	label					{ font-weight: bold; }
	figure					{ margin: 0; }
	a						{ color: #336699; text-decoration: none; font-weight: normal; }
	a:hover 				{ color: #3399ff; }

/* page-specific 
-----------------------------------------------------------------------------------------------------------*/
	/* home */
	.game					{ width: 340px; padding-top: 2em; }
	.game.L					{ clear: both; float: left; }
	.game.R					{ float: right; }
	.game div				{ float: right; width: 186px; }
	.game h3				{ font-size: 105%; }		
	.game p					{ margin: 0; }
	.game img 				{ float: left; margin-right: 16px; margin-bottom: 20px; width: 138px; }
	.game b					{ color: #800000; }
	
	/* about */
	#aboutL					{ float: left; width: 340px; }
	#aboutR					{ float: right; width: 340px; }
  #aboutL p:first-child, #aboutR p:first-child { margin-top: 0; }
  
	/* biogs */
	.bio					{ clear: both; padding-top: 2em; }
	.bio div				{ float: right; width: 500px; }
	.bio p					{ margin: 1ex 0; }
	.bio img				{ float: left; width: 151px; margin-right: 49px; margin-bottom: 1ex; }
	.bio figure				{ float: left; width: 180px; }
	.bio figcaption			{ margin-top: 1ex; margin-right: 10px; font-style: italic; font-size: 80%; }

	/* complete */
	#games p 				{ margin: 0.5ex 0 0.5ex 2em; text-indent: -2em; }
	#games p.gap 			{ margin-top: 1em; }
	#games span 			{ margin-left: 1em; }
	
	/* story */
	.story h2, .story header + p
							{ text-align: center; }
	.story h2				{ margin-bottom: 2em; }
	.story p				{ line-height: 1.4; }

/* open
-----------------------------------------------------------------------------------------------------------*/
	.small 					{ font-size: 80%; }
	.centred 				{ text-align: center; }
	.spacey					{ word-spacing: 16px; }
	.highlight 				{ color: #800000; font-weight: bold; }
	
/* responsive
-----------------------------------------------------------------------------------------------------------*/
	
@media( max-width: 720px ) {
	/* template */
	h1						{ width: 150px; }
	header nav				{ width: calc( 100% - 190px); height: 100px; padding: 30px 5px 30px 0; 
								text-align: right; flex-direction: column; }
	
	/* home */
	.game					{ width: 95%; }
	.game.R					{ float: left; }
	.game img				{ width: 100px; }
	.game div				{ width: calc( 100% - 120px); }
	
	/* about */
	#aboutL,#aboutR			{ width: 95%; }
	#aboutR					{ float: left; }
	
	/* biogs */
	.bio img				{ width: 100px; margin-right: 10px; }
	.bio div				{ width: calc( 100% - 120px); }
	.bio figure				{ width: 110px; }
}
	

@media( max-width: 500px ) {
	/* biogs */
	.bio, .bio div			{ width: 95%; }
	.bio img, .bio figure, .bio div
							{ float: none; }
}