html{
  background-color:#F2EFE4;
justify-content: center;
margin: 0 auto;
}

.menu{
  display:flex;
  justify-content:flex-end;
  margin-top:40px;
  margin-right:2.5vw;
  gap:2.5vw;
  color:#212121;

}
button{
  border:0px; 
  font-size:1.4vw;
  background-color:#F2EFE4;
  font-family:helvetica neue;
  font-weight:300;
  cursor:pointer;
   color:#212121;
}
.featured{
  text-decoration:underline;
  text-underline-offset:6px;
 
} 
.featured:hover{
   opacity:.8;
    color:#F2EFE4;
    background-color:#2a4180;
}
.about:hover{
 opacity:.8;
    color:#F2EFE4;
    background-color:#2a4180;
}
.contact:hover{
 opacity:.8;
    color:#F2EFE4;
    background-color:#2a4180;
}
hr{
  width:100px;

}
h1{
 text-align:center;
 font-family:Slackside one;
 font-size:92px;
 letter-spacing:2px;
 line-height:7.1vw;
 color: #212121;
  opacity:1;
  margin:10px 10px 10px 10px;

  
}
h2{
  text-align:center;
  font-size: 2vw;
  font-family:helvetica neue;
  font-weight:300;
  color:#212121;
  margin-top:70px;
  opacity:.7;
}


.box1{
    background-color:#F2EFE4;
     border:3px solid #e3d8b6;
    color:#170a07;
    width:90vw;
    margin:0 auto;
    justify-content:center;
    margin-bottom:0px;
   margin-top:6.3vw;
    padding:5px;
  }



.gallery1{
  display:flex;
  gap:4vw;
  justify-content:center;
  margin-top:7vw;
 
}
mark{
  background-color:#EBE1C3;
  padding:6px 6px 6px 6px;
  color:#212121;
 
}


.button1{
   background-image:url("https://d2w9rnfcy7mm78.cloudfront.net/38051328/original_428cae74fab26a5b516eb2116d1c151a.jpg?17522754031?bc=0");
  height:25vw;
  width:25vw;
  background-size:cover; 
  border:0px;
  font-size:0px;
font-family: "halyard-micro", sans-serif;
font-weight: 600;
font-style: italic;
 
}


.button2{
   background-image:url("https://d2w9rnfcy7mm78.cloudfront.net/38109439/original_49a9b6bd22960727b0257ffc8703379f.jpg?1752533846?bc=0");
 height:25vw;
  width:25vw;
  background-size:cover;
   border:0px;
  font-size:0px;
font-family: "halyard-micro", sans-serif;
font-weight: 600;
font-style: italic;
}

.button3{
   background-image:url("https://d2w9rnfcy7mm78.cloudfront.net/38062634/original_b9f13f39870aa4d58e61006a529e98b3.jpg?1752346214?bc=0");
height:25vw;
  width:25vw;
  background-size:cover;
   border:0px;
  font-size:0px;
font-family: "halyard-micro", sans-serif;
font-weight: 600;
font-style: italic;
}

.gallery2{
  display:flex;
  gap:4vw;
  justify-content:center;
  margin-top:4vw;
  margin-bottom:8vw;
  
}

.button4{
   background-image:url("https://d2w9rnfcy7mm78.cloudfront.net/38064095/original_41020e11120c8a6be46205eec3b9d68b.jpg?1752350850?bc=0");
 height:25vw;
  width:25vw;
  background-size:cover;
  background-position:center;
   border:0px;
  font-size:0px;
font-family: "halyard-micro", sans-serif;
font-weight: 600;
font-style: italic;
}

.button5{
   background-image:url("https://d2w9rnfcy7mm78.cloudfront.net/38108927/original_d1a31638c41feaf12c890b1f0ff7094b.jpg?1752531062?bc=0");
 height:25vw;
  width:25vw;
  background-size:cover;
  background-position:bottom;
   border:0px;
  font-size:0px;
font-family: "halyard-micro", sans-serif;
font-weight: 600;
font-style: italic;
}

.button1:hover{
  background-image:none;
  background-color:#EBE1C3;
   font-size:1.7vw;
  
 
}

.button2:hover{
  background-image:none;
  background-color:#EBE1C3;
   font-size:1.7vw;
 
}

.button3:hover{
  background-image:none;
  background-color:#EBE1C3;
   font-size:1.7vw;
 
}

.button4:hover{
  background-image:none;
  background-color:#EBE1C3;
   font-size:1.7vw;
 
}

.button5:hover{
  background-image:none;
  background-color:#EBE1C3;
   font-size:1.7vw;
 
}
.contactbuttons{
    display:flex;
    gap:2vw;
    width:1.5vw;
    justify-content:center;
    margin-top:30px;
    margin:0 auto;
  }
 
  
  
  
  .buttone{
  background-color:#F2EFE4;
 border:0px #F2EFE4;
  border-radius:10px;
    height:4vw;
  width:4vw;
  
}
.buttonig{
  background-color:#F2EFE4;
 border:0px #F2EFE4;
  border-radius:10px;
    height:4vw;
  width:4vw;
  
}

img{
 
  height:3.5vw;
  width:auto;
  margin:0 auto;
 padding:3px 0px 0px 0px;
  opacity: .5;
}
img:hover{
  opacity:1;
}
@media screen and (max-width: 800px) {
   .box1{
      width:87vw;
    }
  
 
 .featured{
    font-size:2.6vw;
   }
 .contact{
    font-size:2.6vw;
   }
 .about{
    font-size:2.6vw;
   }
   
    .menu{
      justify-content:center;
      margin-bottom:13vw;
        margin-top:15vw;
    }
    h1{
      font-size:11vw;
    }
    h2{
      font-weight:400;
      font-size:3.3vw;}
   .button1, .button2, .button3, .button4, .button5 {
    width: 70vw; 
    height: 70vw;
    margin:0 auto;
    margin-bottom:5vw;
    margin-left:13vw;
      margin-right:13vw;
     font-size:3vw;
    color:#212121;/* The width is 100%, when the viewport is 800px or smaller */
  }
  .gallery1, .gallery2{
    display:inline-block;
    justify-content:center;
  }
  
}