body{
    display: grid;
    grid-template-columns: 1fr 1fr; 
    grid-auto-rows: minmax(5px, auto);
    grid-template-areas: "header header" "intro intro" "mappanel sidebar" "survey ." "footer footer"; 
    font-family: Verdana; 
}


/* Changes bg color depending on screen width */
@media(min-width:500px){ 
    body{
        background-color: rgb(219, 255, 219); 
    }
}

@media(min-width:3000px){
    body{
        background-color: rgb(100, 77, 255) 
    }
}

footer{
    grid-area:footer; 
}
header{
    grid-area: header;
}

#intro{
    grid-area: intro; 
}

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

#contents
{
    grid-area: sidebar; 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas: "northernhemisphere southernhemisphere";
}

#northernhemisphere
{
    text-align: center; 
    grid-area: northernhemisphere; 
    display: grid; 
    grid-template-rows: repeat(auto, 1fr); 
}

#southernhemisphere
{
    text-align: center; 
    grid-area: southernhemisphere; 
    display: grid; 
    grid-template-rows: repeat(auto, 1fr); 
}



/* fix for survey to fit in the iframe */
#survey {
    
    overflow: hidden;
    /* 16:9 aspect ratio */
    padding-top: 0%;
    position: relative;
}

#survey iframe {
    grid-area: survey; 
   /* grid-column-start: -1; 
   grid-column-end: -1;  */

   border: 0;
   height: 50 vh;
   left: 0;
   position: relative;
   top: 0;
   width: 100%;
}