html{
  max-width: 100vw;
  overflow-x:hidden;
  padding:0;
  margin:0;
}


    body {
      background-color: LemonChiffon;
      width: 100%;
      padding: 0;
      margin: 0;
    }

.scroll{
  display:grid;
  justify-content: center;
  place-items: center;
  position: relative;
  max-width:100vw;
}

.mural{
  position: relative;
  width:100%;
  max-width: 100vw;
  height: auto; 
  margin-bottom: 15px;
  
}

.frontline{
  padding-top: 15vh;
}

  .hidden img{
    width:85%;
    height:auto;
  
}

@media (max-width:600px){
  .hidden img{
    width:105%;
    height:auto;
  }
  
}


.direct{
  position: relative;
  font-family: "Golos Text", Icons;
  font-size: 35px;
  color:#e01919;
}


.logo-container{
  position: fixed;
  z-index: 999;
  background: lemonchiffon;
  width:100vw;
  height:15vh;
  
  
}
.logo {
  position:relative;
  z-index:99;
  width: auto;
  height: 90%;
  max-width:100%;
  top: 10px;
  left:10px;
}




.takeout{
  width:auto;
  height:50vh;
  margin-top: 20px;
  margin-bottom: 160px;
  
}

.twins{
  width:auto;
  height:130vh;
}

.ducks{
  width:auto;
  height:180vh;
}

.peppers{
  width:auto;
  height: 130vh;
}

.hidden{
  opacity:0;
  filter:blur(10px);
  transition: all 1.5s;
  transform: translateX(-200px);
}



.show{
  opacity:1;
  transform: translateX(0);
  filter:blur(0);
 
}

.container{
  max-width:100vw;
  width: 90%;
  margin: auto;
  padding: 40px 0;
  text-align: center;
  justify-content:center;
}

@media (max-width:600px){
  .logo-container{
    height: 8vh;
    width:100%;
  }
  .logo{
    width: 20vw;
    height:auto;
  }
  
}


.gallery{
 position: relative;
  text-align: center;
 font-family: "Golos Text", Icons;
 font-size: 40px;
 color: #e01919;
letter-spacing: 4px;
line-height: 0.5;
 margin-bottom:100px;
  white-space: nowrap;
  
}

.gallery2{
  text-align: center;
  position: relative;
  font-size: 55px;
  white-space: nowrap;
}

@media(max-width:756px){
  .gallery{
    font-size: 25px;
    margin-bottom:75px;
  }
  
  .gallery2{
    font-size: 40px;
  }
}


  




.photo-gallery{
  display: flex;
  gap:20px;
}

.column{
  display:flex;
  flex-direction: column;
  gap:20px;
  width:33%;
}

.photo img{
  border-radius: 5px;
  object-fit: cover;
  width: 95%;
  height:auto;
  cursor:pointer;
}


/*
@media(max-width:600px){
  .photo-gallery{
    flex-direction:column;
  }
}

*/

.container .popup{
  position: fixed;
  top:0;
  left:0;
  background: rgb(0,0,0,0.8);
  height: 100%;
  width:100%;
  z-index: 1000;
  display:none;
}

.container .popup span{
  position: absolute;
  top:0;
  right:10px;
  font-size:60px;
  font-weight: bolder;
  color:red;
  cursor:pointer;
  z-index:100;
}

.container .popup img{
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  width:auto;
  height:85%;
}

@media (max-width:600px){
  .container .popup img{
  width:75%; 
  height:auto;
  }
}

  /* width */
  
::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: yellow; 
  border-radius: 10px;
  
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #e01919;
  border-radius: 10px;
 
}