:root { color-scheme: dark; --ink: #cfe0ff; --muted: #6f84b8; }

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto;
  background: radial-gradient(ellipse at 50% 42%, #0b1640 0%, #04081c 45%, #000 80%);
  color: var(--ink);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main {
  display: grid;
  place-items: center;
  align-content: center;
  padding: 16px;
  text-align: center;
}

.logo {
  position: relative;
  width: min(86vw, 640px);
  aspect-ratio: 1200 / 890;
}
.logo canvas, .logo svg { position: absolute; inset: 0; width: 100%; height: 100%; }

#sweep { animation: sweep 5.5s ease-in-out infinite; }
@keyframes sweep {
  0%, 55% { transform: skewX(-28deg) translateX(0); }
  100% { transform: skewX(-28deg) translateX(2200px); }
}

h1 {
  margin: .4em 0 0;
  font-size: clamp(1.6rem, 6vw, 2.6rem);
  font-weight: 300;
  letter-spacing: .35em;
  padding-left: .35em;
  color: var(--muted);
}
h1 span {
  font-weight: 800;
  background: linear-gradient(#e6f2ff, #4f86ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.since { margin: .3em 0 0; color: var(--muted); letter-spacing: .2em; font-size: .85rem; text-transform: uppercase; }

footer { padding: 16px; text-align: center; font-size: .85rem; color: var(--muted); }
footer a { color: var(--muted); }
footer a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  #sweep { animation: none; }
}

.since a { color: inherit; text-decoration: none; border-bottom: 1px dotted currentColor; }
.since a:hover { color: var(--ink); }

/* ---- easter egg: 2004 mode ---- */
.y2004 body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: url(etv-2004.png) 0 0 / 273px 238px repeat;
  opacity: .13;
  animation: drift 60s linear infinite;
  pointer-events: none;
}
@keyframes drift { to { background-position: 273px 238px; } }
.y2004 main, .y2004 footer { position: relative; z-index: 1; }
.runner {
  position: fixed;
  bottom: 4vh;
  left: 0;
  z-index: 2;
  width: min(42vw, 300px);
  pointer-events: none;
  filter: drop-shadow(0 0 10px #3a7bff);
  animation: race 7s linear forwards, bob .35s ease-in-out infinite alternate;
}
@keyframes race { from { translate: 100vw 0; } to { translate: -110% 0; } }  /* right to left, the way he runs in the 2004 image */
@keyframes bob { from { transform: rotate(-3deg) translateY(0); } to { transform: rotate(2deg) translateY(-8px); } }
.y2004-note {
  position: fixed;
  top: 12px;
  left: 0;
  right: 0;
  z-index: 3;
  margin: 0;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
}
.y2004-note a { color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .y2004 body::before { animation: none; }
}