*{
    box-sizing:border-box;
    margin:0 auto;
}
:root{
    --primaryColor:#f4ebdc;
    --secondaryColor:#2EC4B6;
    --ternaryColor:#E87461;
    --firstGray:#808080;
    --secondGray:#5a5a5a;
    --thirdGray:#999999;
    --fourthGray:#e6e6e6;
    --fifthGray:#cccccc;
    --sixthGray:#484848;
}
/*header*/
header{
    background-color:var(--secondaryColor);
}
#titleh1{
    font-family:"Alfa Slab One", "sans-serif";
    font-size:clamp(47.78px,6.1vw,61.04px);
    text-align:center;
    
}

/*main*/
#section-divFoodline{
    width:100%;
}
#div-foodline{
    width:100%;
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    margin-bottom:90px;
}
#titleh2{
    font-family:"Bitter","sans-serif";
    font-size:clamp(39.81px,4.8vw,48.83px);
    margin-bottom:90px;
}
#section-h1{
    display:flex;
    flex-direction:column;
    padding-bottom:30px;
    padding-top:30px;
}
#div-foodline{
    width:100%;
}
.div-h2-grid{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr 1fr 1fr;
    grid-template-rows:1fr 1fr 1fr 1fr;
    grid-column-gap:40px;
    grid-row-gap:40px;
    width:80%;
}
main{
    background-color:var(--primaryColor);
    padding-top:90px;
    padding-bottom:90px;
    width:100%;
}
.cell{
    background-color:Var(--ternaryColor);
    display:flex;
    flex-direction:column;
    border-radius:10px;
    width:100%;
    height:300px;
}
.cell>img{
    border-radius:10px;
    object-fit:cover;
    width:100%;
}
.cell>span{
    font-weight:bold;
    font-size:20px;
}
/*footer*/
footer{
    background-color:var(--secondaryColor);
    width:100%;
    height:10vh;
}
#section-footer-nav{
    display:flex;
    flex-direction:column;
    justify-content:center;
    width:100%;
    height:10vh;
    
}
#footer-nav{
    display:flex;
    flex-direction:row;
    margin-bottom:15px;
}
#footer-nav>a{
    text-decoration:none;
    color:var(--sixthGray);
    border-right:1px solid black;
    margin-left:4px;
    padding-right:4px;
    display:block;
}
#footer-nav>a:hover{
    text-decoration:underline;
    color:var(--secondGray);
}
#footer-nav>a:last-of-type{
    border-right:0;
}
/*animation*/
.rollingImage{
    animation-duration: 4s;
    animation-delay:0;
    animation-fill-mode:forwards;
    animation-name:rollingImage;
    animation-iteration-count:infinite;
}
@keyframes rollingImage {
    0%{
        transform: rotate(360deg);
    }
    
}
@media screen and (max-width:1545px) and (min-width:1024px){
    .grid{
        display:grid;
        grid-template-columns:1fr 1fr 1fr;
    }
}
@media screen and (max-width:1024px) and (min-width:767px){
    .grid{
        display:grid;
        grid-template-columns:1fr 1fr;
    }
}
@media screen and (max-width:767px){
    .grid{
        display:grid;
        grid-template-columns:1fr;
        width:60%;
    }
}