#container {
    display: grid;
    grid-template-areas: 
    "header header header"
    "content1 content1 content2"
    "content3 content3 content4"
    "content3 content3 content7"
    "content5 content6 content7";
    border: 10px
}

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

.nav {
    margin-left: 60%;
    width: 40%;
    display: flex;
    justify-content: space-between;
    background-color: lightyellow;
    padding: 10px;
    margin-top: 5px;
}

.content1 {
    grid-area: content1;
    background-color:bisque;
}

.content2 {
    grid-area: content2;
    background-color:rgb(121, 91, 55);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content3 {
    display:flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    grid-area: content3;
    background-color:rgb(27, 141, 95);
    padding-left: 40px;
}

.content4 {
    grid-area: content4;
    background-color:rgb(43, 14, 72);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.content5 {
    grid-area: content5;
    background-color:rgb(152, 88, 88);
    display: flex;
    justify-content: center;
    align-items: center;
}

.content6 {
    grid-area: content6;
    background-color:rgb(0, 255, 47);
}

.content7 {
    grid-area: content7;
    background-color:rgb(188, 22, 188);
    display: flex;
}

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