@import url('https://fonts.googleapis.com/css?family=Cinzel:400,500,600,700,800,900|Marck+Script|Raleway&subset=latin-ext');
@import url('https://fonts.googleapis.com/css?family=Crimson+Text:400,600,600i,700');
@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css2?family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&display=swap" rel="stylesheet');
@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy:ital@0;1&display=swap');


/********** COLOR VARIABLES **********/
:root{
	/*text*/
	--text: #000;
	--link: #962626;
	--linkhover: #364a7a;
	--redlink: #CC0000;
	--header: #000;
	--boxheader: #000;
	
	/*borders and underlines*/
	--mainborder: #666;
	--boxborder: #000000;
	--headerunderline: #666;
	
	/*backgrounds*/
	--bodybg: #E7D8BB;
	--mainbg: #F4ECDA;
	--boxbg: #FBF5EA; 
	--boxheaderbg: #E7D8BB;
	--sidebarlinkhoverbg: #FBF5EA;
}

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

body{
	background-color: #E7D8BB;
	background-image: url("https://fpkau.neocities.org/images/Blank-Patina-Paper-3-GraphicsFairy.jpg");
	background-size: cover;
	color: var(--text);
	font-family: 'Source Sans Pro', sans-serif;
	margin: 0;
	padding: 0;
}



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

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

h2{
	color: #4e392f; 
	border-bottom: 2px solid var(--headerunderline);
	overflow: hidden;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	clear: left;
	text-transform: uppercase;
	color: #591717
}

h3.backstory{
	color: #4e392f; 
	border-bottom: 2px solid var(--headerunderline);
	overflow: hidden;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	text-transform: uppercase;
}

h3{
	color: #4e392f; 
	overflow: hidden;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	text-transform: uppercase;
	margin-bottom: 5px;
}


h1{
  color: #4e392f;
  border-bottom: 2px solid var(--headerunderline);
	overflow: hidden;
	font-family: 'Cinzel', serif;
	font-weight: 700;
	clear: left;
	text-transform: uppercase;
}

img{max-width: 100%}

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

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

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

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

.clear-both{clear: both;}

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

.container{
	display: grid;
	grid-template-columns: 200px auto;
	grid-template-rows: 1fr auto;
	grid-template-areas: 
		"sidebar main"
		"footer footer";
	row-gap: 15px;
	column-gap: 15px;
	margin: 15px 0 0 0;
	min-height: Calc(100vh - 15px);
}

/********** SIDEBAR **********/

sidebar{
	grid-area: sidebar;
}

sidebar .logo-image{
	margin-bottom: 10px;
}

/***** sidebar navs *****/

sidebar nav{
	padding: 10px;
	background-color: #FBF5EA;
	margin-bottom: 10px;
	font-family: 'Sorts Mill Goudy';
	font-weight: 600;
	font-size: 18px;
	border-radius: 0 10px 10px 0;
	border: 2px solid var(--mainborder);
	border-left: none;
}

sidebar nav h2{
	margin: 0 10px;
	font-size: 16pt;
}

sidebar nav ul{
	margin: 10px 5px 5px 5px;
	padding-left: 20px;
}

sidebar nav a{
	display: block;
	padding: 2px;
}

sidebar nav a:hover{
	background-color: #EAE1D3;
}

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

main{
	grid-area: 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{
	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;
	font-family: 'Sorts Mill Goudy';
	font-weight: 600;
	font-size: 18px;
}

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: 20px;
	margin-bottom: 20px;
	
	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 of contents *****/

details.toc{
	background-color: var(--boxbg);
	padding: 5px 10px;
	margin-bottom: 10px;
	display: inline-block;
	border: 2px solid var(--boxborder);
	border-radius: 4px;
  padding: 0.5em 0.5em 0;
  font-family: 'Sorts Mill Goudy';
	font-weight: 600;
	font-size: 18px;
}

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 10px 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: 15px;
	margin-top: 15px;
}

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

/***** 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;
	border: 2px solid var(--boxborder);
	border-left: 14px solid #823a3a;
	border-radius: 5px;
	flex-direction: row;
	align-items: center;
	max-width: 100ch;
}

.notice p{
	margin: 0 0 0 10px;
	font-style: italic;
}


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

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

/********** MEDIUM/SMALL SCREENS **********/

@media (max-width:1000px) {
	
	/*turn the grid into a column*/
	.container{
		display: flex;
		flex-direction: column;
		margin-top: 0;
		margin-bottom: 0;
		min-height: 100vh;
	}
	
	/*detach main from left side*/
	main{
		flex-grow: 1;
		margin: 0 10px;
		
		border-radius: 10px;
		border-right: 2px solid var(--mainborder);
	}
	
	/*hide logo image*/
	.logo-image{display: none;}
	
	/*make the sidebar navs horizontal*/
	sidebar nav{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		
		padding: 0;
		margin: 0;
		
		border-radius: 0;
		border-right: none;
		border-top: none;
	}
	
	sidebar nav h2{border-bottom: none;}
	
	sidebar nav ul{
		list-style-type: none;
		margin: 10px 0 0 0;
		padding: 0;
		margin: 0;
		
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		flex-grow: 1;
		justify-content: space-evenly;
	}
	
	sidebar nav a{
		padding: 4px;
		border-radius: 4px;
	}
}

/********** SMALL SCREENS **********/

@media (max-width:576px) {
	
	/*make the sidebar nav headers appear above the links, for space*/
	sidebar nav{
		flex-direction: column;
	}
	
	/*make the sidebar nav links spread out a bit more*/
	sidebar nav ul{
		margin: 0;
		padding: 0;
		align-self: stretch;
	}
	
	/*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;
	}
}

/******** COLLAPSIBLE SECTION *********/
details {
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  font-family: 'Sorts Mill Goudy';
	font-weight: 600;
	font-size: 18px;
}

summary {
  color: #291D18;
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.4em;
  font-family: 'Sorts Mill Goudy';
	font-weight: 600;
	font-size: 18px;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  margin-bottom: 0.5em;
}

/****Color box***/
element.style {
    background-color: #72859A;
}

/******** COLLAPSIBLE SECTION BACKSTORY *********/
details.backstory {
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
  display: inline-block;
	border: 2px solid var(--boxborder);
	border-radius: 4px;
	font-family: 'Source Sans Pro', sans-serif;
	color: var(--text);
	font-weight: 400;
  font-size: 16px;
}

summary.backstory {
  color: #291D18;
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.4em;
  
}

details.backstory[open] {
  padding: 0.5em;
	max-width: 120ch;
}

details.backstory[open] summary {
  margin-bottom: 0.5em;
}

/****Color box***/
element.style {
    background-color: #72859A;
}

/*** Quote text ***/

.game-quote {
    font: 400 1.125rem / 1.406rem var(--font-body-serif);
    letter-spacing: normal;
    margin: auto;
    padding: 1.25rem 1rem;
    max-width: 80ch;
}
    
.quote-text, .quote-text p, .portable-infobox :is(.quote-text,.quote-text p) {
    font: 500 italic 1.25rem / 2rem var(--font-body-serif);
    letter-spacing: 0.0125em;
    text-align: center;
    	background-color: var(--boxbg);
	padding: 10px;
	margin: 0 auto 10px auto;
	display: inline-flex;
	border: 2px solid var(--boxborder);
	border-left: 14px solid #823a3a;
	flex-direction: row;
	max-width: 60.0%;
}