body{
    display: grid;
    grid-gap:10px;
    grid-template-areas: 
    'header header'
    'nav main'
    'section section'
    'div div'
    'footer footer';
    grid-template-columns: 200px 1fr ;
    grid-template-rows: auto 2fr auto auto auto; 
    height: 100vh;
    margin: 0px;
}

header{
    grid-area: header;
    background-color: rgb(159, 159, 255);
    font-size: 30px;
    padding: 20px;
    text-align: center;
}

nav{
    grid-area: nav;
    background-color: rgb(167, 198, 251);
    font-size: 20px;
    text-align: left;  
    padding:10px ;   
}

nav a{
    text-align: left;
    display: block;    
    padding-left: 15px;
    text-decoration: none;
}

nav a:hover {
    color: #0b4eb3;
}

.container {
    width: 85%;
    margin: 25px auto;
    background: white;
    padding: 25px;
    border-radius: 6px;
}

main{
    grid-area: main;
    background-color: rgb(88, 77, 252);
    font-size: 20px;
    padding: 10px;
}

div{
    grid-area: div;
    background-color: rgb(167, 198, 251);
    padding: 10px;
}

section{
    grid-area: section;
    background-color: rgb(167, 198, 251);    
}

.text{
    margin: 20px;
    font-size: 17px;

}

.box {
    border: 1px solid #ddd;
    padding: 15px;
    margin: 20px 0;
    border-radius: 5px;
    min-height: 180px;
}

input, textarea, button {
    width: 50%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #bbb;
}

button {
    background: #1a73e8;
    color: white;
    border: none;
    cursor: pointer;
}

button:hover {
    background: #0b4eb3;
}

footer{
    grid-area: footer;
    background-color: rgb(159, 159, 255);
    text-align: center;
    padding: 20px;
}