*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    --red: #EE202E;
    --bordeau: #780A34;
    --beige: #FFF9E9;
    --black: #42170D;
    --yellow: #FFCC40;
    font-family: 'poppins';
    color: var(--black);
}

.cover{
    height: 100%;
    width: 100%;
    object-fit: cover;
}


h1, h2, h3{
    font-family: 'BioRhyme';
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
}

h1{
    font-size: 5rem;
}


h2{
    font-size: 3.5rem;
}

h3{
    font-size: 1.5rem;
}

.btn{
    display: inline-block;
    background-color: white;
    padding: 15px 25px;
    text-decoration: none;
    color: var(--bordeau);
    border: 4px solid var(--bordeau);
    font-size: .9rem;
    font-weight: 700;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.325);
    margin: 30px 0 5vw;
    transition: .3 ease;
}

.btn:hover{
    color: white;
    background-color: var(--bordeau);
}

.btn-big{
    display: block;
    margin: 30px;

}

.pageheader{
    background-color: var(--red);
    display: grid;
    grid-template-rows: 120px 1fr;
    grid-template-columns: 35% 1fr;
}

.pageheader__foodtruck{
    overflow: hidden;
    grid-row: 2/3;
    grid-column: 2/3;
    align-self: center;
}

.herobg{
    grid-row: 1/-1;
    grid-column: 1/-1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logo{
    height: 100px;
    grid-row: 1/2;
    grid-column: 1/2;
    align-self: center;
    justify-self: center;
}

.burger{
    display: none;
}

.topnav{
    grid-row: 1/2;
    grid-column: 2/3;
    justify-self: center;
    align-self: center;
}

.topnav li{
    display: inline;
}

.topnav li:not(:first-of-type){
    margin-left: 35px;
}


.topnav a{
    color: white;
    font-weight: 700;
    text-decoration: none;
    transition: .3s ease;
}

.topnav a:hover{
    color: var(--yellow);


}

.herocontent{
    color: white;
    grid-row: 2/3;
    grid-column: 1/2;
    text-align: center;
    padding: 7vw 4vw 0;
}

.herocontent_wrapper{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    grid-row: 2/3;
    grid-column: 1/2;
}


.herocontent h2{
    font-size: 1.3rem;
    margin-bottom: 20px;
}

.sep{
    margin: 30px 0;
}

/* food truck */


.decor{
    max-width: 50%;
    align-self: center;
}

.foodtruck{
    text-align: center;
    background-image: url(../images/foodtruck2-sectionbg-1.webp);
    background-color: var(--beige);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    padding: 0 15vw 40px;
}

.red{
    color: var(--red);
}

.heading{
    padding: 80px 0 60px;
}

.heading img{
    margin-bottom: 15px;
}

.three-col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.meal{
    border: 1px dashed #ccc;
    padding: 70px 40px 60px;
    
}

.meal__image img{
    width: 100%;
    margin-bottom: 40px;
}

.meal__deals h3{
    margin-bottom: 25px;

}

.freshfood{
    text-align: center;
    padding: 0 15vw 40px;
    background-color: var(--beige);
}

.two-col{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 35px;
}

.taco{
    width: 100%;
    align-self: center;
}

.badges{
    margin-top: 40px;
}

.specials{
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
}

.specials__content{
    grid-column: 3/4;
    grid-row: 1/3;
    padding: 50px 80px;
    text-align: center;
}

.specials__logobox{
    background-color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
}

.specials__menubox{
    text-align: left;
    border: 2px dashed #ccc;
    padding: 30px;
    margin: 15px 0;
}

.specials__menubox h3{
    margin-bottom: 15px;
}

.map{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 25px;
    background-color: var(--yellow);
    padding: 100px 15vw;
}

.span2{
    grid-column: span 2;
}

.mapimg{
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.span2 p{
    margin: 30px 0 25px;
}

.map__upcoming{
    padding: 30px 20px;
    border: 2px solid black;
    align-items: center;
}

.upcoming__info{
    border-left: 1px solid;
    padding-left: 20px;
}

.upcoming__box{
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
}

.lovecooking{
    background-color: var(--bordeau);
    color: white;
    text-align: center;

}

.lovecooking__p{
    max-width: 600px;
    margin: 0 auto;
}

.lovecooking__grid{
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    padding: 0 15vw;

}

.lovecooking__img{
    grid-row: 1/3;
    grid-column: 2/3;
    max-height: 600px;
    justify-self: center;
}

.lovecooking__box{
    align-self: center;
}

.seperator{
    height: 30px;
    background-image: url(../images/foodtruck2-decor1.webp);
}

.pagefooter{
    background-color: var(--red);
    padding: 80px 15vw 40px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 60px;
    color: white;
}

.pagefooter a{
    color: white;
}

.pagefooter ul{
    list-style-type: none;
    padding-bottom: 20px;
}

.pagefooter h3{
    padding-bottom: 20px;
}

.subfooter{
    grid-column: 1/-1;
    border-top: 1px solid black;
    padding-top: 30px;
    text-align: center;
    font-size: .9rem;
}

/* tablets */

@media screen and (max-width: 768px){

    .topnav{
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        background-color: var(--black);
        height: 100%;
        padding: 150px 30px 0;
        transition: .5s ease-in-out;
    }

    .burger{
        display: block;
        color: white;
        position: absolute;
        top: 20;
        right: 30px;
        z-index: 99;
    }

    .topnav__list li{
        display: block;
        line-height: 2.5;
        font-size: 1.2rem;
    }

    .topnav li:not(:first-of-type){
        margin-left: 0px;
    }

    .change{
        right: -300px;
    }

 
    .pageheader{
        grid-template-columns: 1fr;
    }
    
    .pageheader__foodtruck{
        display: none;

    }

    .three-col{
        display: grid;
        grid-template-columns: 1fr;
    }

    .foodtruck{
         background: var(--beige);

    }

    .two-col{
        grid-template-columns: 1fr;
        gap: 35px;
    }
    
    .badges{
        max-width: 100%;
    }

    .specials{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .specials__content{
        grid-column: 1/3;
        grid-row: 1/3;
        padding: 50px 80px;
        text-align: center;
    }

    .map{
        grid-template-columns: 1fr 1fr;
        padding: 100px 5vw;
    }
    
    .lovecooking__grid{
        grid-template-columns: 1fr 1fr;
        margin-top: 80px;
        padding-bottom: 80px;
    }
    
    .lovecooking__img{
        grid-row: 2/3;
        grid-column: 1/3;
        transform: rotate(-90deg);
        max-width: 85%;
    }

    .pagefooter{
        grid-template-columns: 1fr;
        text-align: center;
        gap: 20px;

    }

}


@media screen and (max-width: 420px){
    
    .map{
        grid-template-columns: 1fr;
    }

    .span2{
        grid-column: span 1;
    }

    .specials__logobox img{
        width: 70%;
    }
}



@media screen and (max-width: 375px){
    h2{
        font-size: 2.5rem;
    }

    
    .specials__content{
        padding: 0 5vw 50px;
    }

    .specials__logobox img{
        width: 70%;
    }

    .map{
        grid-template-columns: 1fr;
    }

    .span2{
        grid-column: span 1;
    }

    .map h2{
        font-size: 2rem;
    }

    .lovecooking{
        padding: 0 5vw;
    }

    .lovecooking__grid{
        grid-template-columns: 1fr;
        margin-top: 80px;
        padding-bottom: 80px;
    }
    
    .lovecooking__img{
        grid-row: 3/4;
        grid-column: 1/3;
        transform: rotate(-90deg);
        max-width: 90%;
    }
}