@media (prefers-color-scheme: light) {
	:root {
		--bg: white;
		--fg: black;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: black;
		--fg: white;
	}
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
}

.splash {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}

.splash-name {
	font-family: ui-monospace, monospace;
	font-size: clamp(1.5rem, 4vw, 3rem);
	letter-spacing: 0.05em;
}

@keyframes flip {
	0%   { transform: rotate(0deg); }
	60%  { transform: rotate(200deg); }
	100% { transform: rotate(180deg); }
}

@keyframes unflip {
	0%   { transform: rotate(180deg); }
	60%  { transform: rotate(-20deg); }
	100% { transform: rotate(0deg); }
}

.splash-name span {
	display: inline-block;
	cursor: default;
}

.splash-name span:hover {
	animation: flip 0.4s ease forwards;
}

.splash-name span.unflipping {
	animation: unflip 0.4s ease forwards;
}