body {
  
  background-image: url('background.jpg'); 
  
  background-position: center center; 
  
  background-size: 50%; 
  
  background-color: #ebe8e1;
  
  color: #333333;
  
  box-sizing: border-box;
}
  
.player{
    margin-top: 0vw;
    aspect-ratio: 16 / 9;
    height: clamp(1.5rem, 50vw, 30rem)
  }
  
.standardImage{
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 20vw;
    max-height: 20vw;
}

.hel {
        text-align: center;
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(0.75rem, 2.5vw, 3rem);
        max-width: 60%;
        margin: auto;
        padding-top: 2vw;
        padding-bottom: 10vw;
        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: 1vw;
        color: #333333;
        mix-blend-mode: multiply;
      }      

@media only screen and (min-width: 769px) {
 .banner{
        max-width: clamp(10rem, 65vw, 50rem);
        display: block;
        margin: 0;
        padding:0;
        mix-blend-mode: multiply;
      }
.mobilebanner{
        display: none;
}
}

a {
        color: #333333;
      }


      
      .workType{
        text-align: center;  
        font-family: Helvetica, Arial, sans-serif;
        font-size: clamp(1rem, 2.5vw, 3rem);
        margin-top: 2vw;
        margin-bottom: clamp(1rem, 2vw, 3rem);
        color: #333333;
        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;
        
}


.subtitle {
        font-family: Helvetica, Arial, sans-serif;
        font-size: 1.75vw;
        max-width: 95%;
        margin: 1vw;
        text-align: center;
        color: #333333;
        mix-blend-mode: multiply;
        padding: 0;
        
}

div.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

div.gallery-item {
  margin: 5px;
  border: 1px solid #ccc;
  width: calc(25% - 20px);
}

div.gallery-item:hover {
  border: 1px solid #777;
}

div.gallery-item img {
  width: 100%;
  height: auto;
}

div.gallery-item div.desc {
  padding: 15px;
  text-align: center;
  font-family: Helvetica, Arial, sans-serif;
}

@media only screen and (max-width: 768px) {
  div.gallery-item {
    width: calc(50% - 20px);
  }
   .banner{
        max-width: clamp(60rem, 85vw, 80rem);
        display: none;
        margin-top: 5vw;
        padding:0;
        mix-blend-mode: multiply;
      }
      
    .mobilebanner{
        max-width: 100vw;
        display: block;
        margin-top: 5vw;
        margin-bottom: 5vw;
        padding:0;
        mix-blend-mode: multiply;
      }
      
      .menu{
        text-align: center;  
        font-family: Helvetica, Arial, sans-serif;
        font-size: 3.4vw;
        margin-top: 1vw;
        margin-bottom: 1vw;
        color: #333333;
        mix-blend-mode: multiply;
      }
}

@media only screen and (max-width: 480px) {
  div.gallery-item {
    width: calc(100% - 20px);
  }
}