* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.html, body {
    height: 100%;
    width: 100%;
    align-items: center;
    margin-left: 0;
}

/* Marquee container */
.marquee {
    width: 100%;
    overflow: hidden;
    background-color: #fff200;
    color: #000000;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.2; /* remove extra spacing */
    padding: 0; /* ensure no top/bottom padding */
    font-size: 1,5rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  }

  .link {
    width: 100%;
    overflow: hidden;
    background-color: #fff200;
    color: #000000;
    box-sizing: border-box;
    white-space: nowrap;
    line-height: 1.2; /* remove extra spacing */
    padding: 0; /* ensure no top/bottom padding */
    font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
  }
  
  /* Inner scrolling wrapper */
  .marquee__inner {
    display: inline-block;
    padding-left: 100%; /* start off-screen */
    animation: marquee 12s linear infinite;
  }
  
  /* Each repeated text block */
  .marquee__inner span {
    display: inline-block;
    vertical-align: top; /* removes extra bottom spacing */
    padding-right: 4rem; /* space between repeats */
  }
  
  /* Keyframes for smooth scrolling */
  @keyframes marquee {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }
  


/* Desktop / default */
.video-container {
    position: static;
    width: 90vh;
    height: auto;
    background-color: black;
    overflow: hidden;
    margin: 5%;
    margin-top: 5%;
}

.video-player {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Mobile-specific styles */
@media only screen and (max-width: 768px) {
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        background-color: black;
    }


    .video-container {
        width: 90%;          /* 90% of screen width */
        height: 80%;        /* 90% of viewport height */
        margin: auto;        /* center both vertically & horizontally */
        overflow: hidden;
        padding-top: 1rem;
    }

    .video-player {
        width: 100%;
        height: 100%;
        object-fit: cover;   /* fill container while keeping aspect ratio */
        border-radius: 10px; /* optional, same as desktop */
        display: block;
    }

}