@font-face{
font-family: "CentraNo2-Medium"; 
src: url("fonts/CentraNo2-Medium.ttf")}

 @font-face{
font-family: "CentraNo2-Thin";   
src:url("fonts/CentraNo2-Thin.ttf");
  font-weight: normal;
  font-style: normal;
}

.navbarflex-container{
  background-image: url(images/SNACK_Q4-photo_02.jpg);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  height: 80vw;
  display: flex;
}
.navbar{
 
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px; 
    padding-top: 50px;
    background-color: white;
    
}
.navbar img{
  align-items: left;
  height: 15vw;
}


.item {
    display: inline;
    color: black;
    font-family: "CentraNo2-Medium";
    font-size: 40px;
    text-transform: uppercase;
    text-decoration: none;
}
.li a{
  text-decoration: none;
  color:black;

}

.wrapper1{
 display:flex;
  align-items: center;
  padding-top: 0%;
  padding-left: 20%;
  text-align:left;
  padding-right: 43%;
}
.wrapper2{
  display: flex;
height: 50vw;
width:30vw;

}
.wrapper3{
  display: flex;
  padding-left: 20%;
  text-align: left;
}

.wrapper3 img{
  display: flex;
  height: 35vw;
  width:35vw;
  padding-left: 15%;
  padding-right: 10%;
}

.wrapper4{
  display: flex;
  align-items:center;
  padding-left:43%;

}

.mouthrow1{
   display:flex;
  height: 20vw;
  width:80vw;
  padding-left:7%;
  padding-right:5%;

}
.mouthrow2{
display:flex;
  height: 20vw;
  width:80vw;
  padding-left:6%;
  padding-right:5%;
}
.flavorcontainer1{
  display:flex;
    gap:100px;
    margin:10px;
    flex-direction:row;
    padding-left:13%;
    padding-right:13%;
   padding-top: 0%;
   text-align: center;
  padding-bottom:2%;
}
.flavorcontainer2{
  display:flex;
    gap:110px;
    margin:10px;
    flex-direction:row;
    padding-left:19%;
    padding-right:15%;
   padding-top: 0%;
   text-align: center;
  padding-bottom:2%;
}

.footer{
  background-color: black ;
  color:white;
  font-size:normal;
  display: flex;
  flex-direction: row;
  padding:1%;
flex: 2.5;

}

.socialslogos{  
  display: flex;
  flex-direction: row;
flex: 1;
height: max(50px, 3vw);

}
h1{
  font-family: "CentraNo2-Medium";
  font-size: 80px;
}
h2{
  font-family: "CentraNo2-Thin";
  font-size: 35px;
}

h3{
  font-family: "CentraNo2-Medium";
  font-size: 40px;
}