:root {
	--orange: #FF7F27;
	--gray: #848484;
	
	--animlength: 2s;
	--outlineSize: 3px;
}
@font-face {
		font-family: "8bitoperator JVE"; 
		src: url("font/8bitoperator_jve.woff") format("WOFF"); /*https://drive.google.com/file/d/1MVQ8b1N8qh_UmNnUoJb6s_4N4e0uCMHR/view*/
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "8-BIT WONDER"; 
		src: url("font/8-BIT WONDER.TTF") format("truetype"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "Crypt of Tomorrow"; 
		src: url("font/CryptOfTomorrow.ttf") format("truetype"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "Dotumche"; 
		src: url("font/DotumChe UT (Speech Bubble Font).ttf") format("truetype"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "UndertaleSans"; 
		src: url("font/UndertaleSans.ttf") format("truetype"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "UndertalePapyrus"; 
		src: url("font/UndertalePapyrus.ttf") format("truetype"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
/* MONSTER FRIEND */
@font-face {
		font-family: "Monster Friend Top"; 
		src: url("font/monsterfriend/MonsterFriend2Fore.woff") format("WOFF"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "Monster Friend Middle"; 
		src: url("font/monsterfriend/MonsterFriend2Center.woff") format("WOFF"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
@font-face {
		font-family: "Monster Friend Bottom"; 
		src: url("font/monsterfriend/MonsterFriend2Back.woff") format("WOFF"); 
		font-weight: normal;
		font-style: normal;
		font-display: swap;
		font-smooth: never;
		-webkit-font-smoothing: none;
}
/* ANIMATION */
@keyframes bg-front {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100px 117px;
  }
}
@keyframes bg-back {
  0% {
    background-position: 100px 117px;
  }
  100% {
    background-position: 0 0;
  }
}
html {
	background-color: black;
}
html, body {
	font-family: "8bitoperator JVE";
	letter-spacing: 1px;
	font-size: 26px;
	color: #FFF;
}
a {
	color: var(--orange);
	text-decoration: none;
}
a:hover {
	color: #FF0;
}
b, .warning {
	color: #FF0;
	font-weight: initial;
}
footer {
	color: var(--gray);
	font-family: "Crypt of Tomorrow";
	font-size: 0.8rem;
	margin-top: 0.2rem;
	text-align: center;
}
header {
	margin: 0 0 0.5rem;
	text-align: center;
}
header>p {
	margin: 0;
	text-align: center;
}
header .title {
	color: #F00;
	font-family: "Monster Friend Middle";
	font-size: clamp(1rem, 10vw, 2rem);
	position: relative;
	margin: 0;
}
header .title:before, header .title:after {
	content: 'UndeRtale';
	display: block;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	left: 50%;
}
header .title:after {
	color: white;
	font-family: "Monster Friend Top";
}
header .title:before {
	color: var(--gray);
	font-family: "Monster Friend Bottom";
}
header .subtitle {
	font-family: "Dotumche";
	font-size: clamp(0.8rem, 5vw, 1rem);
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
h1, h2 {
	font-family: "8-BIT WONDER";
}
h3, h4, h5, h6 {
	font-family: "Dotumche";
}
iframe {
	border: none;
	
	aspect-ratio: 16/9;
	height: 100%;
	max-height: 540px;
	width: 100%;
	max-width: 960px;
	margin: auto;
}
nav {
	width: min-content;
	max-width: calc(142px*2);
	margin: 0;
	top: 10px;
	/* max-height: calc(148px*2);
	aspect-ratio: 71/74;*/
	
	font-size: 1.5rem;
}
nav>ul {
	margin: 0.42em 0 0.62em;
	padding: 0 0.84em 0 1.6em;
	list-style: none;
	line-height: 1;
	text-align: left;
	flex-basis: 220px;
}
nav>ul>li:not(:first-child):not(:last-child) {
	margin: 0.15em 0;
}
nav>ul>li, nav>ul>li>a {
	color: #FFF;
	position: relative;
}
nav>ul>li:hover, nav>ul>li>a:hover {
	color: #FFFF00;
}
nav>ul>li:hover:before, nav>ul>li>a:hover:before {
	background-image: url(img/cursor.png);
	background-size: 0.6em;
	content: '';
	display: block;
	position: absolute;
	left: -1em;
	top: 0.2em;
	width: 0.6em;
	height: 0.6em;
	aspect-ratio: 1;
	
	image-rendering: pixelated; /*edge*/
	image-rendering: crisp-edges;
	
	filter: brightness(0) saturate(100%) invert(11%) sepia(97%) saturate(6270%) hue-rotate(1deg) brightness(105%) contrast(112%);
}
s {
	color: var(--gray);
}
small {
	font-size: 0.7em;
}
u {
	text-decoration-color: var(--gray);
}
.background {
	position: fixed;
	height: 100%;
	width: 100%;
	top: 0;

	background-image: url("img/bg.png");
	background-attachment: fixed;
	background-repeat: repeat;
}
#bandcamp {
	max-width: 700px;
	max-height: initial;
	aspect-ratio: initial;
	height: 42px;
	margin: 1em auto 0;
}
#front {
	animation: bg-front var(--animlength) linear infinite;
	background-position: 0 0;
	opacity: 0.6;
	z-index:-2;
}
#back {
	animation: bg-back var(--animlength) linear infinite;
	background-position: 100px 117px;
	opacity: 0.4;
	z-index:-3;
}
.charaBox>div {
	flex-basis: 500px;
}
.contentBody {
	flex-basis: 400px;
	max-width: 1300px;
	letter-spacing: 0.05rem;
	text-align: center;
}
.contentBody>h1, .contentBody>h2, .contentBody>h3, .contentBody>h4, .contentBody>h5, .contentBody>h6, .contentBody>p, footer, .outline {
	text-shadow: calc(var(--outlineSize) * -1) 0 black, 0 var(--outlineSize) black, var(--outlineSize) 0 black, 0 calc(var(--outlineSize) * -1) black
}
.box, .charaBox>div {
	padding: 0 1rem;
}
.box>p {
	margin: 0.5rem 0;
}
.box, nav, .charaBox>div {
	background-color: #000;
	border: 6px solid #FFF;
	text-align: initial;
}
.box h1, .box h2, .box h3, .box h4, .box h5, .box h6, .charaBox>div h1, .charaBox>div h2, .charaBox>div h3, .charaBox>div h4, .charaBox>div h5, .charaBox>div h6 {
	text-align: center;
	margin: 1rem 0 0.5rem;
}
.flex {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	align-content: flex-start;
	justify-content: center;
	gap: 0.8rem;
}
.flex.column {
	flex-flow: column;
}
.flex>div, .flex>section {
	flex-grow: 1;
	flex-shrink: 1;
}
#music+.box .flex>div {
	flex-basis: 350px;
}
.au>div {
	flex-basis: 500px;
}
#sans {
	font-family: "UndertaleSans";
}
#papyrus {
	font-family: "UndertalePapyrus";
}
.siteButton {
	display: block;
	margin: 0.3rem auto 0.5rem;
}

.warning:before, .warning:after {
	content: "!!";
	margin: 0 0.5em;
}
@media screen and (max-width: 690px) {
	nav {
		width: initial;
		max-width: initial;
	}
	nav>ul {
		margin: 0;
		padding: 0.5em 0.7em;
		text-align: center;
	}
	nav>ul>li {
		display: inline-block;
	}
	nav>ul>li:not(:last-of-type):not(:only-of-type):after {
		content: " •";
		color: var(--gray);
	}
	nav>ul>li:hover:before, nav>ul>li>a:hover:before {
		display: none;
	}
}