.container {
            margin: 0 auto; 
        }

        body {
            font-family: "Inter", sans-serif;
            background-color: white;
            color: #320101;
        }

        h1 {
            font-family: "Agbalumo", system-ui;
            font-weight: normal;
        }

        h2 {
            font-size: 30px;
        }

        /* header */

        header h1 {
            text-align: center;
            color: #370404;
            font-size: 36px;
        }

        .mobile {
            font-family: "Livvic", sans-serif;
            font-style: italic;
            color: #be7f6f;
            font-size: 14px;
            text-align: center;
            margin-top: -20px;
            margin-right: -60px;
        }

        .tablet {
            display: none;
        }

        header p span {
            color: #B9EA5D;
        }

        /* navigation */

        nav {
            background-color: #be7f6f;
            padding-top: 5px;
            padding-bottom: 5px;
        }

        nav ul {
            list-style-type: none;
            text-align: center;
            padding: 0;
            margin: 0; 
        }

        nav ul li {
            display: block;
            margin: 10px 0;
            padding-top: 7px;
            padding-bottom: 7px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-weight: bold;
        }

        nav ul li:nth-child(-n+3) {
            border-bottom: 0.5px solid white; 
            padding-bottom: 17px; 
            margin-left: 20px;
            margin-right: 20px;          
        }

        nav a:hover, nav a:active {
            text-decoration: underline;
        }

        /* spring menu */

        #spring-menu {
            text-align: center;
            border-bottom: 2px solid #DDDDDD;
            margin-left: 20px;
            margin-right: 20px;
        }

        #spring-menu h2 {
            padding-bottom: 5px;
        }

        .new-item img {
            max-width: 275px;
            max-height: 275px;
            object-fit: cover;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }

        .new-item p {
            color: #FF0066;
            font-style: italic;
            margin-top: -15px;
            font-size: 14px;
            padding-bottom: 15px;
        }

        

        /* flip card image-only container */

        .flip-container {
        perspective: 1000px;
        width: 275px;
        height: 275px;
        margin-bottom: 10px;
        }

        .flipper {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform 0.6s;
        }

        .flip-container:hover .flipper,
        .flip-container.hover .flipper {
        transform: rotateY(180deg);
        }

        .front, .back {
        position: absolute;
        width: 100%;
        height: 100%;
        backface-visibility: hidden;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        display: flex;
        justify-content: center;
        align-items: center;
        background: white;
        box-sizing: border-box;
        }

        .back {
        transform: rotateY(180deg);
        text-align: center;
        font-style: italic;
        background: #eeb66d;
        color: #320101;
        }

        .back p {
            color: white;
            font-family: "Inter", sans-serif; 
            font-weight: 500;
        }

        .new-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        }


        /* menu section */

        #menu {
            text-align: center;
            padding-bottom: 50px;
        }

        #menu p {
            font-family: "Livvic", sans-serif;
            font-style: italic;
            margin-top: -20px;
            font-size: 16px;
            padding-bottom: 15px;
        }

        #menus-box {
            background-color: #be7f6f;
        }

        .menuimage {
            display: none;
        }

        #menus-box ul {
            list-style: none;
            margin: 0;
            padding: 0;
            width: 100%;              
        }

        #menus-box ul li {
            margin-left: 20px;
            margin-right: 20px;
            padding-bottom: 30px;
            padding-top: 30px;
            text-align: center;
            border-bottom: 0.5px solid white;
        }

        #menus-box ul li:last-child {
            border-bottom: none;
        }


        #menus-box a {
            display: block;      
            color: #fff;
            font-weight: bold;
            text-decoration: underline;
            font-style: italic;
            font-family: "Inria Sans", sans-serif;
            font-size: 24px;
        }

        /* about us section */

        #aboutus {
            background-color: #F4F4F4;
            padding: 10px 20px 15px;
            text-align: left;
            padding-top: 20px; 
        }

        #aboutus img {
            display: block;
            margin: 10px auto;
            max-width: 100%;
            height: auto;
            width: auto;          
            max-height: 265px; 
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);  
        }

        #aboutus h2 {
            text-align: center;
            margin: 0;
        }

        #aboutus p {
            font-style: italic;
            color: #6b5c5c;
            max-width: 400px;
            display: flex;
            align-items: center;
            margin: auto;
            padding-top: 10px;
            padding-bottom: 10px;
        }

        /* hours */

        #hours {
            text-align: center;
            font-size: 15px;
            padding-bottom: 15px;
        }

        #hours h2 {
            font-size: 30px;
        }

        #hours h3 {
            color: #D30949;
            text-align: left;
            display: flex;
            justify-content: center;
        }

        #hours p {
            text-align: left;
            display: flex;
            justify-content: center;
        }

        /* footer */

        #footer {
            text-align: center;
            background-color: #be7f6f;
            padding-top: 5px;
            padding-bottom: 15px;
            color: white;
        }

        #footer p {
            font-weight: normal;
        }

@media (max-width: 799px) {
        .new-items {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 30px;
        }

        .new-item {
            text-align: center;
        }
}



@media (min-width: 800px) {
    
        /* header */

        .mobile {
            display: none;
        }

        header h1 {
            text-align: left;
            margin: auto;
            padding-bottom: 10px;
            padding-left: 20px;
            padding-top: 15px;
        }

        .tablet {
            font-size: 20px;
        }

        .tablet {
        /*  display: block; */
            display: flex;
            justify-content: center; 
            align-items: center;
            text-align: center;
            background-color: #be7f6f;
            padding-top: 15px;
            padding-bottom: 15px;
            color: white;
            font-style: italic;
            margin: auto;
        }

        #headerimage {
            background-image: url(images/headerimage.jpg);
            height: 300px;
            background-size: cover;
            background-position: center;
            margin: 0;
        }

        nav {
            padding: 0px; 
            font-size: 18px;
        }

        nav ul {
            display: flex;
            justify-content: right; 
            align-items: right;
            text-align: right;
            padding: 0;
            margin: 0;
            gap: 30px;
            margin-right: 30px;
        }


        nav ul li {
            margin: 0;
            padding: 15px 15px;
        }

        nav ul li:nth-child(-n+3) {
            border-bottom: none;
            display: flex;   
            justify-content: center; 
            align-items: center;
            text-align: center;     
        } 


        /* spring menu */

        .new-items {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 30px;
            justify-items: center;
            max-width: 900px;
            margin: 0 auto;
        }

        .new-items .new-item {
            width: 100%;
            max-width: 350px;
            text-align: center;
        }

        .new-items .new-item:nth-child(3) {
            grid-column: 1 / 3;
            justify-self: center;
        }

        .new-item {
            display: flex;
            flex-direction: column;
            align-items: center;
        }


        /* hours */ 

        .hours {
            display: flex;
            justify-content: center;
            gap: 100px; 
        }

        }


@media (min-width: 1300px) {


        /* header */

        #headerimage {
            height: 500px;
            background-image: url(images/headerimage.jpg);
        }

        /* spring menu */

        .new-items {
            display: flex;
            gap: 100px;
            justify-content: center;
        }

        /* menu */

        #menus-box{
            display: none;
        }

        #menus-box ul li a {
            display: none;
        }

        #menus-box ul {
            display: none;
        }

        #menus-box ul li {
            border-bottom: none;
        }


        .menuimage {
            display: block;
        }

        #menuimages {
            display: flex;
            justify-content: center;
            padding: 30px;
            align-items: center;
            background-color: #be7f6f;
            margin-left: 30px;
            margin-right: 30px;
        }

        #menuimages-content {
            display: flex;
            justify-content: center;
            gap: 40px;
            max-width: 900px;
            width: 100%;
            margin: 0 auto;
        }

        #menuimages-left,
        #menuimages-right {
            display: flex;
        }

        #menuimages-left {
            justify-content: center;
            align-items: center;
        }

        #menuimages-right {
            flex-direction: column;
            justify-content: center;
            gap: 20px;
        }

        .menuimage {
            max-width: 100%;
            height: auto;
            display: block;
            border-radius: 5px;
        }

    }