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


body {
    font-family: 'Times New Roman', Times, serif;    
    color: black;
    background-color: lightsalmon;                 
}



.grid-container {
    display: grid;
    grid-template-areas:
        "header"
        "nav"
        "main"
        "footer";
    
   
}

/*HEADER */
.site-header {
    grid-area: header;
    background-color: aqua;
    color: brown;
    display: flex;          
    align-items: center;
    padding: 15px 20px;
}
/* logo */
.logo {
    width: 60px;
    height: 60px;
}


.site-title {
    font-size: 28px;
    padding-left: 15px;
}

/* NAVIGATION */
.site-nav {
    grid-area: nav;
    background-color: sienna;
}

.nav-list {
    list-style-type: none;
    display: flex;                
    justify-content: flex-start;
}

.nav-list li a {
    display: block;
    padding: 12px 20px;
    text-decoration: none;
    color: white;
}


.nav-list li a:hover {
    background-color: peru;
}

/* MAIN CONTENT*/
.site-main {
    grid-area: main;
    background-color: lightsalmon;
    padding: 20px;
  
}

/*article and aside */
.main-grid {
    display: grid;
    grid-template-areas: "article aside";
    grid-template-columns: 2fr 1fr;
    gap: 20px;
}

main article {
    grid-area: article;
}

main aside {
    grid-area: aside;
}


h2 {
    margin: 0 0 15px 0;
    color: darkred;
}

h3 {
    margin: 15px 0 10px 0;
    color: saddlebrown;
}

p {
    margin: 0 0 10px 0;
}

/* image*/
.restaurant-image img, 
.map-image {
    width: 900px;
    display: block;
}

/* HOME PAGE ASIDE */
.hours span {
    font-weight: bold;
}

.specials .special-box {
    background-color: lightyellow;
    border-left: 5px solid goldenrod;
    padding: 10px;
    margin: 0 0 10px 0;    
}

/* MENU PAGE */
.flex-menu-image {
    display: flex;
    padding: 10px 0;
    margin: 10px 0;
}
.flex-menu-image  img {
    width: 150px;
    height: 100px;
    border: 2px solid saddlebrown;
}
.menu-item {
    padding-left: 10px;
    
}

.menu-item:last-child {
    border-bottom: none;
}

.item-name {
    font-weight: bold;
    display: block;          
}

.item-price {
    font-weight: bold;
    color: firebrick;
    display: block;
}

/*food description */
.menu-item p {
    margin: 5px 0 0 0;
}


/* FOOTER */
.site-footer {
    grid-area: footer;
    background-color: brown;
    color: white;
    text-align: center;
    padding: 10px;
    font-size: 14px;
}


@media (max-width: 750px) {
    
    .main-grid {
        grid-template-areas:
            "article"
            "aside";
        grid-template-columns: 1fr;
    }

    .nav-list {
        flex-direction: column;
    }
}