@font-face {
	font-family: "sitelenselikiwenasuki";
	src: url(static/sitelenselikiwenasuki.eot);
	src: url(static/sitelenselikiwenasuki.ttf) format("truetype");
}
@font-face {
	font-family: "sitelenselikiwenatuki";
	src: url(static/sitelenselikiwenatuki.eot);
	src: url(static/sitelenselikiwenatuki.ttf) format("truetype");
}
@font-face {
	font-family: "sitelenselikiwenjuniko";
	src: url(static/sitelenselikiwenjuniko.eot);
	src: url(static/sitelenselikiwenjuniko.ttf) format("truetype");
}

html {
	background-color:#ffff99;
	background-image: url(static/bg.png);
	font-family:sitelenselikiwenjuniko,sans-serif;
	font-size:150%;
	display: flex;
	align-items: center;
	min-height: 100%;
}

body {
	margin: 0 auto;
	padding: 1em 3em;
	max-width: 1000px;
	background: #ffff99;
	border: 4px black solid;
	border-radius: 2rem;
	position: relative;
}

sitelen {
	white-space: pre;
	font-family: sitelenselikiwenasuki;

	&:hover {
		font-family: sitelenselikiwenjuniko;
	}
}

#expand-div:has(input:checked) ~ * sitelen {
	font-family: sitelenselikiwenjuniko;
}

#expand-div {
	position: absolute;
  right: 3em;
  bottom: 2em;
}

figure {
	margin: 0;
	image-rendering: pixelated;
	display: flex;
	align-items: center;

	figcaption {
		margin-left: .5em;
		&::before {
			content: "← ";
		}
	}
}

@media (max-width: 1160px) {
	body {
		margin: 0 1em;
	}
}