html,
body {
  margin: 0;
  min-height: 100vh;
  background-color: #000000;
}

.body-alternative {
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: flex-start; /* center; */
  height: 100vh;
  margin: 0;
}

.text-wrapper {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.neon-text {
  font-size: 15vw;
  font-family: 'Arial Black', sans-serif;
  text-transform: uppercase;
  /* Base text color (bright red) */
  color: #ff3333;
  /* Glow effect created by layering multiple text shadows */
  text-shadow:
    0 0  2vw #ff0000; /* Inner, intense core */
    0 0  6vw #ff0000; /* Medium glow */
	0 0 12vw #ff0000; /* Outer, wide glow */
	0 0 18px #990000; /* Dark red afterglow for depth */
}

.shadow-text {
  font-size: 40px; /* 20vw */
  font-family: sans-serif;
  font-weight: bold;
  color: #333;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.moving-text {
  /* Pushes the text down into the top third of the viewport */
  /* margin-top: 30vh; */
  
  display: inline-block;
  animation: wiggleText 1.5s ease-in-out infinite;
}

.glow-wiggle-text {
  display: inline-block;
  animation: glowWiggle 3s ease-in-out infinite alternate;
}

@keyframes wiggleText {
    0% {transform: translateX(0) rotate(0deg);}
   25% {transform: translateX(-25px) rotate(-4deg);}
   50% {transform: translateX(0) rotate(3deg);}
   75% {transform: translateX(25px) rotate(4deg);}
  100% {transform: translateX(0) rotate(0deg);}
}

@keyframes glowWiggle {
  0% {
    text-shadow: -0.50vw -0.25vw 0.75vw #FF6666,
                  0.25vw  0.50vw 0.94vw #CC0000,
                  0       0      1.88vw #FF222266;
    transform: translateX(-0.75vw) rotate(-2deg);
  }
  50% {
    text-shadow:  0   0   1.25vw #FF4444,
                  0   0   2.50vw #FF000088;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    text-shadow:  0.50vw  0.25vw 0.75vw #CC0000,
                 -0.25vw -0.50vw 0.94vw #FF6666,
                  0       0      2.50vw #FF444488;
    transform: translateX(0.75vw) rotate(2deg);
  }
}

@keyframes glowWiggle_px {
  0% {
    text-shadow: -8px -4px 12px #FF6666,
                  4px  8px 15px #CC0000,
                  0    0   30px #FF222266;
    transform: translateX(-12px) rotate(-2deg);
  }
  50% {
    text-shadow:  0   0   20px #FF4444,
                  0   0   40px #FF000088;
    transform: translateX(0px) rotate(0deg);
  }
  100% {
    text-shadow:  8px  4px 12px #CC0000,
                 -4px -8px 15px #FF6666,
                  0    0   40px #FF444488;
    transform: translateX(12px) rotate(2deg);
  }
}

@keyframes moveAroundCenter {
  from {transform: translateX(-40px);}
  to   {transform: translateX(40px);}
}
