/* Logo */
    .logo {
      color: #fff;
      font-size: 20px;
      font-weight: 600;
    }

    /* Marquee */
    .marquee {
      width: auto;
      overflow: hidden;
      white-space: nowrap;
    }

    /* LED text */
    .clock {
      display: inline-block;
      padding-left: 100%;
      font-family: "Courier New", monospace;
      font-size: 22px;
      animation: scroll 12s linear infinite;
    }

    /* Pause on hover */
    .marquee:hover .clock {
      animation-play-state: paused;
    }

    /* Green (day) */
    .clock.day {
      color: #22ff22;
      text-shadow:
        0 0 3px #22ff22,
        0 0 10px #00ff00;
    }

    /* Amber (night) */
    .clock.night {
      color: #ffb300;
      text-shadow:
        0 0 3px #ffb300,
        0 0 10px #ff9800;
    }

    /* Scroll animation */
    @keyframes scroll {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(-100%);
      }
    }

    /* Mobile */
    @media (max-width: 600px) {
      .logo {
        font-size: 16px;
      }

      .marquee {
        width: 220px;
      }

      .clock {
        font-size: 16px;
      }
    }