body {
    margin: 0;
    font-family: Verdana, Geneva, Tahoma, sans-serif, sans-serif;
    background-color: aquamarine;
}
.container {
    display: grid;
    grid-template-areas:
        "banner"
        "nav"
        "article"
        "footer";
    grid-gap: 10px;
    padding: 10px;
    padding-bottom: 0;
    min-height:100vh;
    grid-template-rows: 112px 45px auto 120px;
    
}
.banner { grid-area: banner; 
background-color: #423131; color: white; 
text-align: center;
 padding: 20px;
  }

.nav {
 grid-area: nav; 
background-color: #e8ff16;
 color: rgb(255, 255, 255); 
 }

.article { 
grid-area: article; 
background-color: rgb(239, 209, 163); 
padding: 20px; 
}
.footer { grid-area: footer; 
background-color: #333; 
color: white; 
text-align: center; 
padding: 10px;
}

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active) {
background-color: #111;
}

.active {
background-color: #04AA6D;
}