/* styles.css */
body {
  background: linear-gradient(to right, #40E0D0, #87CEEB);
  color: #FF00FF;
  font-family: 'Comic Sans MS', cursive, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

.container {
  width: 800px;
  margin: auto;
  border: 5px dashed #00FFFF;
  background-color: #000000;
  padding: 10px;
}
.counter {
  display: inline-block;
  border: 3px inset #00FF00;
  padding: 10px 20px;
  font-size: 24px;
  background-color: #111111;
  color: lime;
  font-variant: small-caps;
  font-style:unset;
  font-family: Times, Arial;
}
.neon-text {
  font-size: 2em;
  color: #FF00FF;
  text-shadow:
    0 0 5px #FF00FF,
    0 0 10px #FF00FF,
    0 0 20px #FF00FF,
    0 0 30px #FF00FF;
}

.blink {
  animation: blinkAnim 1s steps(1, start) infinite;
  font-size: 1.2em;
  margin: 10px 0;
}

@keyframes blinkAnim {
  50% { visibility: hidden; }
}

.sidebar {
  width: 150px;
  float: left;
  background-color: #FFFF00;
  padding: 5px;
  margin-right: 10px;
  border: 3px double #FF0000;
}

.content {
  margin-left: 180px;
  text-align: left;
}

.glitter-list li {
  position: relative;
  padding: 5px 0;
}
.glitter-list li::before {
  content: "✨";
  position: absolute;
  left: -25px;
  animation: sparkle 2s infinite;
}

@keyframes sparkle {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0; transform: scale(0.5); }
}

#rainbow-header {
  font-size: 2em;
  margin: 10px 0;
}
button {
  margin: 5px;
  padding: 12px 24px;
  font-size: 14px;
  background: linear-gradient(45deg, #ffff00, #ff0000);
  color: #ffffff;
  border: none;
  outline: 3px solid #00ffff;
  box-shadow:
    inset 0 0 0 3px #00ffff,
    4px 4px 0 #ff00ff,
    0 0 10px rgba(255, 0, 255, 0.7);
  cursor: pointer;
  text-shadow:
    -1px -1px 0 #000000,
     1px  1px 0 #000000;
  animation: neon-flicker 2s infinite alternate;
  transition: transform 0.1s ease-in-out;
}

button:hover {
  transform: translate(2px, 2px);
  box-shadow:
    inset 0 0 0 3px #00ffff,
    2px 2px 0 #ff00ff,
    0 0 15px rgba(0, 255, 255, 0.8);
}

@keyframes neon-flicker {
  0%   { box-shadow:
            inset 0 0 0 3px #00ffff,
            4px 4px 0 #ff00ff,
            0 0 5px rgba(255, 0, 255, 0.5); }
  50%  { box-shadow:
            inset 0 0 0 3px #00ffff,
            4px 4px 0 #ff00ff,
            0 0 20px rgba(255, 0, 255, 1); }
  100% { box-shadow:
            inset 0 0 0 3px #00ffff,
            4px 4px 0 #ff00ff,
            0 0 5px rgba(255, 0, 255, 0.5); }
}