body{
    background-color: rgb(63, 63, 63)
}

#container {
    display: grid;
    grid-template-areas:
        "header header header"
        "content1 content1 content1" 
        "content2 content2 content2"
        "content3 content3 content3"
        "content4 content4 content4"
        "content5 content5 content5"
        "footer footer footer";
    grid-auto-rows: auto; 
    gap: 8px;
    background-color:gray;
}

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

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

#zombie {
    display: block;
    max-width: 150px;
    width: 100%;
    height: auto;
    cursor: pointer;
}

.nav {
    display: inline-flex;
    background-color: rgb(255, 0, 0);
    margin-top: 5px;
    margin-right: 15px;
}

.nav p:hover {
  cursor: pointer;
}

.nav p {
    margin: 0 10px;
}

a:link{
    color: white;
}

a:visited{
    color:black;
}

ul{
    list-style-type: none;
}

ul li{
    float: left;
}

Ul li a{
    display: flex;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

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

.content2 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content2; 
    background-color: rgb(0, 0, 0); 
    color: white;
    padding: 15px;
}

.content3 { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: content3; 
    background-color: rgb(0, 0, 0); 
    color:white;
    padding:15px;
}

.content4 { 
    display: flex;
    justify-content:center;
    align-items: center;
    grid-area: content4; 
    background-color: rgb(0, 0, 0);
    color: white;
    padding: 15px; 
} 

.content5{
    display:flex;
    justify-content: center;
    grid-area: content5;
    background-color: rgb(0,0,0);
    padding: 15px;
    gap: 15px;
}

.content5 img{
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;

}

img{
    border-style: solid;
    border-width: 5px;
    border-color: red;
    border-radius: 15px;
}

.footer { 
    display: flex;
    justify-content: center;
    align-items: center;
    grid-area: footer; 
    background-color: rgb(0, 0, 0); 
    color: white;
    padding:15px;
}

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

    #container{
        grid-template-areas:
        "header header"
        "content1 content1"
        "content2 content2"
        "content3 content3"
        "content4 content4"
        "footer footer"
    }

    .content1{
        font-size: 14px;
    }

    .content2{
        font-size: 14px;
    }

    .content3{
        font-size: 14px;
    }

    .content4{
        font-size: 14px;
    }

    .content5{
        display: none;
    }

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

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

    .content1, .content2, .content3, .content4{
        font-size: 16px
    }
}

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

    #container{
        grid-template-areas:
        "header"
        "content1"
        "content3"
        "content2"
        "content4"
        "content5"
        "footer";
    }

    .content1, .content2, .content3, .content4{
        font-size: 18px
    }

}