body {
  
  background-image: url('background.jpg'); 
  
  background-position: center center; 
  
  background-size: 50%; 
  
  background-color: #fffd96;
  
  background-blend-mode: multiply;
  
  color: black;
  font-family: Verdana;
   }
   
   
  .player{
    aspect-ratio: 4 / 3;
    height: clamp(1.5rem, 50vw, 30rem)
  }
   
   a {
        color: #333333;
      }
 @media only screen and (min-width: 769px) {
 .conbanner{
        display: block;
        width: 100vw;
        height: auto;
        margin-top: 0vw;
        mix-blend-mode: multiply;
          }
          
  .menu{
        text-align: center;  
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(1rem, 2vw, 3rem);
        margin-left: 1vw;
        margin-top: clamp(1rem, 1.75vw, 2rem);
        margin-bottom: clamp(1rem, 1vw, 2rem);
        color: #333333;
        mix-blend-mode: multiply;
      }
      
      .banner{
        display: none;
      }
}
      
@media only screen and (max-width: 768px) {
 .banner{
        display: block;
        margin-top: 7vw;
        margin-bottom: 15vw;
        padding:0;
        mix-blend-mode: multiply;
      }
      
.menu{
        text-align: center;  
        font-family: Helvetica, Arial, sans-serif;
        font-size: 3.4vw;
        margin-left: 1vw;
        margin-top: clamp(1rem, 1.75vw, 2rem);
        margin-bottom: clamp(1rem, 1vw, 2rem);
        color: #333333;
        mix-blend-mode: multiply;
      }

      
.conbanner{
        display: none;
        margin-top: 3vw;
        margin-bottom: 3vw;
        padding:0;
        mix-blend-mode: multiply;
      }
}
      
.logo{
        display: block;
        filter: saturate(0);
        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, 10vw, 8rem);
        margin-bottom: clamp(2rem, 5vw, 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;
}


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