#container {
    display: grid;
    grid-template-areas:
        "header header header header"
        "section1 section2 section3 section4"
        /* "section1 section2 section3 section4"
        "section1 section2 section3 section4"
        "section1 section2 section3 section4" */
        "chicken chicken doctor doctor"
        "footer footer footer footer";
    grid-auto-rows: 120px; 
    gap: 8px;
}

body {
    background-color: rgb(91, 49, 49);
}

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

.navigationbar {
    display: flex;
    padding: 10px;
    margin-top: 5px;
}

a {
    text-decoration: none;
}

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

.section1 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: section1; 
    flex-flow: wrap;
}

.section2 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: section2;
    flex-flow: wrap;
}

.section3 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: section3;
    flex-flow: wrap;
}

.section4 {
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: section4;
    flex-flow: wrap;
}

footer {
    grid-area: footer;
    padding-bottom: 6px;
}

.underheader {
    background-color: rgb(91, 49, 49);
}


.chicken {
    grid-area: chicken;
}

.doctor {
    grid-area: doctor;
}

h1,h2 {
    color: white;
}


/* shrinking screen thing */

@media screen and (max-width: 599px) {
    #container {
        grid-template-areas:
        "header"
        "content1"
        "content2"
        "content3"
        "content4"
        "chicken"
        "footer";
    }
    
    .doctor {
        display: none;
    }

    p {
        font-size: medium;
        color: white;
    }

    .chicken {
        width: 100px;
    }

    .doctor {
        width: 60px;
    }
    
}

@media screen and (min-width: 600px) and (max-width: 1199px) {
    #container {
        grid-template-areas:
        "header header"
        "content1 content1"
        "content2 content2"
        "content3 content3"
        "content4 content4"
        "chicken doctor"
        "footer footer";

    }



    p{
        font-size: large;
        color: white;
    }

    .chicken {
        width: 200px;
    }

    .doctor {
        width: 130px;
    }
}

@media screen and (min-width: 1200px) {
    #container {
        grid-template-areas:
        "header header header header"
        "section1 section2 section3 section4"
        "section1 section2 section3 section4"
        "section1 section2 section3 section4"
        "section1 section2 section3 section4"
        "chicken chicken doctor doctor"
        "footer footer footer footer";
    }


    p {
        font-size: larger;
        color: white;
    }

    .chicken {
        width: 500px;
    }

    .doctor {
        width: 250px;
    }
}