@font-face {
	font-family: kakougothic;
	src: url(./fonts/KaKouGothic.woff2);
}
@font-face {
	font-family: reigasou;
	src: url(./fonts/ReiGaSou.woff2);
}
a{
	color: #c7d9ff;
}
a:hover {
	color: white;
}
body {
	align-items: center;
	background-color: grey;
	background-image: linear-gradient(#deb2b2, #decab2, #dbdeb2, #badeb2, #b2ded9, #b2b7de, #d4b2de, #deb2d0, #deb2b2);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
code {
	background: black;
	padding: 7px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: reigasou;
	margin: auto;
	text-align: left;
}
h1 {
	border-bottom: 6px ridge #0d141d;
	font-size: 3em;
	margin-top: 15px;
	text-shadow: 4px 4px #454f71;
	width: 97%;
}
h2 {
	border-bottom: 4px ridge #0d141d;
	font-size: 2em;
	margin-top: 15px;
	text-shadow: 3px 3px #454f71;
	width: 92%;
}
h3 {
	border-bottom: 2px ridge #0d141d;
	font-size: 1.5em;
	margin-top: 10px;
	text-shadow: 2px 2px #454f71;
	width: 88%;
}
hr {
	border-color: #c7d9ff;
	border-radius: 15px;
	border-style: ridge;
	border-width: 4px;
}
li {
	text-align:left;
	margin-right: 5px;
}
nav {
	align-self: flex-start;
	flex-direction: column;
	flex-basis: 15%;
	margin-top: 20px;
	position: sticky;
	top: 0;
}
nav a {
	text-decoration: none;
}
p{
 margin: 1em;
}
table {
 	margin: auto;
 	margin-bottom: 1%;
	margin-top: 1%;
 	width: 95%;
}
table, td, th {
 	border: 3px ridge;
 	border-color: #c7d9ff;
 	border-collapse: collapse;
}
td, th {
 	padding: 0.50em;
}
td li {
	text-align: center;
}
th {
	background-color: #0d141d;
}
ul{
	display: table;
	list-style-position: inside;
	margin: 0 auto;
}
.bigimg {
	max-width: 90%;
	max-height: 50vh;
}
.skitchara {
	width: 72px;
}
.skitcharacolumn {
	width: 125px;
}
.storymenu {
	display: inline;
}
.storymenu img {
	width: 45%;
}
.textbox {
	background-color: #0d141d;
	background-image: linear-gradient(#0d141d, #454f71);
	border-color: #c7d9ff;
	border-radius: 15px;
	border-style: ridge;
	border-width: 4px;
	color: white;
	font-family: kakougothic;
	line-height: 1.25;
}
.navbutton{
	aspect-ratio: 55/10;
	background-color: #0d141d;
	background-image: linear-gradient(#0d141d, #213b58);
	clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0% 50%);
	color: #fff;
	font-family: reigasou;
	font-size: 1em;
	margin-top: 10px;
	margin-right: 7px;
	padding-bottom: 3px;
	padding-right: 3px;
	padding-left: 3px;
	text-align: center;
}
.navbuttonwrap{
 	filter: drop-shadow(2px 1px #c7d9ff) drop-shadow(-2px -1px #c7d9ff) drop-shadow(-2px 1px #c7d9ff) drop-shadow(2px -1px #c7d9ff) drop-shadow(1px 1px 2px #000);
}
.navbutton>p {
	padding-top: 0.7em;
	margin: 0px;
};
#banner {
	width: 1000px;
	height: 150px;
}
main {
	min-height: calc(90vh - 150px);
	text-align: center;
	width: 75vw;
}
#updates {
	max-width: 750px;
	margin: auto;
	margin-top: 2em;
	margin-bottom: 2em;
}
#wrapper {
	display: flex;
	align-items: stretch;
	justify-content: center;
	flex-direction: row;
}
.voicelist {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.voiceitem {
	text-align: center;
	padding: 10px;
	margin: 5px;
}
audio {
	width: 300px;
}
.hasaudio {
	width: 310px;
}
.voicetable {
	text-align: left;
}
@media (max-width: 800px) {
	#wrapper {
		align-items: center;
		flex-direction: column;
	}
	#banner {
		display: none;
	}
	.navbutton {
		width: 7em;
	}
	nav {
		align-content: space-around;
		align-items: center;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-evenly;
		position: static;
	}
	nav hr {
		display: none;
	}
	main {
		margin-top: 10px;
		min-width: 90vw;
	}
}