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

body {
  background: #000;
  min-height: 100vh;
  overflow: hidden;
  font-family: 'Courier New', Courier, monospace;
}

#bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    ellipse 70% 70% at center,
    transparent 0%,
    rgba(0, 0, 0, 0.25) 35%,
    rgba(0, 0, 0, 0.65) 60%,
    rgba(0, 0, 0, 0.92) 78%,
    #000 92%
  );
  pointer-events: none;
}


main {
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  font-family: 'Orbitron', 'Courier New', monospace;
  font-size: clamp(2rem, 5.5vw, 4.5rem);
  font-weight: 700;
  color: #00d4ff;
  letter-spacing: 0.06em;
  text-shadow:
    0 0 10px #00d4ff,
    0 0 25px #00d4ff,
    0 0 55px rgba(0, 212, 255, 0.55),
    0 0 110px rgba(0, 212, 255, 0.2);
}

.cursor {
  animation: blink 1s step-end infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

.divider {
  width: min(420px, 80vw);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(0, 212, 255, 0.35), transparent);
  margin: 1.1rem 0;
}

.subtitle {
  font-size: clamp(0.85rem, 2vw, 1.1rem);
  color: #a855f7;
  letter-spacing: 0.28em;
  text-shadow:
    0 0 12px rgba(168, 85, 247, 0.8),
    0 0 30px rgba(168, 85, 247, 0.3);
}