:root {
	--marlettePink: #FFA8EB;
	--marlettePurple: #5656D3;
	--marletteDarkPurple: #1f3577;
	--marletteGray: #D0D1F9;
}
@font-face {
		font-family: "8bitoperator JVE"; 
		src: url("/interestzone/undertale/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: "Mars Needs Cunnilingus"; 
		src: url("/interestzone/undertale/font/Mars_Needs_Cunnilingus.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("/interestzone/undertale/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: "Marlett"; 
		src: url("/font/marlett.ttf") format("truetype");
}
.marlette {
	border: 2px outset var(--marletteGray);
	color: var(--marletteDarkPurple);
	display: flex;
	flex-flow: column;
	font-family: "8bitoperator JVE";
	font-size: 20px;
	line-height: initial;
	height:min-content;
}
.marlette>header {
	background-color: var(--marlettePurple);
	color: white;
	font-family: "Mars Needs Cunnilingus";
	font-size: 18px;
	height: 18px;
	padding: 1px 3px;
	position: relative;
}
.marlette>header>h3 {
	background: transparent;
	color: inherit;
	clip-path: none;
	font-size: inherit;
	font-weight: initial;
	letter-spacing: initial;
	margin: 0;
	padding: 0;
}
.marlette>header>ul {
	font-family: "Marlett";
	font-size: 12px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: -2px;
	right: 3px;
	text-align: center;
}
.marlette>header>ul>li {
	display: inline-block;
}
.marlette>header>ul>li {
	margin: 0;
}
.marlette>header>ul>li>button, .marlette>header>ul>li>button:active {
	margin: 0 0 0 2px;
}
.marlette>header>ul>li>button {
	background-color: var(--marletteGray);
	border: 2px outset var(--marletteGray);
	color: var(--marletteDarkPurple);
	padding: 0;
	position: relative;
	height: 14px;
	aspect-ratio: 1.2 / 1;
}
.marlette>header>ul>li>button>span {
	position: absolute;
	top: -3px;
	left: 50%;
	transform: translateX(-50%);
}
.marlette>nav {
	background-color: var(--marletteGray);
	border: 0;
	font-family: "Mars Needs Cunnilingus";
	font-size: 14px;
	padding: 0;
}
.marlette>nav>ul {
	display: inline-block;
}
.marlette>nav>ul>li {
	border: 1px solid var(--marletteGray);
	margin: 0;
	padding: 0 4px;
}
.marlette>nav>ul>li:hover {
	border-style: outset;
	cursor: pointer;
}
.marlette>nav>ul>li, .marlette>nav>ul>li>a, .marlette>nav>ul>li>a:hover {
	color: var(--marletteDarkPurple);
}
.marlette>nav>ul>li>a {
	font-weight: initial;
}
.marlette>nav>ul>li:first-letter {
	text-decoration: underline;
}
.marlette>nav>ul>li:hover>a {
	text-decoration: initial;
}
.marlette>section {
	background-color: white;
	border: 1px insert var(--marletteGray);
	flex-grow: 1;
	flex-shrink: 1;
	height: 100%;
	padding: 0 10px;
}
.marlette>section h1, .marlette>section h2, .marlette>section h3, .marlette>section h4 {
	font-family: "Dotumche";
}
.marlette>section h1, .marlette>section h2, .marlette>section h3, .marlette>section h4, .marlette>section h5, .marlette>section h6 {
	background-color: transparent;
	color: inherit;
	clip-path: none;
	font-weight: initial;
	letter-spacing: initial;
}
#marletteComic {
	display: block;
	width: 100%;
	height: auto;
	margin: 0.5em auto;
	max-width: 500px;
}
.marlette p {
	margin: 0.5em 0;
}