.title {
text-align-last: center;
font-size: 28px;
      color: black;
      text-shadow: 0 0 5px blue, 0 0 10px purple;
}
.title {
    animation: colorChange 2s infinite alternate;
  }

  @keyframes colorChange {
    0%   { color: red; }
    25%  { color: orange; }
    50%  { color: yellow; }
    75%  { color: green; }
    100% { color: blue; }
  }
body {
background-image: url(https://i.imgur.com/gwE0GhL.jpeg);
background-repeat: repeat-y;
background-position-x: center;
background-size: cover;
}

.construction-box {
      border: 3px dashed;
      padding: 30px;
      margin: auto;
      width: 80%;
      max-width: 600px;
      background-color: rgba(0, 0, 0, 0.8);
      animation: glowBox 2s infinite alternate;
    }

    .construction-title {
      font-size: 36px;
      color: mediumpurple;
      text-shadow: 0 0 10px pink;
      animation: glowText 1.5s infinite alternate;
    }

    .construction-message {
      font-size: 20px;
      margin-top: 10px;
      animation: colorCycle 5s infinite alternate;
    color: crimson
    }

    .blink {
      animation: blink 1s steps(2, start) infinite;
    }

    @keyframes blink {
      to { visibility: hidden; }
    }

    @keyframes colorCycle {
      0%   { color: red; }
      25%  { color: orange; }
      50%  { color: yellow; }
      75%  { color: lime; }
      100% { color: cyan; }
    }

    @keyframes glowText {
      from { text-shadow: 0 0 5px #ff66ff; }
      to   { text-shadow: 0 0 20px #ff66ff; }
    }

    @keyframes glowBox {
      from { box-shadow: 0 0 10px #00ffcc; }
      to   { box-shadow: 0 0 25px #00ffcc; }
    }

/* CD container */
.bouncing-cd {
  margin: 40px auto;
  width: 100px;
  height: 100px;
  animation: bounce 2s infinite ease-in-out;
  cursor: pointer;
}

/* CD image */
.cd-icon {
  width: 100px;
  height: auto;
  filter: drop-shadow(0 0 10px #ff66ff);
  animation: spin 5s linear infinite;
  transition: filter 0.3s ease;
}

/* Glow brighter when playing */
.cd-icon.playing {
  filter: drop-shadow(0 0 20px #ff66ff) drop-shadow(0 0 40px #ff66ff);
}

/* Bouncing animation */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-30px);
  }
}

/* Optional: spin */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.devlogs {
padding: 30px;
  border: 3px dashed #00ffcc;
  background-color: rgba(0, 0, 0, 0.93);   /* Almost solid black */
  box-shadow: 0 0 15px #00ffcc;
  border-radius: 10px;
  text-align: center;
color: rgba(0, 255, 0, 1);       /* Bright pure green */
text-shadow: 0 0 6px rgba(0, 255, 0, 0.7), 0 0 12px rgba(0, 255, 0, 0.5);
}

.devlog-recent {
color: rgba(0, 255, 0, 0.6);     /* Slightly transparent green */
}