div#header > button[onclick='openMobileNav()'] {
    display: none;
}

div#header > button[onclick='openMobileNav()'] > span {
    border-radius: 5px;
    margin: 4px;
    width: 40px;
    height: 6px;
    display: block;
    background: black;
}

div#mobileNav {
    display: none;
}

@media screen and (orientation: portrait) {
    div#header > h1 {
        text-align: center;
    }

    div#header > ul {
        display: none;
    }

    div#header > button[onclick='openMobileNav()'] {
        z-index: 2;
        cursor: pointer;
        background: none;
        border: none;
        display: block;
    }

    div#header > button[onclick='openMobileNav()'] > span {
        transform: none;
        opacity: 1;
        transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
    }

    div#header > button[onclick='openMobileNav()'] > span.mobileNavSpan-0 {
        transform: translateY(10px) rotatez(45deg);
    }

    div#header > button[onclick='openMobileNav()'] > span.mobileNavSpan-1 {
        opacity: 0;
    }

    div#header > button[onclick='openMobileNav()'] > span.mobileNavSpan-2 {
        transform: translateY(-10px) rotateZ(-45deg);
    }

    div#mobileNav {
        left: -90vw;
        padding-left: 60px;
        padding-top: 100px;
        z-index: 1;
        top: 0;
        background: rgb(187, 17, 17);
        width: 90vw;
        height: 100vh;
        position: absolute;
        display: block;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        transition: left 0.4s ease-in-out;
    }
    
    div#mobileNav.mobileNavOpen {
        left: 0;
    }

    div#mobileNav > a {
        display: flex;
        align-items: center;
        text-align: left;
        user-select: none;
        cursor: pointer;
        font-family: 'Bebas', 'Arial';
        position: relative;
        text-decoration: none;
        color: black;
        padding-left: 3%;
        font-size: 2rem;
        width: 60%;
        height: 70px;
    }

    div#mobileNav > a:hover {
        background: rgb(160, 0, 0);
    }

    div#mobileNav > a::after {
        content: ">>";
        position: absolute;
        transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out;
        left: 100px;
        opacity: 0;
    }

    div#mobileNav > a:hover::after {
        opacity: 1;
        left: 130px;
    }

    div.slide1 {
        padding: 2vh 2vh;
        flex-direction: column;
    }

    div.slide1 > img, div.slide1 > p {
        width: 100%;
    }

    div.main-type {
        padding: 2vh;
        flex-direction: column;
    }

    div.main-type > img, div.main-type > div.text {
        width: 100%;
    }

    main > .main-type > div.text > h1 {
        font-size: 8vh;
    }

    main > .main-type > div.text > h3 {
        font-size: 6vh;
    }

    main > .main-type > div.text > p {
        font-size: 4vh;
    }

    div.other-entrees {
        padding: 2vh;
    }

    div.other-sides {
        padding: 2vh;
    }

    div.drinks {
        padding: 2vh;
    }

    div.drinkHold > div.pepsi > p {
        font-size: 3vh;
    }

    div.drinkHold > div.coke > p {
        font-size: 3vh;
    }

    div.drinks > div.other > p {
        font-size: 3vh;
    }
}

@media screen and (orientation: portrait) and (width <= 602px) {
    .contactWrapper > h1 {
        font-size: 5rem;
    }
}

@media screen and (orientation: portrait) and (width <= 592px) {
    div#header > h1 {
        font-size: 2.5rem;
    }
    
    .contactWrapper > h1 {
        font-size: 3.5rem;
    }
    
    .contactForm > p {
        font-size: 1.5rem;
    }
}

@media screen and (orientation: portrait) and (width <= 520px) {
    div#header > h1 {
        font-size: 2rem;
    }

    .contactWrapper > h1 {
        font-size: 3rem;
    }

    .contactForm > p {
        font-size: 1.5rem;
    }
}