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

:root {
    /* varialbles for frequent use */
    --cl-bghead:    #0b9b1e;
    --cl-bgnav:     rgb(255, 242, 199);
    --cl-bgarticle: rgb(0, 225, 255);
    --cl-bgaside:   rgb(255, 216, 131);
    --cl-bgaside2:  rgb(255, 184, 31);
    --cl-bgfoot:    #0a6320;
}

header {
    height:100px;
    background-color: var(--cl-bghead);
}

.navigation {
    background-color: var(--cl-bgnav);
    height: 100px;
    width: 100vw;
}

#mainbody {
    display: flex;
    flex-flow: row wrap;
    min-height: calc(100vh - 200px)
}

article {
    display: flex;
    background-color: var(--cl-bgarticle);
    height: calc(100vh - 300px);
    width: 100vw;
}




aside {
    width: 100%;
    height: 50vh;
    display: flex;
}

.aside1 {
    display: flex;
    background-color: var(--cl-bgaside);
    width: 100%;
    height: 50vh;
}

.aside2 {
    display: flex;
    background-color: var(--cl-bgaside2);
    width: 100%;
    height: 50vh;
}

footer {
    height: 100px;
    background-color: var(--cl-bgfoot);
    width:100%;
}

nav a {
    display:inline-block;
    width: 15%; height: 45px;
    background-color: rgba(0, 0, 0, .4);
    margin: 10px;
    justify-content: center;
}

nav a:nth-last-child(-n+3) {
    display: none;
}




 @media screen and (min-width: 750px) {
    .navigation {
        width: 20%;
        height:calc(100vh - 200px);
    }
    
    article {
        width: 80%;
        height:calc(100vh - 200px);
    }
    aside {
        width: 100%;
        height: 50vh;
        display: flex;
    }
    
    .aside1 {
        width: 50%;
    }
    
    .aside2 {
        width: 50%;
    }

    nav a {
        width: 80%;
     }

     nav a:nth-last-child(-n+3) {
        display: inline-block;


    }
 }