#container {
    display: grid;
    grid-template-areas:
        "header header header"
        "content1 content2 content3"
        "content4 content5 content3"
        "content6 content6 content7"
        "footer footer footer";
    grid-auto-rows: 120px; 
    gap: 8px;
}

.header { 
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-area: header; 
    background-color: lightblue; 
}

.header h1 {
    margin: 0;
    padding-left: 30px;
}

#hamburger {
    display: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
}

.nav {
    display: flex;
    background-color: lightyellow;
    padding: 10px;
    margin-top: 5px;
}

.nav p:hover {
  cursor: pointer;
}

.nav p {
    margin: 0 10px;
}

.content1 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content1; 
    background-color: lightgreen; 
}

.content2 { 
    grid-area: content2; 
    background-color: lightcoral; 
}

.content3 { 
    grid-area: content3; 
    background-color: lightgoldenrodyellow; 
}

.content4 { 
    grid-area: content4; 
    background-color: lightpink; 
}

.content5 { 
    grid-area: content5; 
    background-color: lightseagreen; 
}   

.content6 { 
    grid-area: content6; 
    background-color: lightgray; 
}   

.content7 { 
    grid-area: content7; 
    background-color: lightcyan; 
}

.footer { 
    grid-area: footer; 
    background-color: lightsteelblue; 
}
@media screen and (min-width: 601px) and (max-width: 1000px){
    #container{
        grid-template-areas: "header header"
        "content1 content3"
        "content2 content3"
        "content4 content5"
        "content6 content7"
        "footer footer";
    }
}
@media screen and (max-width: 600px) {
    .nav{
        display: none;
        flex-direction: column;
    }
    #hamburger{
        display: inline;
    }
    #container{
        grid-template-areas: 
        "header"
        "content1"
        "content2"
        "content4"
        "content5"
        "content6"
        "content7"
        "footer";
    }
    .content3 {
        display: none;
    }
}