@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600&display=swap');


* { 
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    font-size: 24px;
    font-weight: bold;
}

.wrapper {
    height: 100vh;
    background-color: white;
}


.container {
    height: 100vh;
    display: grid;
    grid-template-columns: 20% auto;
    grid-template-rows: 15% auto 15%;
    grid-template-areas: 
        "header header"
        "nav content"
        "footer footer"
    ;

    grid-gap: 15px;
}

header {
    grid-area: header;
    background-color: black;
    color: white;
    padding: 20px;
}

nav {
    grid-area: nav;
    background-color: gray;
    color: white;
    padding: 20px;
}

article {
    grid-area: content;
    background-color: lightgray;
    color: white;
    padding: 20px;
}

footer {
    grid-area: footer;
    background-color: black;
    color: white;
    padding: 20px;
}








/* ======= Responsive/Responsividade ======= */
@media (max-width: 991px){

    html {
        font-size: 55%;
    }

}

@media (max-width: 768px){


}

@media (max-width: 450px){

    html {
        font-size: 50%;
    }

}