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

*{
    margin: 0;
    padding: 0;
    box-sizing:border-box;
}

.container{
    height: 100vh;

    display: grid;
    grid-template-columns: repeat(4,1fr) ;
    grid-template-rows: 0.2fr 1.5fr 1.2fr 0.8fr ;
    grid-template-areas:
       "nav nav nav nav"
       "sidebar main main main"
       "sidebar content1 content2 content3"
       "footer footer footer footer";
     grid-gap: 0.2rem;

     font-family: sans-serif;
     font-weight: 800;
     font-size: 12px;

     color:#004;

     text-transform: uppercase;
     text-align: center;
    
    padding:0.5rem;

}

nav{
    grid-area: nav;

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

    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    background:#84ffff;
}
#sidebar{
    grid-area: sidebar;

    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    background:#18ffff;
}
#content1{
    grid-area: content1;

    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    background:#6fffd2;
}
#content2{
    grid-area: content2;

    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    background:#64ffda;
}
#content3{
    grid-area: content3;

    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    background:#73ffba;
}
footer{ 
    grid-area: footer;

    border-radius: var(--main-radius);
    padding-top: var(--main-padding);

    background:#1de9b6;
}



@media only screen and (max-width:800px)
{
    .container{
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.2fr 1.5fr 0.2fr 0.2fr 0.2fr 0.8fr ;

        grid-template-areas: 
        "nav nav"
       "sidebar main"
       "sidebar content1"
       "sidebar content2"
       "sidebar content3"
       "footer footer";
    }
}

@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";
    }
}