.container{ 
    display: grid;
    grid-template-columns: [first] 20% [second] auto [third] 20% [fourth last];
    grid-template-rows: [first] 15% [second] 10% [third] auto [fourth] 15% [fifth last];
    width: 90%;
    min-height: 100vh;
    margin: auto;
}

.header{
    grid-column-start: first;
    grid-column-end: last;
    grid-row-start: first;
    grid-row-end: second;
    background-color: lightblue;
}

.navigation{
    grid-column-start: first;
    grid-column-end: last;
    grid-row-start: second;
    grid-row-end: third;
    background-color:lightblue ;
    
    display: flex;
    justify-content: space-around;
}

.navigation a{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: orange;
    color: white;
    text-decoration: none;
    width: 100%;
}
.navigation a:hover{
    background-color:rgb(210, 122, 14);
}
.left{
    grid-column-start: first;
    grid-column-end: second;
    grid-row-start: third;
    grid-row-end: fourth;
    background-color:rgb(27, 128, 161);
}
.middle{
    grid-column-start: second;
    grid-column-end: third;
    grid-row-start: third;
    grid-row-end: fourth;
    background-color:lightblue;
}
.right{
    grid-column-start: third;
    grid-column-end: fourth;
    grid-row-start: third;
    grid-row-end: fourth;
    background-color: rgb(27, 128, 161);
}
.footer{
    grid-column-start: first;
    grid-column-end: last;
    grid-row-start: fourth;
    grid-row-end: last;
    background-color:lightblue;
}

input {
    width: 100%;
}