:root {
	background-color: honeydew;
	color: darkgreen;
	font-family: "Josefin Sans", Arial, sans-serif;
}

/* normalize some styles */
* {
	line-height: 1.2;
}

a {
	color: rgb(0, 102, 204);

	&:visited {
		color: rgb(85, 26, 139);
	}
}

body {
	margin: 1em;
}

main {
	margin: auto;
	width: 100%;
	max-width: 800px;
}

#home li {
	line-height: 1.3;
}

li::marker {
	color: darkolivegreen;
}

#koishi {
	color: darkolivegreen;
}

#koishi.quickanimate::before,
#koishi.quickanimate::after {
	transition-duration: 0s;
}
#koishi.beforefontload::before,
#koishi.beforefontload::after {
	transform: translate(-12%, -6%) rotate(-15deg);
}

#koishi {
	position: relative;
	z-index: 1;
}

#koishi::before,
#koishi::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background-position: center;
	background-size: contain;
	width: 32px;
	height: 32px;

	transform: translate(-11%, -25%) rotate(-15deg);
	transition: transform 0.33s;

	pointer-events: none;
}

#koishi::before {
	background-image: url(/assets/hat-bg.svg);
	z-index: -1;
}
#koishi::after {
	background-image: url(/assets/hat-fg.svg);
	z-index: 1;
}

#vingette {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	color: #003300;
	background: radial-gradient(circle, transparent 80%, currentColor 100%);

	pointer-events: none;
	z-index: -1;

	transition: opacity 1s ease-out;
	opacity: 0.125;
}

@media screen and (width < 800px) {
	#vingette {
		opacity: 0.05;
	}
}

main > h1 > a {
	margin-right: 0.33em;
}

a.home::before {
	content: "";
	color: red;
	display: inline-block;
	width: 1em;
	height: 1em;
	background-image: url(/assets/back.svg);
	background-size: contain;
	background-position: center;
	vertical-align: top;
}

a[target="_blank"] {
	text-decoration-skip-ink: none;
}
a[target="_blank"]::after {
	content: "";
	display: inline-block;
	vertical-align: sub;
	width: 0.7em;
	height: 0.7em;
	margin-left: 1px;
	margin-bottom: 1px;
	text-decoration: underline;

	background-image: url(/assets/external-link.svg);
	background-size: contain;
	background-position: center;
}

ul h3,
ul h2 {
	margin: 0;
}

figure ul {
	margin-top: 0.5em;
}

#koisher {
	pointer-events: none;

	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;

	video,
	img {
		pointer-events: auto;

		position: absolute;
		right: 0;
		bottom: 0;
		max-width: max(10vw, 10vh);
		filter: drop-shadow(4px 4px #e4f5e4);
	}
}

#frontent span {
	display: inline-block;
	text-decoration: inherit;
}

input[type="checkbox"] {
	accent-color: darkgreen;
}