:root{
    --main-radius:5px;
    --main-padding:5px;
}

html{
    background-color: lightgrey;
    font-family: 'Montserrat';
}
.container{
    display:grid;
    height:100vh;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: .2fr 2fr 1.2fr 0.4fr;
    grid-template-areas:
        "nav nav nav"
        "main main main"
        "content1 content2 content3"
        "footer footer footer";
    grid-gap: 0.2rem;
}

nav{
    background-color:lightsalmon;
    grid-area: nav;
    border-radius:var(--main-radius);
    padding-top:var(--main-padding);
}

main{
    background-color: lightpink;
    grid-area: main;
    border-radius:var(--main-radius);
    padding-top:var(--main-padding);
}

#content1{
    background-color: lightseagreen;
    grid-area: content1;
    border-radius:var(--main-radius);
    padding-top:var(--main-padding);
}

#content2{
    background-color: lightseagreen;
    grid-area: content2;
    border-radius:var(--main-radius);
    padding-top:var(--main-padding);
}

#content3{
    background-color: lightseagreen;
    grid-area: content3;
    border-radius:var(--main-radius);
    padding-top:var(--main-padding);
}

footer{
    background-color: lightsalmon;
    grid-area: footer;
    border-radius:var(--main-radius);
    padding-top:var(--main-padding);
}

p, h1{
    padding:.5em;
}
@media only screen and (max-width:550px){
    .container{
        grid-template-columns: 1fr;
        grid-template-rows: 0.4fr 0.4fr 2.2fr 1.2fr 1.2fr 1.2fr 1fr;
        grid-template-areas: 
            "nav"
            "sidebar"
            "main"
            "content1"
            "content2"
            "content3"
            "footer"
    }
}