body{
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5cm;
}

#site_wrap{
    background-image: linear-gradient( #96d2ff , white 50%);
    height:100vh;
    display:grid;
    grid-template-columns:
        1fr
        repeat(4,minmax(0,272px))
        1fr
    ;
    grid-gap:1px;
    grid-template-rows:
        94px
        137px
        153px
        206px
        385px
        1fr
    ;
    grid-template-areas: 
        ". header header header header ."
        "gif gif gif gif gif gif"
        ". title title title title ."
        ". body body body body ."
        ". content content content content ."
        "footer footer footer footer footer footer"
    ;

}

.header{
    
    grid-area:header;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header .logo{
    width:80px;
}

.header .nav{
    list-style: none;
    padding: 0;
    display: flex;
}

.header .nav a{
    text-decoration: none;
    border: 2px solid #b38746;
    border-radius:50em ;
    color: #b38746;
    background-color: white;
    padding: 15px 30px;
    margin: 0 4px;
    text-transform: uppercase;
    font-weight: bold;
    display: inline-block;
}

.header .nav a:hover, .header .nav .active{
    background-color: #ffd596;
}

.gif{
    background-image: url(pictures/GIF.gif);
    grid-area:gif;
    background-size: cover;
    background-position: 0%;
    
    
}

.title{
    background-color: white;
    background-image: linear-gradient(white, #ffd596);
    text-align: center; 
    color: #b38746;
    font-family: bradley hand, cursive;
    font-size:xx-large;
    border: 5px solid #b38746;
    
    grid-area:title
    
}

.body{
    background-color: #96d2ff;
    background-image: linear-gradient(#ffd596, white);
    text-align: center;
    color: #b38746;
    font-family: bradley hand, cursive;
    
    font-size:x-large;
    
    grid-area:body
    
}

.content{
    grid-area: content;
    display: flex;  
    
}

.content img{
    margin: 2em 8px 2em 8px;
     
}


.footer{
    background-color:white;
    color: black;
    text-align: center;
    padding-top: 2em;
    grid-area:footer
}

@media screen and (max-width:480px){
    #site_wrap{
        grid-template-rows:
        min-content
        137px
        153px
        206px
        385px
        1fr
    ;
        grid-template-areas: 
            "header header header header header header"
            "gif gif gif gif gif gif"
            "title title title title title title"
            "body body body body body body"
            "content content content content content content"
            "footer footer footer footer footer footer"
    } 
    .header .nav{
        list-style: none;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .header .nav a{
        margin: .5em;
    }
    
    .content{
        
        flex-direction: column;
    }
}