@font-face {
	font-family: "Comicoro";
	src:
		url("/font/Comicoro.woff2") format("woff2"),
		url("/font/Comicoro.woff") format("woff"),
		url("/font/Comicoro.ttf") format("truetype");
}

@font-face {
	font-family: "Notepen";
	src:
		url("/font/Notepen.woff2") format("woff2"),
		url("/font/Notepen.woff") format("woff"),
		url("/font/Notepen.ttf") format("truetype");
}

@keyframes slideLeft {
	from {
		background-position: 0 0;
	}
	to {
		background-position: -1000px 0;
	}
}

/********** COLOR VARIABLES **********/
:root{
	/*text*/
	--text: #f4f7ff;
	--link: #00e5ff;
	--linkhover: #66ffff;
	--redlink: #ff7a92;
	--header: #ffffff;
	--boxheader: #ffffff;
	--muted: #a0adb8;
	
	/*borders and underlines*/
	--mainborder: rgba(255, 255, 255, 0.2);
	--boxborder: rgba(255, 255, 255, 0.25);
	--headerunderline: rgba(255, 255, 255, 0.35);
	
	/*backgrounds*/
	--bodybg: #8d7cd6;
	--mainbg: rgba(0, 0, 0, 0.82);
	--boxbg: rgba(8, 10, 24, 0.84);
	--boxheaderbg: rgba(255, 255, 255, 0.08);
	--sidebarlinkhoverbg: rgba(102, 255, 255, 0.12);
}

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

body{
	font-size: 26px;
	background-color: var(--bodybg);	
	color: var(--text);
	font-family: "Comicoro", "Cherry Cream Soda", sans-serif;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	position: relative;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 220px;
	background-image: url("/images/ui/comicbackground02.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
	background-position: 0 0;
	pointer-events: none;
	z-index: -1;
	animation: slideLeft 1500s linear infinite;
}

body::after {
	content: "";
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 220px;
	background-image: url("/images/ui/comicbackground01.png");
	background-repeat: repeat-x;
	background-size: auto 100%;
	pointer-events: none;
	z-index: -1;
}

a{color: var(--link); text-decoration: none;}
a:visited{color: #66dceb;}
a:hover, a:focus{color: var(--linkhover); text-decoration: underline;}

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

h1, h2{
	color: var(--header); 
	border-bottom: 2px solid var(--headerunderline);
	overflow: hidden;
	clear: left;
	font-family: "Notepen", "Comicoro", sans-serif;
	letter-spacing: 0.02em;
}

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);
	padding-bottom: 10px;
}

/********** 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: 6px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 14px 14px 16px 14px;
	border-image-repeat: repeat;
	border-left: none;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

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

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: 6px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 14px 14px 16px 14px;
	border-image-repeat: repeat;
	border-right: none;
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

/***** 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: 4px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 12px 12px 14px 12px;
	border-image-repeat: repeat;
}

.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;
	gap: 6px;
	font-family: "Notepen", "Comicoro", sans-serif;
	font-size: 25px;
}

ul.box-nav img{
	width: 120px;
	height: 120px;
	object-fit: cover;
	display: block;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

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

table.infobox{
	background-color: var(--boxbg);
	padding: 2px;
	border: 4px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 10px 10px 12px 10px;
	border-image-repeat: repeat;
	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: 3px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 8px 8px 10px 8px;
	border-image-repeat: repeat;
}

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: 3px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 8px 8px 10px 8px;
	border-image-repeat: repeat;
}

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

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: 3px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 8px 8px 10px 8px;
	border-image-repeat: repeat;
	margin: 0;
}

figure.gallery-image img{
	border: 2px solid rgba(255, 255, 255, 0.3);
	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: 4px solid;
	border-image: url("/images/ui/leather2.png") 14 14 16 14 fill / 10px 10px 12px 10px;
	border-image-repeat: repeat;
}

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


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

footer{
	grid-area: footer;
	text-align: center;
	color: var(--muted);
	font-family: "Comicoro", sans-serif;
}

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