@font-face {
    font-family:"bolder";
    src: url(fonts/Bolder\ Hinger.ttf);
}
@font-face {
    font-family:"merch" ;
    src: url(fonts/PCMerchis-Expanded.ttf);
}
@font-face {
    font-family:"relaxe" ;
    src: url(fonts/Relaxe.ttf);
}


.background{ 
    background-color: #e1e3de;
    margin: 0;
    padding: 10px 10px 10px 10px;
}

.navbar{
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 5px 5px 75px;
}

.nav_buttons{
    display: flex;
    list-style: none;
    gap: 15px;
}
.about_btn{
    border: 5px solid #3b3b3e;
    border-radius: 8px;
    padding: 10px 20px;
    background-color: #f174ac;
    color: #3b3b3e;
    font-family: "bolder";
    font-size: 47px;
    text-align: center;
    
}

.ingredients_btn{
    border: 5px solid #3b3b3e;
    border-radius: 8px;
    padding: 10px 20px;
    background-color: #f174ac;
    color: #3b3b3e;
    font-family: "bolder";
    font-size: 47px;
    text-align: center;
}

.flavors_btn{
    border: 5px solid #3b3b3e;
    border-radius: 8px;
    padding: 10px 20px;
    background-color: #f174ac;
    color: #3b3b3e;
    font-family: "bolder";
    font-size: 47px;
    text-align: center;
}

.contact_btn{
    border: 5px solid #3b3b3e;
    border-radius: 8px;
    padding: 10px 20px;
    background-color: #f174ac;
    color: #3b3b3e;
    font-family: "bolder";
    font-size: 47px;
    text-align: center;
}


.hero{
    background-image: url(images/SNACK_CRISP_Unseasoned9.png), url(images/SNACK_CRISP_Unseasoned5.png);
}

.teeth{
    background-color: #f2672f;
    padding: 50px 50px 50px 50px;
    border: 10px solid #3b3b3e;
    border-radius: 10px;
}

.mouths{
    display: flex;
    justify-content:space-between;   
}

.mouths img{
    width:33%;
    height: auto;
}

.hero2{
   background-image: url(images/SNACK_CRISP_Unseasoned9.png), url(images/SNACK_CRISP_Unseasoned5.png);  
}

.allergens{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.allergens img{
    height:auto;
    padding: 10px 10px 10px 10px;
}

.scroll-container{ 
    overflow: hidden;
    width: 100%;
    background-color:#f2672f;
    border: 5px solid #3b3b3e;
    border-radius: 8px;
}

.scroll-track{
    display: flex;
    width: max-content;
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
    0% {transform: translateX(0);}
    100% {transform: translateX(-50%);}
}

.bottom-container{
    background-color:#3b3b3e;
    display: flex;
    justify-content: space-between;
    border: 5px solid #3b3b3e;
    border-radius: 8px;
    
}

.info{
    margin-top: 0;
    font-family: "relaxe"; 
    color:#f174ac;
    font-size:42px;
}

.legal{
    margin-top: 0;
    font-family: "relaxe";
    color:#f174ac;
    font-size:42px;
}