#container {
    display: grid;
    grid-template-areas:
    "header header header header"
    "content1 content1 content1 content1"
    "content1 content1 content1 content1"
    "content2 content3 content4 content5"
    "content2 content3 content4 content5"
    "content2 content3 content4 content5"
    "content2 content3 content4 content5"
    "content2 content3 content4 content5"
    "content2 content3 content4 content5"
    "footer footer footer footer";
    grid-auto-rows: 120px;    
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    float: center;
    margin-left: 10%;
    margin-right: 10%;
    border: 1px solid black;
}
.header{
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    justify-content: center;
    grid-area: header;
    background-color: red;
    border: 1px solid black;
    font-family: 'Roboto';
}
.content1{
    display: flex;
    justify-content: center;
    grid-area: content1;
    background-color: orange;
    border: 1px solid black;
}
.content2{
    display: flex;
    justify-content: center;
    grid-area: content2;
    background-color: yellow;
    border: 1px solid black;
}
.content3{
    display: flex;
    justify-content: center;
    grid-area: content3;
    background-color: lime;
    border: 1px solid black;
}
.content4{
    display: flex;
    justify-content: center;
    grid-area: content4;
    background-color: aqua;
    border: 1px solid black;
}
.content5{
    display: flex;
    justify-content: center;
    grid-area: content5;
    background-color: cornflowerblue;
    border: 1px solid black;
}
.footer{
    display: flex;
    grid-area: footer;
    background-color: grey;
    border: 1px solid black;
    justify-content: center;
}
body{
    background-image: -moz-linear-gradient( blue, cornflowerblue, white);
}

.content2, .content3, .content4, .content5, p{
    font-family: myFirstFont;
    font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

@font-face {
    font-family: myFirstFont;
    src: url("../Roboto-VariableFont_wdth\,wght.ttf") format("truetype");
}



.content2, .content3, .content4, .content5, p{
  font-family: "myFirstFont";
  font-weight: 400;
  font-size: larger;
  padding: 10px;
}
.footer{
  font-family: "myFirstFont";
  font-weight: 400;
  font-size: small;
  padding: 10px;
  color: aliceblue;
}



.header{
  font-family: "DM Serif Text", serif;
  font-weight: 400;
  font-style: normal;
}




@media screen and (max-width:600px){
    #container{
        grid-template-areas: 
        "header"
        "content1"
        "content2"
        "content3"
        "content4"
        "content5"
        "content6"
        "content7"
        "footer";
    }
}


.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-rows: 100px;
  padding: 5px;
}