/********** COLOR VARIABLES **********/
:root{
	/*text*/
	--text: #000;
	--link: #0000EE;
	--linkhover: #000066;
	--redlink: #CC0000;
	--header: #000;
	--boxheader: #000;
	
	/*borders and underlines*/
	--mainborder: #666;
	--boxborder: #666;
	--headerunderline: #666;
	
	/*backgrounds*/
	--bodybg: #ddd;
	--mainbg: #fff;
	--boxbg: #eee; 
	--boxheaderbg: #fff;
	--sidebarlinkhoverbg: #ddd;
}

/********** BASIC STYLING **********/

body{
	background-color: var(--bodybg);	
	color: var(--text);
	font-family: sans-serif;
	font-size: 11pt;
	margin: 0;
	padding: 0;
}

a{color: var(--link); text-decoration: underline;}
a:hover{color: var(--linkhover);}

h1, h2, h3, h4, h5{
	margin-top: 0;   
}

h1, h2{
	color: var(--header); 
	border-bottom: 2px solid var(--headerunderline);
	overflow: hidden;
	clear: left;
}

img{max-width: 100%}

/********** UTILITY CLASSES **********/

.text-center{text-align: center;}

a.redlink{text-decoration: none; color: var(--redlink);}

.big-text{font-size: large;}

.sm-text{font-size: 8pt;}

.clear-both{clear: both;}

/********** GRID CONTAINER **********/

.container{
	max-width: 88.5%;
  margin: 15px 0 0 auto;
	min-height: Calc(100vh - 15px);
}

/********** MAIN **********/

main{
	padding: 10px;
	background-color: var(--mainbg);
	
	border-radius: 10px 0 0 10px;
	border: 2px solid var(--mainborder);
	border-right: none;
}

/***** boxes *****/

.box-row{
	margin-bottom: 10px;
	display: flex;
	flex-direction: row;
	justify-content: stretch;
	column-gap: 10px;
}

.box{
	padding: 10px;
	background-color: var(--boxbg);
	flex: 1 1 0;
	
	border-radius: 10px;
	border: 2px solid var(--boxborder);
}

.box h1, .box h2, .box h3, .box h4, .box h5{
	color: var(--boxheader);
	background-color: var(--boxheaderbg);
	padding: 5px;
	
	border-radius: 5px;
	border-bottom: none;
}

/***** box navs *****/

ul.box-nav{
	list-style-type: none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 0;
}

ul.box-nav li{
	flex: 1 1 0;
}

ul.box-nav a{
	display: flex;
	flex-direction: column;
	align-items: center;
}

/***** infobox *****/

table.infobox{
	background-color: var(--boxbg);
	padding: 2px;
	border: 2px solid var(--boxborder);
	width: 300px;
	
	float: right;
	margin-left: 10px;
	
	text-align: left;
}

table.infobox tbody{
	vertical-align: top;
}

table.infobox th[colspan="2"]{
	text-align: center;
}

.infobox h1, .infobox h2, .infobox h3, .infobox h4, .infobox h5{
	border-bottom: none;
	background-color: var(--boxheaderbg);
	color: var(--boxheader);
	margin: 0;
}

table.infobox th, table.infobox td{
	padding: 5px;
}

table.infobox ul{
  padding-left: 1px;
}

/***** table of contents *****/

details {
	margin-bottom: 15px;
}

details.toc{
	background-color: var(--boxbg);
	padding: 5px 10px;
	margin-bottom: 10px;
	display: inline-block;
	
	border: 2px solid var(--boxborder);
}

details.toc ol{
	margin: 5px 0;
  counter-reset: index;
  list-style-type: none;
}

details.toc li::before {
  counter-increment: index;
  content: counters(index, ".", decimal) ". ";
}

/***** floating images *****/
figure.left-image, figure.right-image{
	padding: 5px;
	margin: 0 0 5px 0;
	max-width: 253px;
	
	border: 2px solid var(--boxborder);
}

figure.left-image img, figure.right-image img{
	max-width: 250px;
	
	border: 2px solid var(--boxborder);
}

figure.left-image{
	float: left;
	clear: left;
	margin-right: 10px;
}

figure.right-image{
	float: right;
	clear: right;
	margin-left: 10px;
}

/***** gallery *****/
.gallery{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	column-gap: 10px;
	row-gap: 10px;
	margin-bottom: 10px;
	align-items: start;
}

figure.gallery-image{
	padding: 5px;
	border: 2px solid var(--boxborder);
	margin: 0;
}

figure.gallery-image img{
	border: 2px solid var(--boxborder);
	max-height: 200px;
}

figure.gallery-image figcaption{
	width: 0;
	min-width: 100%;
}

/***** notice boxes (for stubs, spoilers, etc) *****/

.notice{
	background-color: var(--boxbg);
	padding: 10px;
	margin: 0 auto 10px auto;
	
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	
	border: 2px solid var(--boxborder);
}

.notice p{
	margin: 0 0 0 10px;
}


/********** FOOTER **********/

footer{
	grid-area: footer;
	text-align: center;
}

/********** MEDIUM/SMALL SCREENS **********/
@media (max-width: 1615px) {
    .container {
     max-width: 100%;
     margin: 15px 0; 
    }
    
    main {
		  margin: 0 10px;
		
		  border-radius: 10px;
		  border-right: 2px solid var(--mainborder);
      padding: 10px;
    }
  }

/********** SMALL SCREENS **********/
	@media (max-width:576px) {
	  
	/*make box rows vertical*/
	.box-row{
		flex-direction: column;
		row-gap: 10px;
	}
	
	/*unfloat a bunch of stuff*/
	table.infobox{
		float: none;
		width: 90%;
		margin: auto;
	}
	
	ul.box-nav li{flex: 0 0 50%; margin: 0 auto 10px auto;}
	
	figure.left-image, figure.right-image{
		float: none;
		display: block;
		margin: 0 auto 5px auto;
	}
}