.neon {
  font-weight: bold;
  margin-bottom: 15px;
  font-family: 'Crevefinale', sans-serif;
  text-transform: uppercase;
  color: #ba273f;
  animation: flicker-slow 1s infinite;
  text-align: center;
}



.neon-blue {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #4d8dff,
    0 0 30px #4d8dff,
    0 0 40px #4d8dff,
    0 0 55px #4d8dff,
    0 0 75px #4d8dff;
}



.neon-green {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #4dff4d,
    0 0 30px #4dff4d,
    0 0 40px #4dff4d,
    0 0 55px #4dff4d,
    0 0 75px #4dff4d;
}

.neon-header {
  text-align: center;
  background-color: #000;
}



.neon-menu {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(6px);
  padding: 0.5rem;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: var(--z-modal, 1000);
}



.neon-option {
  background: transparent;
  border: 2px solid currentColor;
  padding: 0.4rem 0.6rem;
  font-size: 0.9rem;
  color: #fff;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}



.neon-option:hover {
  transform: scale(1.1);
  opacity: 0.9;
}


.neon-option.neon-blue {
  color: #4d8dff;
}


.neon-option.neon-green {
  color: #4dff4d;
}



.neon-option.neon-pink {
  color: #ff4dff;
}


.neon-option.neon-yellow {
  color: #ffff4d;
}



.neon-pink {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff4dff,
    0 0 30px #ff4dff,
    0 0 40px #ff4dff,
    0 0 55px #ff4dff,
    0 0 75px #ff4dff;
}





.neon-title {
  font-family: 'Crevefinale', sans-serif;
  text-transform: uppercase;
  color: #ff4d4d;
  animation: flicker 1.5s infinite;
}



.neon-yellow {
  color: #fff;
  text-shadow:
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ffff4d,
    0 0 30px #ffff4d,
    0 0 40px #ffff4d,
    0 0 55px #ffff4d,
    0 0 75px #ffff4d;
}


.petit-neon {
  font-family: 'Crevefinale', sans-serif;
  text-transform: uppercase;
  color: #ba273f;
  animation: flicker 1s infinite;
}


@keyframes flicker {

  0%,
  19%,
  21%,
  23%,
  25%,
  54%,
  56%,
  100% {
    text-shadow: 0 0 3px #ba273f, 0 0 8px #ba273f, 0 0 15px #8e1c2d, 0 0 30px #8e1c2d;
    opacity: 1;
  }

  20%,
  24%,
  55% {
    text-shadow: 0 0 1px #e03b59, 0 0 2px #e03b59;
    opacity: 0.8;
  }
}


@keyframes flicker-fast {

  0%,
  18%,
  22%,
  50%,
  100% {
    text-shadow: 0 0 3px #e03b59, 0 0 8px #e03b59, 0 0 15px #ba273f, 0 0 30px #ba273f;
    opacity: 1;
  }

  19%,
  21%,
  51% {
    text-shadow: 0 0 1px #e03b59, 0 0 2px #e03b59;
    opacity: 0.6;
  }
}


@keyframes flicker-slow {

  0%,
  49%,
  100% {
    text-shadow: 0 0 4px #e03b59, 0 0 10px #e03b59, 0 0 18px #ba273f, 0 0 35px #ba273f;
    opacity: 1;
  }

  50%,
  75% {
    text-shadow: 0 0 1px #e03b59, 0 0 3px #e03b59;
    opacity: 0.7;
  }
}


@keyframes flicker-random {

  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    text-shadow: 0 0 3px #e03b59, 0 0 8px #e03b59, 0 0 15px #ba273f, 0 0 30px #ba273f;
    opacity: 1;
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    text-shadow: 0 0 1px #e03b59, 0 0 2px #e03b59;
    opacity: 0.5;
  }

}