/* Site Elements

Navigation of at least 4 menu items (use # as links)
Include at least 2 images
Include an h1
Use an h2 at the top of each paragraph
Include at least 4 paragraphs of Zombie Ipsum text
Use the attached logo
Site Requirements

3 different sizes
0 - 599 px
600 - 1199 px
1200 px and greater 
Must use grid to layout paragraphs of text
Must use flexbox to layout the navigation
Images should change size or visibility based upon size of display
Fonts should change size based upon size of display */

#container {
    display: grid;
    grid-template-areas:
        "header header header"
        "content1 content2 content3"
        "content4 content5 content6"
        "content7 content8 content9"
        "footer footer footer";
    background-color: black;
}

.nav {
    display: none;
}

.header {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#hamburger {
    display: inline-block;
    order: 2;
    margin-right: 10px;
}

.header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    grid-area: header;
    background-color: rgb(234, 60, 60);
    color: white;

    background: linear-gradient(to bottom,
            rgb(234, 60, 60) 0%,
            /* bright red top */
            rgba(137, 0, 0, 0.95) 60%,
            /* dark red mid */
            rgba(137, 0, 0, 0.75) 85%,
            /* near bottom fade */
            rgba(137, 0, 0, 0.75) 100%
            /* matches content1 */
        );
}

html {
    font-size: 14px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.1rem;
}

p {
    font-size: 0.9rem;
}

.ZombieMan1 {
    width: 180px;
}

#content4 img {
    display: none;
}

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

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

.nav {
    display: flex;
    background-color: rgb(234, 60, 60);
    padding-left: 50px;
    padding-right: 50px;
    margin-top: 5px;
    padding: 20px;
}

.nav a:hover {
    cursor: pointer;
}

.nav a {
    margin: 0 10px;
}

#content1 {
    grid-area: content1;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
}

.title1 {
    color: rgb(200, 200, 200);
}

#content2 {
    grid-area: content2;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    justify-content: center;
    align-items: center;
}

#content3 {
    grid-area: content3;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
}

#content4 {
    grid-area: content4;
    background-color: rgba(137, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
}

#content5 {
    grid-area: content5;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#content6 {
    grid-area: content6;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    justify-content: center;
    align-items: center;
}

#content7 {
    grid-area: content7;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-left: 20px;
}

#content8 {
    grid-area: content8;
    background-color: rgba(137, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    align-items: center;
}

#content9 {
    grid-area: content9;
    background-color: rgba(137, 0, 0, 0.75);
    color: rgb(157, 157, 157);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-right: 20px;
}

#footer {
    grid-area: footer;
    background-color: rgba(137, 0, 0, 0.75);
    display: flex;
    justify-content: center;
    color: rgba(162, 158, 158, 0.558);
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
    #container {
        display: grid;
        grid-template-areas:
            "header header"
            "content1 content2"
            "content3 content4"
            "content5 content6"
            "content7 content8"
            "content9 content9"
            "footer footer";
        background-color: black;
        grid-template-columns: 1fr 1fr;
    }

    .nav {
        display: none;
    }

    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #hamburger {
        display: inline-block;
        order: 2;
        margin-right: 10px;
    }

    html {
        font-size: 16px;
    }

    h1 {
        font-size: 2rem;
    }

    h2 {
        font-size: 1.25rem;
    }

    p {
        font-size: 1rem;
    }

    .ZombieMan1 {
        width: 250px;
        max-width: 80%;
    }
}

@media only screen and (max-width: 599px) {
    #container {
        display: grid;
        grid-template-areas:
            "header"
            "content1"
            "content2"
            "content3"
            "content4"
            "content5"
            "content6"
            "content7"
            "content8"
            "content9"
            "footer";
        background-color: black;
    }

    .nav {
        display: none;
    }

    .header {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    #hamburger {
        display: inline-block;
        order: 2;
        margin-right: 10px;
    }

    html {
        font-size: 18px;
    }

    h1 {
        font-size: 2.5rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    p {
        font-size: 1.1rem;
    }

    .ZombieMan1 {
        width: 350px;
        max-width: 90%;
    }

}