#disco {
  display: none;
}

#disco-container {
  display: none;
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 9998;
  width: 300px;
  height: 300px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.neon #disco-container, .neon #disco {
  display: block;
}


.neon main h1 {
  color: #fff;
  /* Apply the animation to cycle through the neon glow colors */
          animation: neonGlow 4s infinite linear;
}

.neon main button {
  border: 2px solid #0ff; /* starting border color */
  padding: 10px 20px;
  font-size: 1em;
  cursor: pointer;
  transition: transform 0.2s;
          animation: neonGlowBorder 4s infinite linear;
}

.neon main button:hover {
  transform: scale(1.05);
}


@keyframes neonGlow {
  0% {
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  }
  33% {
    text-shadow: 0 0 5px #f0f, 0 0 10px #f0f, 0 0 20px #f0f;
  }
  66% {
    text-shadow: 0 0 5px #ff0, 0 0 10px #ff0, 0 0 20px #ff0;
  }
  100% {
    text-shadow: 0 0 5px #0f0, 0 0 10px #0f0, 0 0 20px #0f0;
  }
}

@keyframes neonGlowBorder {
  0% {
    border-color: #0ff;
    box-shadow: 0 0 10px #0ff, 0 0 20px #0ff, 0 0 30px #0ff;
  }
  33% {
    border-color: #f0f;
    box-shadow: 0 0 10px #f0f, 0 0 20px #f0f, 0 0 30px #f0f;
  }
  66% {
    border-color: #ff0;
    box-shadow: 0 0 10px #ff0, 0 0 20px #ff0, 0 0 30px #ff0;
  }
  100% {
    border-color: #0f0;
    box-shadow: 0 0 10px #0f0, 0 0 20px #0f0, 0 0 30px #0f0;
  }
}