#container {
    display: grid;
    grid-template-areas:
        "header header header"
        "h11 h11 h11"
        "h21 h21 h21"
        "content1 content1 content1"
        "h22 h22 h22"
        "content2 content2 content2"
        "h23 h23 h23"
        "content3 content3 content3"
        "h24 h24 h24"
        "content4 content4 content4"
        "footer footer footer"; 
    gap: 8px;
}

body {
    background-color: black;
}

.header { 
    display: flex;
    flex-direction: row;
    align-items: center;
    grid-area: header; 
    background-color: rgb(1, 150, 1); 
}

img {
    width: 100px;
    height: 100px;
}

h1.header {
    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;
    position: absolute;
    right: 10px;
}

.nav a:hover {
  cursor: pointer;
}

.nav a {
    margin: 0 10px;
    text-decoration: none;
}

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

.h21 {
    grid-area: h21;
    background-color: rgb(1, 150, 1);
}

.h22 {
    grid-area: h22;
    background-color: rgb(1, 150, 1);
}

.h23 {
    grid-area: h23;
    background-color: rgb(1, 150, 1);
}

.h24 {
    grid-area: h24;
    background-color: rgb(1, 150, 1);
}

.content1 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content1; 
    background-color: rgb(255, 0, 0);
}

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

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

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

.footer { 
    grid-area: footer; 
    background-color: rgb(1, 150, 1); 
}

@media screen and (min-width: 601px) and (max-width: 1000px) {
    #container {
      grid-template-areas:
        "header header"
        "h11 h11"
        "h21 h21"
        "content1 content1"
        "h22 h22"
        "content2 content2"
        "h23 h23"
        "content3 content3"
        "h24 h24"
        "content4 content4"
        "footer footer";
    }

    img {
        width: 10vw;
        height: 10vh;
    }
}

@media screen and (max-width: 600px) {

    #container {
      grid-template-areas:
        "header"
        "h11"
        "h21"
        "content1"
        "h22"
        "content2"
        "h23"
        "content3"
        "h24"
        "content4"
        "footer";
    }

    .nav {
        display: none;
        flex-direction: column;
    }

    #hamburger {
        display: inline;
    }

    img {
        width: 8vw;
        height: 8vh;
    }
}

@media screen and (min-width: 1200px) {

    .content1 {
        font-size: 2vw;
    }
    
    .content2 {
        font-size: 2vw;
    }

    .content3 {
        font-size: 2vw;
    }

    .content4 {
        font-size: 2vw;
    }

    .h11 {
        font-size: 3vw;
    }

    .h21 {
        font-size: 3vw;
    }

    .h22 {
        font-size: 3vw;
    }

    .h23 {
        font-size: 3vw;
    }

    .h24 {
        font-size: 3vw;
    }

    .footer { 
        font-size: 3vw;
    }

    .nav {
        font-size: 2vw;
    }

    #head {
        font-size: 4vw;
    }
}