body{
    
    display: grid;
    grid-template-areas:
       "header header header"
       "nav content sidebar"
       "footer footer footer";
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 1fr 3fr 1fr;
   
    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;



}

header{
    grid-area: header;
    background: #0AA502;
    padding: 20px;
    text-align:  center;
    color: white;
}
nav{
    grid-area: nav;
    background: #333;
    padding: 15px;
    color: white;
}
nav a{
    color: white;
    text-decoration: none;
    display: block;
    padding:5px 0;
}
nav a:hover{
    background: #575757;
}

#sidebar{

    grid-area: sidebar;
    background: #e9e6e6;
    padding: 15px;

}
.content{
    grid-area: content;
    background: #fff;
    padding: 15px;
    text-align: center;
}
footer{
    grid-area: footer;
    background: #333;
    text-align: center;
    color: white;
    padding: 10px;

}