@property --neon {
  syntax: "<color>";
  inherits: true;
  initial-value: #00f0ff;
}

@property --glow {
  syntax: "<length>";
  inherits: true;
  initial-value: 18px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  background: #000;
  color: #8a8f9c;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
}

#bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
}

main {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 2rem 1rem;
}

.title {
  margin: 0;
  font-family: "Orbitron", "Eurostile", "Bank Gothic", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(2rem, 9vw, 8rem);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.1;
  color: var(--neon);
  text-shadow:
    0 0 calc(var(--glow) * 0.25) var(--neon),
    0 0 var(--glow) var(--neon),
    0 0 calc(var(--glow) * 2.5) color-mix(in srgb, var(--neon) 50%, transparent);
  animation:
    neon-cycle 16s ease-in-out infinite,
    glow-pulse 5s ease-in-out infinite alternate;
  user-select: none;
}

.title .tld {
  opacity: 0.75;
}

@keyframes neon-cycle {
  0%   { --neon: #00f0ff; }
  25%  { --neon: #ff2bd6; }
  50%  { --neon: #8a5cff; }
  75%  { --neon: #39ff88; }
  100% { --neon: #00f0ff; }
}

@keyframes glow-pulse {
  from { --glow: 14px; }
  to   { --glow: 28px; }
}

footer {
  position: relative;
  z-index: 1;
  padding: 1rem 1.25rem 1.25rem;
  text-align: center;
  font-size: 0.75rem;
  line-height: 1.6;
  color: #6b7080;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
}

footer p {
  margin: 0;
}

footer a {
  color: #9aa0b0;
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 160, 176, 0.35);
}

footer a:hover,
footer a:focus-visible {
  color: #00f0ff;
  border-bottom-color: #00f0ff;
}

footer .sep {
  margin: 0 0.4em;
  opacity: 0.6;
}

@media (max-width: 600px) {
  footer {
    font-size: 0.68rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .title {
    animation: none;
  }
}