body{
    font-family:monospace;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Sky_Dusk.jpg/1600px-Sky_Dusk.jpg);
    background-size: cover;
    display:grid;
    grid-template-columns: 1fr 3fr 3fr .5fr;
    grid-template-rows: 1fr 4fr 6fr .3fr;
    grid-template-areas:
    "header header header header"
    "content map map ."
    ". side side ."
    "footer footer footer footer"
}
header{
    color: floralwhite;
    /*background-color: #fd6b90;*/
    border-radius: .5em;
    padding: .3em;
    grid-area: header;
}

footer{
    background-color: #6fd3a9;
    border-radius: .5em;
    padding: .3em;
    grid-area: footer;
}

#contents{
    border-radius: .5em;
    padding: .3em;
    grid-area: content;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
   /* grid-template-rows: repeat(20,1fr);*/
}



#map{
    border-radius: .5em;
    padding: .3em;
    height:60vh;
    width: 3fr;
    grid-area: map;
} 

#survey {
    border-radius: .5em;
    padding: .3em;
    grid-area: side;
    overflow: hidden;
    /* 16:9 aspect ratio */
    padding-top: 0%;
    position: relative;
    height: 100vh;
}

button {
    border-radius: .5em;
    color: #52734d;
    background-color:#fdad51;
    max-height: 5em;
    
}

#survey iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

@media all and (max-width:700px){
    body{
        grid-template-columns: auto;
        grid-template-rows: 20vh 60vh 10vh 100vh 10vh;
        grid-template-areas: 
            "header" 
            "map"
            "content" 
            "side" 
            "footer"
    }
    #contents{
        border-radius: .5em;
        display: block;
    }
    #map{
        height:60vh;
        padding-left:5vh;
        padding-right:5vh;
    }
    button{
        height: 3em;
    }
}