body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(135deg, #0a0c0f, #121821, #1e2a33, #25323f, #1e2a33, #121821, #0a0c0f);
  background-size: 300% 300%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo-container {
  position: absolute;
  top: -80px; /* adjust for spacing */
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 10;
}

/* Base glow + responsive sizing */
.glow-logo {
  display: block;
  width: 20vw;          /* scales with viewport width */
  max-width: 300px;     /* won’t get too huge on desktop */
  min-width: 300px;      /* stays legible on small phones */
  height: auto;
  filter:
    drop-shadow(0 0 8px #0ff)
    drop-shadow(0 0 16px #0ff);
  animation: glow-pulse 2s infinite ease-in-out;
}

/* Tweak sizing on very small screens */
@media (max-width: 400px) {
  .glow-logo {
    width: auto;
    max-width: auto;
    min-width: auto;
  }
}

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 10px #0ff) drop-shadow(0 0 20px #0ff);
  }
  50% {
    filter: drop-shadow(0 0 20px #0ff) drop-shadow(0 0 40px #0ff);
  }
}


.holo-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 60px;
  color: #0ff;
  text-align: center;
  position: relative;
}

.word {
  white-space: nowrap; /* Keeps letters in a word together */
}

.letter,
.author-letter {
  animation: holo-flicker 3s infinite;
}

.author-letter {
  font-style: italic;
  color: gray;
}


@keyframes holo-flicker {
  0%, 100% {
    text-shadow:
      0 0 5px #0ff,
      0 0 10px #0ff,
      0 0 20px #0ff,
      0 0 40px #0ff,
      0 0 80px #0ff;
    opacity: 1;
  }
  50% {
    text-shadow: none;
    opacity: 0.3;
  }
}