/* 2025-03 */

:root {
	--bground: #ffffff;
	--mground: #555555;
	--fground: #000000;
	--count: 14;
}

* { margin: 0; padding: 0; border: 0; box-sizing: border-box; outline : none; }
html { scroll-behavior: smooth; font-size: 62.5%; }
body { height: 100vh; padding: 3vw; color: var(--fground); background: var(--bground) url('src/favicon.svg') no-repeat 98% 98%; background-size: 3vw; display: grid; place-items: center; }
header { padding-top: 5.8vw; width: 100%; }
h1 { text-transform: uppercase; font-family: 'Paytone One', sans-serif; font-size: 6.6vw; height: 9.2vw; }
h2 { font-size: 4.8vw; height: 5.8vw; }
span { color: var(--mground); font-family: 'Itim', cursive; text-transform: lowercase; letter-spacing: -0.2vw; opacity: 0; transition: 0.25s; }
body:hover span, body:active span, body:focus span { opacity: 1; }
ul { height: 7vw; overflow: hidden; font-size: 4.5vw; font-family: 'Itim', cursive; font-weight: bold; }
li { height: 7vw; animation: thingy calc(var(--count) * 3s) ease; }
			
@media (prefers-color-scheme: dark) {
	html { background: var(--fground); color: var(--bground); }
}
@media (max-aspect-ratio: 1/1) {
	body { background-size: 8vw; }
	h1 { font-size: 9.7vw; height: 27vw; }
	body.home span::after {  content: '\A'; white-space: pre; }
}

@keyframes thingy {
	0% { transform: translateY(0); opacity: 1; }
	8% { transform: translateY(0); opacity: 1; }
	9% { transform: translateY(0); opacity: 0; }
	10% { transform: translateY(-7vw); opacity: 1; }
	18% { transform: translateY(-7vw); opacity: 1; }
	19% { transform: translateY(-7vw); opacity: 0; }
	20% { transform: translateY(-14vw); opacity: 1; }
	28% { transform: translateY(-14vw); opacity: 1; }
	29% { transform: translateY(-14vw); opacity: 0; }
	30% { transform: translateY(-21vw); opacity: 1; }
	38% { transform: translateY(-21vw); opacity: 1; }
	39% { transform: translateY(-21vw); opacity: 0; }
	40% { transform: translateY(-28vw); opacity: 1; }
	48% { transform: translateY(-28vw); opacity: 1; }
	49% { transform: translateY(-28vw); opacity: 0; }
	50% { transform: translateY(-35vw); opacity: 1; }
	58% { transform: translateY(-35vw); opacity: 1; }
	59% { transform: translateY(-35vw); opacity: 0; }
	60% { transform: translateY(-42vw); opacity: 1; }
	68% { transform: translateY(-42vw); opacity: 1; }
	69% { transform: translateY(-42vw); opacity: 0; }
	70% { transform: translateY(-49vw); opacity: 1; }
	78% { transform: translateY(-49vw); opacity: 1; }
	79% { transform: translateY(-49vw); opacity: 0; }
	80% { transform: translateY(-56vw); opacity: 1; }
	88% { transform: translateY(-56vw); opacity: 1; }
	89% { transform: translateY(-56vw); opacity: 0; }
	90% { transform: translateY(-63vw); opacity: 1; }
	98% { transform: translateY(-63vw); opacity: 1; }
	99% { transform: translateY(-63vw); opacity: 0; }
	100% { transform: translateY(-70vw)); opacity: 0;}
}