@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200;400&display=swap');

main.template{
    grid-template-columns: 20fr 60fr 20fr;
    display: grid;
    grid-column-gap: 30px;
    grid-row-gap: 0;

}

main.template > header.grid {
    grid-column: 1 / span 3;
    background-color: #658DC6;
}

main.template > nav.grid {
    grid-column: 1;
    background-color: #0F4C81;
}

@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/FiraSans-Regular.ttf");
}

main.template > article.grid {
    font-family: "Fira Sans", serif;
}

main.template > aside{
    background-color: #84898C;
    font-family: "Source Code Pro";
}

main.template > footer.grid {
    grid-column: 1 / span 3;
    background-color: #658DC6;

}

nav.grid > ul{
    padding: 0;
    list-style-type: none;
}

nav.grid li {
    padding: 0 1em;
    background-color: #B5C7D3;
}

nav.grid li:hover {
    background-color: #FFFFFF;
}