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

 :root {
     /* varialbles for frequent use */
     --cl-bglight: #81e7df;
     --cl-bgdark:  #076353;
     --fs-standard: 16px;
     --fs-headline1: 48px;
     --fs-headline2: 38px;
 }

 body {
     background-color: var(--cl-bglight);
 }

 header{
     background-color: var(--cl-bgdark);
     height: 100px;
     padding: 10px;
 }

 header .logo {
     width: 100%;
     height: 80px;
     background-color: rgba(28, 128, 66, 0.7);
 }

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

 aside {
    background-color: rgb(69, 156, 130);
    flex-grow: 1;
    flex-basis: 50%;
    text-align: center;
 }

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

 nav a:last-child {
     display: none;
 }

 article {
     background-color: rgb(206, 255, 221);
     flex-grow: 1;
     flex-basis: 65%;
     padding: 15px;
 }

 article img {
     width: 100%;
     float: none;
     margin-right: 0px;
     margin-bottom: 20px;
 }

article h2 {
    font-size: var(--fs-headline2)
}

article p {
    font-size: var(--fs-standard);
    margin-top: 10px;
    margin-bottom: 16px;
    line-height: 1.5;
}

 /* styles for wide screens */
 @media screen and (min-width: 750px) {
    header .logo {
        width: 300px;
    } 


    aside {
        flex-grow: 0;
        flex-basis: 250px;
     }
    
     nav a {
        width: 80%;
     }

     nav a:last-child {
         display: inline-block;
     }

     article img {
        width: 300px;
        float: left;
        margin-right: 15px;
        margin-bottom: 5px;
    }
 }