@font-face {
    font-family: centra;
    src: url(Fonts/CentraNo1-Light.ttf);
}

@font-face {
    font-family: centra2;
    src: url(Fonts/CentraNo1-Bold.ttf);
}

@font-face {
    font-family: centra3;
    src: url(Fonts/CentraNo1-Thin.ttf);
}

body{
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}


.nav{
    position: fixed;
    width: auto;
    height: auto;
    background-color:#A33895;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 20px; 
    margin: 0;
}

ul, ol {
    list-style-type: none;
}



html, body {
  overflow-x: hidden;
} 

.header{
    display: flex;
    flex-direction: row;
    background-color: #A33895;
    margin: 0;
}


.logohead{
    width: 35%;
    background-color: #A33895;
  
    padding: 2%;

}

.mouth1{
    width: 10%;
    background-color:  #A33895;
 
    padding: 2% 2% 1% 0%;
}

.mouth1 img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
}

.mouth2{
    width: 10%;
    background-color:  #A33895;
   
    padding: 2% 1% 1% 2%;
    transition: transform 0.3s ease;
}

.mouth2 img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
}

.mouth3{
    width: 10%;
    background-color:  #A33895;
    
    padding: 1.5% 2% 1% 2%;
    transition: transform 0.3s ease;
}

.mouth3 img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
}

.mouth4{
    width: 10%;
    background-color:  #A33895;
 
    padding: 2% 2% 1% 2%;
    transition: transform 0.3s ease;
}

.mouth4 img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
}

.profile{
    width: 8%;
    background-color:  #A33895;
  
    padding-top: 3.9%;
    padding-bottom:3%;
    transition: transform 0.3s ease;
}

.profile img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
}

.cart{
    width: 8%;
    background-color:  #A33895;
 
    padding-top: 3.9%;
    padding-bottom:3%;
    transition: transform 0.3s ease;
   
}

.cart img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    max-width: 100%;
}

.mouth1 img:hover{
transform: scale(1.2);

}
.mouth2 img:hover{
    transform: scale(1.2);
}
.mouth3 img:hover{
    transform: scale(1.2);
}
.mouth4 img:hover{
    transform: scale(1.2);
}
.profile img:hover{
    transform: scale(1.2);
}
.cart img:hover{
    transform: scale(1.2);
}


















.top{
    display: flex;
    flex-direction: row;
  
}


.text1{
    margin: 20% 1% 0% 2%;
}

.color{
    margin: 20% 0% 20% -10%;
    background-color: #F8C357;

}


.topoverlap{
    display: flex;
    flex-direction: row;
  
}

.healthy{
    margin: -43% 0% 20% 4%;
    width: 20%;
    z-index: 2;

}

.image{
    margin: -48.5% -50% 20% 5%;
    width: 20%;
    z-index: 1;
}


.button{
    margin: -40% -50% 20% 8%;
}


.button img{
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}

.button img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}













.chips{
    display: flex;   
    background-color: white;
    padding: 20% 0% 0% 0%;
}


.nacho{
    width: 33;
    margin: 0%;
    padding: 0 0 0 10%;
}

.nacho img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}

.salt{
    width: 33;
}

.salt img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}


.churro{
    width: 33;
}

.churro img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}




.nacho img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}


.salt img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}

.churro img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}










.chips2{
    display: flex;   
    background-color: white;
    padding: 10% 0% 20% 0%;
    
}


.barb{
    width: 33;
    margin: 0%;
    padding: 0 0 0 10%;
}

.barb img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}

.bay{
    width: 33;
}

.bay img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}


.teri{
    width: 33;
}

.teri img {
    transition: transform 0.3s ease;
    object-fit: cover;
    overflow: hidden;
    transform-origin: center;
    transition: box-shadow 0.5s ease-in-out, transform 0.3s ease-in-out;
    max-width: 100%;
}




.barb img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}


.bay img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}

.teri img:hover{
    transform: scale(1.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); 
    cursor: grab;
}






.tis{
    font-family: centra2;
    font-weight: bold;
    font-size: 700%;
    text-align: center;
    background-color: #8D1835;
    color: white;
    padding: 100px;
}


.season{
    display: flex;  
    flex-direction: row; 
    background-color: white;
    padding: 0% 0% 0% 0%;
    background-color: #8D1835;
}


.christmas1{
    padding: 10% 0% 0% 10%;
    background-color: #8D1835;
}



.tistext{
    width: 50%;
    font-family: centra3;
    font-weight: thin;
    font-size: 160%;
    text-align: center;
    padding: 10% 14% 0% 10%;
    color: white;
}


.christmas2{
    padding: 5% 0% 100px 700px;
    background-color: #8D1835;
    align-items: right;
    
}



.footer{
    display: flex;  
    flex-direction: row; 
    background-color: white;
    padding: 2% 3% 2% 3%;
    background-color:  #A33895;
 
}

.logo2{
width: 40%;
}

.section1{
    width: 20%;
}

.section2{
    width: 20%;
}

.section1{
    width: 20%;
}

h1{
   font-family: centra2;
   font-size: 30px;
   text-decoration: overline;
   transition: color 0.3s ease, text-decoration 0.3s ease;
}

h2{
    font-family: centra;
   font-size: 20px;
   transition: color 0.3s ease, text-decoration 0.3s ease;

}



.hover-text:hover {
    color: #F8C357; 
    text-decoration: underline;
}












@media (max-width: 800px) {
    .header {
        flex-direction: row; 
        justify-content: center;
        width: 40%;     
    }

    .header img {
        width: 60px; 
        height: 60px; 
    }

    .season{
        flex-direction: column; 
        justify-content: center;
        width: 40%;

    }

    .christmas1{
        height: 90%;
        width: 110%;
    }



    .secondphoto{
        width: 100%;
        padding: 0 0 0 40%;
    }

    .christmas2{
        display: none;
    }

    .tistext{
        font-size: 25px;
        text-align: center;
        background-color: #8D1835;
    }
    
    .logo2{
        width: 200px;
        height: 100px;
    }
    h1{
        font-size: 20px;
    }

    h2{
        font-size: 10px;
    }
}



















@media (max-width: 1000px) {
   
    .mouth1,
    .mouth2,
    .mouth3,
    .mouth4,
    .healthy{
        display: none;
    }

    .logohead{
        width: 20%;
        height: 20%;
        margin: -10px;
        padding: 5% 35% 5% 35%;
    }

    .top{
        flex-direction: column;
        width: 80%;
        padding: 10%;
    }

    .color{
        width: 400px;
        height: 400px;
        padding: 10% 10% 10% 40%;

    }


    .topoverlap{
        flex-direction: column;
        width: 110%; 
        padding: auto;

    }

    .profile
    .cart {
        width: 10%;
        padding: 5% 35% 5% 35%;;
   

    }

    .button{
        width: -1%;
        z-index: 1;
    }

    .season{
        flex-direction: column; 
        justify-content: center;


    }


    .christmas1{
        height: 90%;
        width: 100%;
        max-width: 100%;
        padding: 0px;

    }
    
    .christmas2{
       display: none;
    
    }

    .tistext{
        font-size: 25px;
        text-align: center;
        padding-left: 200px;
        padding-bottom: 100px;
    }
    .logo2{
        width: 200px;
        height: 100px;
    }
    h1{
        font-size: 20px;
    }

    h2{
        font-size: 10px;
    }
}