:root{
    --button-color:#FF6201;
    --story-color:#FDECEF;
    --menu-color:#690500;
    --ambiance-color:#FCD757;
    --footer-color:#0D160B;
}

@media screen and (max-width: 1024px) {
    .logo{
        width: 10rem;
        height: 10rem;
    }

    .hamburger {
        display: block; /* Show the hamburger icon */
        font-size: 4rem;
        cursor: pointer;
        z-index: 1001; /* Ensure it's on top of the slide-out menu */
        }

        .navlinks {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
        flex-direction: column;
        }

        .navlinks.active {
        display: flex; /* Slide menu into view */
        }

        .navlinks ul {
        flex-direction: column; /* Stack nav links vertically */
        padding: 4rem 0;
        }

        .navlinks ul li a {
        font-size: 2rem; /* Make links bigger and easier to tap */
        }

        #submit-button, button{
            width: 18rem;
            font-size: 2rem;
        }

        .banner{
            height: 80rem;
            gap: 3rem;
        }

        .banner-heading{
            width: 80%;
            text-align: center;
            font-size: 9rem;
        }

        .banner-subheading{
            font-size: 2rem;
            width: 90%;
        }

        .footlinks ul{
            gap: 2rem;
        }

        .footer-heading{
            font-size: 2rem;
        }

        .footlinks ul li{
            font-size: 1.2rem;
            font-family: 'PlayFair Display';
        }

        #booking{
            flex-direction: column;
            padding: 2rem;
        }

        .copyright{
            font-size: 0.6rem;
        }

        .foots{
            flex-direction: column;
            align-items: flex-start;
        }

        article{
            width: 100%;
            gap: 2rem;
        }

        #story{
            width: 100%;
            flex-direction: column;
            height: 80rem;
            gap: 2rem;
            padding: 2rem;
        }

        .menu-heading, .heading{
            font-size: 3rem;
            width: 90%;
        }

        .text{
            width: 80%;
            font-size: 1.2rem;
            line-height: 1.8;
        }

        .polaroid-frame{
            width: 60%;
            height: 80%;
        }

        #menu{
            gap: 2rem;
        }

        .dish-pic{
            width: 40%;
        }

        .dishes{
            flex-direction: column;
            height: 90%;
            gap: 2rem;
            flex-wrap: nowrap;
        }

        .dish-box{
            height: 30%;
            width: 100%;
            border-radius: 3rem;
            gap: 2rem;
        }

        .dish-description{
            height: 100%;
        }

        .dish-name{
            font-size: 1.6rem;
        }

        .dish-details{
            font-size: 0.6rem;
        }

        .booking{
            margin-top: 0rem;
        }

        #ambiance{
            flex-direction: column-reverse;
            height: 50rem;
        }

        .ambiance-img{
            width: 100%;
            height: 60%;
        }

        .ambiance-description{
            width: 90%;
        }

        .booking-description, .booking-form{
            width: 90%;
            gap: 2rem;
            height: 90%;
        }

        fieldset{
            margin-top: 4rem;
            width: 90%;
        }

        textarea{
            width: 100%;
            height: 50%;
        }

        legend{
            font-size: 1.2rem;
        }

        #name, #guestcount, #date, #time, #phone, .field,textarea{
            font-size: 0.8rem;
        }
    
}

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

    .logo{
        width: 6rem;
        height: 6rem;
    }

    .hamburger {
        display: block; /* Show the hamburger icon */
        font-size: 2rem;
        cursor: pointer;
        z-index: 1001; /* Ensure it's on top of the slide-out menu */
        }

        .navlinks {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        background-color: rgba(0, 0, 0, 0.9);
        text-align: center;
        flex-direction: column;
        padding: 2rem 0;
        margin-top: 5rem;
        margin-right: 1rem;
        }

        .navlinks.active {
        display: flex; /* Slide menu into view */
        }

        .navlinks ul {
        flex-direction: column; /* Stack nav links vertically */
        padding: 1rem 0;
        }

        .navlinks ul li a {
        font-size: 1.2rem; /* Make links bigger and easier to tap */
        }

        #submit-button, button{
            width: 10rem;
            font-size: 0.8rem;
        }

        .banner{
            height: 80rem;
            gap: 3rem;
        }

        .banner-heading{
            width: 80%;
            text-align: center;
            font-size: 5rem;
        }

        .banner-subheading{
            font-size: 1rem;
            width: 80%;
        }

        .footlinks ul{
            gap: 2rem;
        }

        .footer-heading{
            font-size: 1.2rem;
        }

        .footlinks ul li{
            font-size: 0.6rem;
            font-family: 'PlayFair Display';
        }

        #booking{
            flex-direction: column;
        }

        .copyright{
            font-size: 0.6rem;
        }

        .foots{
            flex-direction: column;
            align-items: flex-start;
        }

        article{
            width: 100%;
            gap: 2rem;
        }

        #story{
            width: 100%;
            flex-direction: column;
            height: 80rem;
            gap: 2rem;
            padding: 2rem;
        }

        .menu-heading, .heading{
            font-size: 3rem;
            width: 90%;
        }

        .text{
            width: 90%;
            font-size: 0.8rem;
            line-height: 1.8;
        }

        .polaroid-frame{
            width: 80%;
            height: 40%;
        }

        #menu{
            gap: 2rem;
        }

        .dish-pic{
            width: 40%;
        }

        .dishes{
            flex-direction: column;
            height: 90%;
            gap: 2rem;
            flex-wrap: nowrap;
        }

        .dish-box{
            height: 30%;
            width: 100%;
            border-radius: 3rem;
            gap: 2rem;
        }

        .dish-description{
            height: 100%;
        }

        .dish-name{
            font-size: 1.6rem;
        }

        .dish-details{
            font-size: 0.6rem;
        }

        .booking{
            margin-top: 0rem;
        }

        #ambiance{
            flex-direction: column-reverse;
            height: 50rem;
        }

        .ambiance-img{
            width: 100%;
            height: 60%;
        }

        .ambiance-description{
            width: 90%;
        }

        #booking{
            flex-direction: column;
            padding: 2rem;
        }

        .booking-description, .booking-form{
            width: 90%;
            gap: 2rem;
            height: 90%;
        }

        fieldset{
            margin-top: 4rem;
            width: 90%;
        }

        textarea{
            width: 100%;
            height: 50%;
        }

        legend{
            font-size: 1.2rem;
        }

        #name, #guestcount, #date, #time, #phone, .field,textarea{
            font-size: 0.8rem;
        }
        
        #guestcount{
            width: 10rem;
        }
        
    }