@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: "header selectfilter selectfilter icon" 
                "contentpanel  mappanel mappanel mappanel" 
                        ". . . ."
                    "storypanel footer . .";
                    background-image: url(https://image.freepik.com/free-vector/stylish-hexagonal-line-pattern-background_1017-19742.jpg);
                    background-size: 300px;

}

#window {
  
    min-height:200%;
   
    min-width: 110%;
    margin: 0;
    padding: 0; 
}

#selectfilter {
    grid-area: selectfilter;
    min-height: 400px;
    min-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

select{
    justify-self: start;
}


select,#select_label{
	color: #641010;
	/* padding: 8px 16px; */
    background: #fdaeae;
	border: 10px solid transparent;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	user-select: none;
}

#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(1, 1fr);
    height:90vh;
    grid-auto-rows: 200px;
    overflow-y:scroll; /* adds a vertical scroll-bar to this div */
}

#stories{
    grid-area: storypanel;
    display:grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 100px;
    overflow-y:scroll; /* adds a vertical scroll-bar to this div */
}

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 */
}

a {
    font-family: "Roboto", Bold, sans-serif;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.3rem;
    color: rgb(14, 72, 119);
}

a:hover {
    color: rgb(79, 80, 85);
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

  /* Modal Content/Box */
  .modal-content {
    background-color: #fefefe;
    margin: 12% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 60%; /* Could be more or less, depending on screen size */
    text-align: center;
    font-family: "Roboto", Bold, sans-serif;
    border-radius: 20px;

  }

  /* The Close Button */
  .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
  }

  .close:hover,
  .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
  }

  .txt {
      font-size: 1.2rem;
  }

  .info {
      font-style: italic;
      font-weight: bold;
  }

  .goals {
      margin: 3rem;
  }

  .btn {
    margin: 1rem;
    background-color: #04068f;
    border: none;
    color: white;
    padding: 16px 32px;
    text-align: center;
    font-size: 16px;
    opacity: 1;
    transition: 0.3s;
    border-radius: 5px;
  }

  .btn:hover {opacity: 0.7}