.underlined-text {
    text-decoration: underline;
    }
    .scrolling-text {
      width: 100%;
      height: 50px;
      overflow: hidden;
      position: relative;
      background-color: #000;
      color: #fff;
    }
    .scrolling-text-content {
      display: inline-block;
      white-space: nowrap;
      position: absolute;
      animation: scrolling-text 300s linear infinite;
    }
    @keyframes scrolling-text {
      0% { transform: translateX(3%); }
      100% { transform: translateX(-100%); }
    }
    .title {
  color: #ffffff;
  text-shadow: 
    0 0 5px #00fff3, 
    0 0 10px #00fff6, 
    0 0 15px #00fff9, 
    0 0 20px #00ffe2, 
    2px 2px 3px #ff6600;
  animation: blink-animation 2s steps(5, start) infinite;
}

@keyframes blink-animation {
  0% {opacity: 1;}
  50% {opacity: .2;}
  100% {opacity: 1;}
}

/* Put near the top of your <style> (can replace the existing colorfade + .subtitle) */
:root {
  --sub-1: #FF0000;   /* Pure Red */
  --sub-2: #FFFF00;   /* Pure Yellow */
  --sub-3: #0000FF;   /* Pure Blue */

  /* Optional: variables to theme the glowing .title as well */
  --glow-1: #00fff3;
  --glow-2: #00fff6;
  --glow-3: #00fff9;
  --glow-4: #00ffe2;
  --shadow-accent: #ff6600;
}

@keyframes colorfade {
  0%, 32%   { color: var(--sub-1); }
  33%, 65%  { color: var(--sub-2); }
  66%, 100% { color: var(--sub-3); }
}

.subtitle {
  animation-name: colorfade;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

/* Have .title read from variables too (optional but nice) */
.title {
  color: #ffffff;
  text-shadow:
    0 0 5px var(--glow-1),
    0 0 10px var(--glow-2),
    0 0 15px var(--glow-3),
    0 0 20px var(--glow-4),
    2px 2px 3px var(--shadow-accent);
  animation: blink-animation 2s steps(5, start) infinite;
}
  
.blinking-text {
    animation: blink-text 1s linear infinite;
  }

  @keyframes blink-text {
    0%, 100% {
      color: #ffffff;  /* pure white */
    }
    50% {
      color: #808080;  /* grey */
    }
  }

      .article-list {
      max-width: 750px;
      margin: 2em auto;
      padding: 1em;
      background-color: #f9f9f9;
      border-left: 4px solid #005500;
    }

    .article-list h2 {
      font-size: 1.5em;
      margin-bottom: 0.2em;
    }

    .article-list p {
      margin-top: 0.3em;
      color: #444;
    }

    .article-list a {
      color: #005500;
      text-decoration: none;
      font-weight: bold;
    }

    .article-list a:hover {
      text-decoration: underline;
    }

    .date {
      font-size: 0.9em;
      color: #777;
    }

    .nbn-logo {
      height: 40px;
      margin-left: 10px;
      vertical-align: middle;
    }

.scrolling-text:hover .scrolling-text-content,
.scrolling-text-content:focus {
  animation-play-state: paused;
}
.scrolling-text-content:focus {
  outline: 2px solid #fff;
  outline-offset: -2px;
}
@media (prefers-reduced-motion: reduce) {
  .scrolling-text-content {
    animation: none !important;
    position: relative;
    transform: none !important;
  }
  .scrolling-text {
    height: auto;
    min-height: 50px;
    overflow-x: auto;
  }
}