@import url(//fonts.googleapis.com/css?family=Roboto);
body{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-rows: 0.1fr 1fr .1fr; 
    grid-template-areas: "icon header header" 
                "contentpanel  mappanel mappanel" 
                        ". returnbutton ."
                    ". footer .";
                    background-image: url(https://image.freepik.com/free-vector/stylish-hexagonal-line-pattern-background_1017-19742.jpg);
                    background-size: 300px;

}

#returnbutton {
    grid-area: returnbutton;
    margin-top: auto;
    margin-bottom: auto;
    margin-left: auto;
    margin-right: auto;
    
}

#map{
    height:90vh;
   
    grid-area: mappanel;
} 


#icon{
    grid-area: icon;
    max-height: 100px;
    max-width: 100px;
    margin-left: auto;
  margin-right: auto;
}
#survey {
    grid-area: survey;
    overflow: hidden;
    /* 16:9 aspect ratio */
    padding-top: 0%;
    position: relative;
}

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

#contents{
    grid-area: contentpanel;
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    
}

header{
    grid-area: header;
    font-family: "Roboto", Bold, sans-serif;
    font-size: xxx-large;
    font-weight: bold;
    margin-left: auto;
    margin-right: auto;
    
}
footer{
    grid-area: footer;
    font-family: "Roboto", Bold, sans-serif;
    font-weight: italic;
}

img{
    max-width: 100%;
    max-height: 100%;
    display: block; /* remove extra space below image */
}