#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 {
    background-color: lightgreen;
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: header;
    align-self: center;
}

.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: lightblue;
}

.Content2 {
    grid-area: content2;
    background-color: rgb(52, 197, 255);
}

.Content3 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content3;
    background-color: rgba(136, 183, 148, 0.31);
}

.Content4 {
    grid-area: content4;
    background-color: rgb(148, 47, 47);
}

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

.Content6 {
    grid-area: content6;
    background-color: rgb(13, 162, 50);
}

.Content7 {
    grid-area: content7;
    background-color: rgb(5, 109, 127);
}

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