body{
    font-family:monospace;
    background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Sky_Dusk.jpg/1600px-Sky_Dusk.jpg);
    background-attachment: fixed;
    background-size: cover;
    display:grid;
    grid-template-columns: 1fr 3fr 3fr .5fr;
    grid-template-rows: 1fr auto 4fr .3fr;
    grid-template-areas:
    "header header header ."
    "content map map ."
    ". side side ."
    "footer footer footer footer";
    grid-gap:10px;

}
header{
    color: floralwhite;
    border-radius: .5em;
    grid-area: header;
    text-shadow: 2px 2px forestgreen;
    letter-spacing: .3rem;
    text-align:justify;
    padding-left:3em;
}

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

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



#map{
    border-radius: .5em;
    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;
    font-weight:bolder;
    letter-spacing: .3rem;

}

#survey iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}
@media all and (min-width: 701px){

    button{
        transition: height 2s;
        letter-spacing: .3rem;
    }
    button:hover{
        background-color: rgba(182, 46, 153, 0);
        color:rgb(234, 0, 255);
        font-stretch: extra-expanded;
        font-style: italic;
        height: 7em;
    }
}

@media all and (max-width:700px){
    body{
        grid-template-columns: 95% 5%;
        grid-template-rows:none;
        grid-auto-rows: minmax(10px,auto);
        grid-template-areas: 
            "header ." 
            "map ."
            "content ." 
            "side ." 
            "footer .";
        gap: 40px;
    }
    #contents{
        border-radius: .5em;
    }
    #map{
        height:60vh;
    ]
    button{
        height: 3em;
    }
    button:active {
        background-color: rgba(182, 46, 153, 0);
        color:rgb(234, 0, 255);
        font-style: italic;
    }
}