body {
  background-image: url('background.jpg'); 
  
  background-position: center center; 
  
  background-size: 50%; 
  
  background-color: #ebe8e1;
  
  color: black;
  font-family: Verdana;
   }
   
  .mobile{
    display: none;
    height:100%;
    width:auto;
        margin-top: 4vw;
        padding:0;
        mix-blend-mode: multiply;
  }
  .player{
    margin-top: 10vw;
    aspect-ratio: 4 / 3;
    height: clamp(1.5rem, 50vw, 30rem)
  }
   
   a {
        color: #333333;
      }
      
 .banner{
        display: block;
        margin-top: 6vw;
        padding:0;
        mix-blend-mode: multiply;
      }
.reelcaption{
        display: block;
        width: clamp(1.5rem, 70vw, 50rem);
        max-height: auto;
        margin-top: 2vw;
        padding:0;
      }
      
footer{
        display: block;
        margin: 0vw;
        padding:0;
        mix-blend-mode: multiply;
      }
      
      
.conbanner{
        max-width: 100vw;
        display: block;
        margin: 0;
        padding:0;
        mix-blend-mode: multiply;
      }
      
.logo{
        display: block;
        margin-top: 5vw;
        margin-bottom: 5vw;
        padding:0;
        mix-blend-mode: multiply;
      }      
      
.title {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 2.75vw;
        max-width: 95%;
        margin: 1vw;
        text-align: center;
        color: #333333;
        mix-blend-mode: multiply;
        padding: 0;
        
}

.getReady {
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(1rem, 4vw, 5rem);
        max-width: 100%;
        margin-top: clamp(1rem, 2vw, 3rem);
        margin-bottom: clamp(1rem, 2vw, 3rem);
        margin-left: auto;
        text-align: center;
        color: #333333;
        mix-blend-mode: multiply;
        padding: 0;
}

.hel {
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(0.75rem, 2vw, 3rem);
        max-width: 60%;
        margin: 10% auto;
        color: #333333;
        mix-blend-mode: multiply;
}

.helii {
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(1.3rem, 2vw, 3rem);
        max-width: 60%;
        margin-top: 2vw;
        margin-left: 10% auto;
        color: #333333;
        mix-blend-mode: multiply;
}

.menu{
        text-align: center;  
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(1rem, 2vw, 3rem);
        margin-top: 1vw;
        margin-bottom: 0;
        color: #333333;
        mix-blend-mode: multiply;
      }
      
@media only screen and (max-width: 768px) {
  .banner{
    display: none;
    padding: 0;
    margin-left: 0;
    margin-top: 15vw;
    margin-bottom: 15vw;
    width: 95.5vw;
  height: 50vw;
  object-fit: cover;
  object-position: left;
  }
  .player{
    margin-top: 20vw;
    aspect-ratio: 4 / 3;
    width: 95vw;
    height:71.25vw;
  }
  .menu{
        text-align: center;  
        font-family: Helvetica, Arial, sans-serif;
        font-size: 3.4vw;
        max-width: 100%;
        margin: auto;
        color: #333333;
        mix-blend-mode: multiply;
        padding: 0;
      }
      
  .getReady {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 4.8vw;
        max-width: 100%;
        margin-top: clamp(1rem, 2vw, 3rem);
        margin-bottom: clamp(1rem, 2vw, 3rem);
        margin-left: auto;
        text-align: center;
        color: #333333;
        mix-blend-mode: multiply;
        padding: 0;
}

.hel {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 4vw;
        max-width: 90%;
        margin: 20vw auto;
        color: #333333;
        mix-blend-mode: multiply;
}
.reelcaption{
        display: block;
        width: 80vw;
        max-height: auto;
        margin-top: 2vw;
        padding:0;
      }

.mobile{
    display: block;
    height:100%;
    width:auto;
        margin-top: 4vw;
        padding:0;
        mix-blend-mode: multiply;
  }