* {
    box-sizing: border-box;
}

.container {
    margin: 0px;
    font-size: 1.1em;
    font-family: Arial, Helvetica, sans-serif;
    display: grid;
    grid-template-columns: 65vw 35vw; /* width of columns*/
    grid-template-rows: auto auto auto auto; /* width of rows*/
    grid-template-areas:
        "banner banner"
        "navigation navigation"
        "left right"
        "bottom bottom";
}

header, section, nav, aside, footer {
   border: solid 1px #000;
   padding: 10px;
}

.top-heading {
   grid-area: banner;
}

nav {
    grid-area: navigation;
}
nav ul {
    margin: 8px;
    padding: 0px;
}
nav li { 
    display: inline-block; 
    margin-right: 10px;
}

.content {
   grid-area: left;
   min-height: 75vh;
}

aside {
   grid-area: right;
}

footer {
   grid-area: bottom;
}

aside > section {
   margin-bottom: 10px;
   padding: 5px;
}


@media only screen and (max-width: 600px) {
    .container {
        display: grid;
        grid-template-columns: 100vw;
        grid-template-rows: auto auto 20vh;
        grid-template-areas:
           "banner"
           "left"
           "bottom";
    }
    nav, aside { 
        display: none;
    }
    header, footer {
        background-color: cadetblue;
    }
    h1, h2, h3 {
        font-size: 1.2em;
    }
}