/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/********** COLOR VARIABLES **********/
:root{
	/*text*/
	--text: #0a0021;
	--link: #5700EE;
	--linkhover: #000066;
	--redlink: #CC0000;
	--header: #000;
	--boxheader: #000;
	
	/*borders and underlines*/
	--mainborder: #c90404;
	--boxborder: #e03d02;
	--headerunderline: #c90404;
	
	/*backgrounds*/
	--bodybg: #fdffe8;
	--mainbg: #fa1e1e;
	--boxbg: #fc4d0d; 
	--boxheaderbg: #fcd32b;
	--sidebarlinkhoverbg: #ddd;
}

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

body{
	background-color: var(--bodybg);	
	color: var(--text);
	font-family: sans-serif;
	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;}

.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);
}

/********** buttons **********/

.button1 {
  background-color: #fa1e1e;
  border-radius: 30px;
  border: 2px solid #fa1e1e;
}

.button2 {
  background-color: #ffad8c;
  border-radius: 30px;
  border: 2px solid #ffad8c;
}

.button3 {
  background-color: #549467;
  border-radius: 30px;
  border: 2px solid #549467;
}

/********** nav **********/

@media only screen and (orientation: landscape) {
 .nav1 {
  display: none;
 }
 .nav2 {
   display: block;
 }
}

@media only screen and (orientation: portrait) {
 .nav2 {
  display: none;
 }
 .nav1 {
   display: block;
 }
}

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

sidebar{
	grid-area: sidebar;
}

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

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

sidebar nav{
	padding: 10px;
	background-color: var(--mainbg);
	margin-bottom: 10px;
	
	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: var(--sidebarlinkhoverbg);
}

/********** 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{
	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 of contents *****/

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;
	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;
	}
}