* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #02030a;
}

body {
  font-family: "Orbitron", sans-serif;
}

#space {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

h1 {
  margin: 0;
  color: #f5efff;
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 8px rgba(210, 180, 255, .95),
    0 0 28px rgba(139, 92, 246, .75),
    0 0 70px rgba(91, 33, 182, .55);
  animation: pulse 3.8s ease-in-out infinite;
  user-select: none;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: .88;
    filter: brightness(.95);
  }
  50% {
    transform: scale(1.035);
    opacity: 1;
    filter: brightness(1.3);
  }
}

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