html {
    scroll-behavior: smooth;
  }


  /* Tailwind extended colors */
  .from-darkblue {
    --tw-gradient-from: #003366;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(0 51 102 / 0));
  }
  .to-lightblue {
    --tw-gradient-to: #66b2ff;
  }
  .text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }

  .stars {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
    background: transparent;
  }
  
  .stars::before, .stars::after {
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: white;
    border-radius: 50%;
    box-shadow:
      5vw 10vh white,
      15vw 20vh white,
      25vw 35vh white,
      35vw 40vh white,
      45vw 25vh white,
      55vw 30vh white,
      65vw 15vh white,
      75vw 50vh white,
      85vw 60vh white,
      95vw 45vh white,
      10vw 70vh white,
      20vw 85vh white,
      30vw 75vh white,
      40vw 90vh white,
      50vw 80vh white,
      60vw 95vh white,
      70vw 85vh white,
      80vw 100vh white,
      90vw 90vh white,
      100vw 110vh white;
    animation: fallStars 15s linear infinite;
  }
  
  .stars::after {
    width: 4px;
    height: 4px;
    animation-delay: 7.5s;
    box-shadow:
      8vw 15vh white,
      18vw 25vh white,
      28vw 40vh white,
      38vw 45vh white,
      48vw 30vh white,
      58vw 35vh white,
      68vw 20vh white,
      78vw 55vh white,
      88vw 65vh white,
      98vw 50vh white,
      13vw 75vh white,
      23vw 90vh white,
      33vw 80vh white,
      43vw 95vh white,
      53vw 85vh white,
      63vw 100vh white,
      73vw 90vh white,
      83vw 105vh white,
      93vw 95vh white,
      103vw 115vh white;
  }
  
  @keyframes fallStars {
    0% {
      transform: translateY(-15vh);
      opacity: 1;
    }
    100% {
      transform: translateY(115vh);
      opacity: 0;
    }
  }
  .modal {
    /* Hidden by default, centered flex container */
    display: none;
    /* flex & centering handled by tailwind flex classes */
  }
  
  .modal.show {
    display: flex !important;
  }
  
  .modal-content {
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.7);
    border: 2px solid orange;
  }
  :root {
    --color-text: navy;
    --color-bg: papayawhip;
    --color-bg-accent: #ecdcc0;
    --size: clamp(10rem, 1rem + 40vmin, 30rem);
    --gap: calc(var(--size) / 14);
    --duration: 60s;
    --scroll-start: 0;
    --scroll-end: calc(-100% - var(--gap));
  }
  
  @media (prefers-color-scheme: dark) {
    :root {
      --color-text: papayawhip;
      --color-bg: navy;
      --color-bg-accent: #2626a0;
    }
  }
  
  * {
    box-sizing: border-box;
  }
  
 
  
  .marquee-wrapper {
    overflow: hidden;
    background: linear-gradient(to right, #111, #222);
    color: gold;
    padding: 12px 0;
    position: relative;
    font-family: 'Segoe UI', sans-serif;
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
  }
  
  .marquee {
    display: inline-block;
    white-space: nowrap;
    animation: scroll-left 25s linear infinite;
    font-size: 1.1rem;
    font-weight: 600;
    padding-left: 100%;
    transition: all 0.3s ease-in-out;
  }
  
  .marquee-wrapper:hover .marquee {
    animation-play-state: paused;
    cursor: pointer;
  }
  
  @keyframes scroll-left {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  
  .marquee span {
    display: inline-block;
    margin-right: 80px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }