#container {
    display: grid;
    grid-template-areas:
    "header header header"
    "content1 content2 content3"
    "content4 content5 content5"
    "content6 content6 content7"
    "footer footer footer";
    grid-auto-rows: 120px;
    gap: 8px;
    }
    .header {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    align-items: center;
    grid-area: header;
    background-color: lightblue;
    }
    .header h1 {
    margin: 0;
    padding-left: 30px;
    }
    .nav {
    margin-left: 60%;
    width: 40%;
    display: flex;
    justify-content: space-between;
    background-color: lightyellow;
    padding: 10px;
    margin-top: 5px;
    }
    .content1 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content1;
    background-color: lightgreen;
    }
    
    .nav p {
    margin: 0 10px;
    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: rgb(0, 103, 98);
    }
    .content6 {
    grid-area: content6;
    background-color: blueviolet;
    }
    .content7 {
    grid-area: content7;
    background-color: rgb(165, 160, 254);
    }
    
    @media (max-width: 768px) {
        #container {
            grid-template-areas:
                "header"
                "content1"
                "content2"
                "content3"
                "content4"
                "content5"
                "content6"
                "content7"
                "footer";
        }
    }