:root {
  color-scheme: light dark;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  overflow: hidden;
  transition: background-color 2s ease, color 2s ease;
  background-color: light-dark(#eee, #111);
}

.neon-text {
  font-family: "Jersey 10", serif;
  font-size: 10em;
  font-weight: 900;
  white-space: nowrap;
  color: transparent;
  position: relative;
  transition: text-shadow 1s ease;
}

.neon-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: flicker 2s infinite alternate;
  -webkit-text-stroke: 0.6rem green;
  z-index: -1;
  transition: text-shadow 1s ease;
}

@media (prefers-color-scheme: dark) {
  .neon-text::before {
    text-shadow:
      0 0 5px #0f0,
      0 0 10px #0f0,
      0 0 20px #0f0,
      0 0 30px #0f0,
      0 0 40px #0f0,
      0 0 70px #0f0,
      0 0 100px #0f0,
      0 0 150px #0f0,
      0 0 200px #0f0,
      0 0 250px #0f0;
  }
}

@media (prefers-color-scheme: light) {
  .neon-text::before {
    text-shadow:
      0 0 5px #0a0,
      0 0 10px #0a0,
      0 0 15px #0a0,
      0 0 20px #0a0,
      0 0 30px #0a0,
      0 0 40px #0a0,
      0 0 70px #0a0,
      0 0 100px #0a0,
      0 0 150px #0a0,
      0 0 200px #0a0,
      0 0 250px #0a0;
  }
}

.neon-text span {
  background-image: linear-gradient(to right, #39FF14, #00FF00, #39FF14);
  background-clip: text;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow:
      0 0 4px #0d0,
      0 0 11px #0d0,
      0 0 19px #0d0,
      0 0 40px #0d0,
      0 0 80px #0d0,
      0 0 90px #0d0,
      0 0 100px #0d0,
      0 0 120px #0d0,
      0 0 160px #0d0;
  }
  20%, 22%, 24%, 55% {
    text-shadow: none;
  }
}

@media (max-width: 1280px) {
  .neon-text {
    font-size: 5em;
  }
}

@media (max-width: 768px) {
  .neon-text {
    font-size: 3em;
  }
}

@media (max-width: 480px) {
  .neon-text {
    font-size: 2em;
  }
}

@media (max-width: 380px) {
  .neon-text {
    font-size: 1.5em;
  }
}