html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

@keyframes scroll-left-half {
    0% { transform: translateX(30%); }
    100% { transform: translateX(-100%); }
}

@keyframes blink {
    /* RED → white fade */
    0%   { color:#ff2a2a; text-shadow:0 0 12px #720000; }
    12.5%{ color:#ffffff; text-shadow:0 0 4px  #666;    }

    /* GREEN → white fade */
    25%  { color:#1cdd1c; text-shadow:0 0 12px #006800; }
    37.5%{ color:#ffffff; text-shadow:0 0 4px  #666;    }

    /* BLUE → white fade */
    50%  { color:#1a9bff; text-shadow:0 0 12px #004b8a; }
    62.5%{ color:#ffffff; text-shadow:0 0 4px  #666;    }

    /* YELLOW → white fade */
    75%  { color:#ffcf26; text-shadow:0 0 12px #b38600; }
    87.5%{ color:#ffffff; text-shadow:0 0 4px  #666;    }

    /* loop back to RED smoothly */
    100% { color:#ff2a2a; text-shadow:0 0 12px #720000; }
}

@keyframes rgbBlink {
    /* RED */
    0%   { color:#B70003; text-shadow:0 0 5px #480201; }

    /* WHITE glow after RED */
    12.5% { color:#ffffff; text-shadow:0 0 5px #999; }

    /* GREEN */
    25%  { color:#3CB400; text-shadow:0 0 5px #034C01; }

    /* WHITE glow after GREEN */
    37.5% { color:#ffffff; text-shadow:0 0 5px #999; }

    /* BLUE */
    50%  { color:#006ED2; text-shadow:0 0 5px #011450; }

    /* WHITE glow after BLUE */
    62.5% { color:#ffffff; text-shadow:0 0 5px #999; }

    /* YELLOW */
    75%  { color:#B6B20A; text-shadow:0 0 5px #4C4B05; }

    /* WHITE glow after YELLOW */
    87.5% { color:#ffffff; text-shadow:0 0 5px #999; }

    /* loop back to RED */
    100% { color:#B70003; text-shadow:0 0 5px #480201; }
}

@keyframes blink-table {
    0%, 100% {
        color: #040667; /* Bright green */
        text-shadow: 0 0 5px #1B5CEA; /* Dark green glow */
    }

    50% {
        color: #7ED9FF; /* White */
        text-shadow: 0 0 3px #DEFAFF; /* Soft gray glow */
    }
}


.marquee {
    animation: scroll 25s linear infinite;
}

 /* Responsive Breakpoints */
@media (max-width: 1024px) {
    .now-serving-title { font-size: 6vw; }
    th, td { font-size: 3vw; }
    .footer, .datetime-container { font-size: 2.5vw; }
}

@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }

    .queue-section, .video-section {
        flex: 1 1 100%;
    }

    .now-serving-title { font-size: 7vw; }
    th, td { font-size: 4vw; }
    .footer, .datetime-container { font-size: 3vw; }
    .marquee img { height: 4vw; }

  .table td,
  .table th {
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
    white-space: normal;
  }

  .table-sm td,
  .table-sm th {
    font-size: 0.8rem;
    padding: 0.5rem 0.4rem;
  }
}

@media (max-width: 480px) {
    .now-serving-title { font-size: 8vw; }
    th, td { font-size: 5vw; }
    .footer, .datetime-container { font-size: 4vw; }
}