body{
    background-image: url(https://www.myfreetextures.com/wp-content/uploads/2014/10/IGP5374.jpg);
    background-attachment: fixed;
    background-size: cover;
    display: grid;
    /* grid-template-columns: 0.7fr 0.3fr;  */
    grid-auto-rows: minmax(5px, auto); /* should look at this later */  
    grid-template-areas: "header" "hero-image" "selection" "tour" "footer"; 
    font-family: Verdana; 
}

header{
    grid-column: 1 / 3; 
    grid-area: header;
    display: flex;
    justify-content: center;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
    font-weight: bolder;
    margin: 8px;
  }
  
  .left1{
   display:flex;
   width: 69%;
   margin: 8px;
   justify-content: center;
   border-style: dotted;
   font-size: larger;
   padding: 7px;
  }
  
  .left1 a:link, a:visited {
   text-decoration: none;
   color: black;
  }
  
  .left1 a:hover, a:active {
    text-decoration: underline;
    color: black;
  }
  
  .left2{
   display:flex;
   width: 69%;
   margin: 8px;
   justify-content: center;
   border-style: dotted;
   font-size: larger;
   padding: 7px;
  }
  
  .left2 a:link, a:visited {
   text-decoration: none;
   color: black;
  }
  
  .left2 a:hover, a:active {
    text-decoration: underline;
    color: black;
  }
  
  .right1{
   display:flex;
   width: 69%;
   margin: 8px;
   justify-content: center;
   border-style: dotted;
   font-size: larger;
   padding: 7px;
  }
  
  .right1 a:link, a:visited {
   text-decoration: none;
   color: black;
  }
  
  .right1 a:hover, a:active {
    text-decoration: underline;
    color: black;
  }
  
  .right2{
   display:flex;
   width: 69%;
   margin: 8px;
   justify-content: center;
   border-style: dotted;
   font-size: larger;
   padding: 7px;
  }
  
  .right2 a:link, a:visited {
   text-decoration: none;
   color: black;
  }
  
  .right2 a:hover, a:active {
    text-decoration: underline;
    color: black;
  }  

/* #landing{

  grid-row: 2; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
    font-weight: bolder;
    justify-content: center;
    margin: 8px;
    text-align: center;
} */

.hero-image {
  grid-area: hero-image;
  margin: 300px;
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("https://scontent-lax3-2.xx.fbcdn.net/v/t1.6435-0/p640x640/57468041_1052207834979297_494513407655936000_n.jpg?_nc_cat=100&ccb=1-3&_nc_sid=e3f864&_nc_ohc=a1AA50JGeusAX8VtBy4&_nc_ht=scontent-lax3-2.xx&tp=6&oh=ab0aa0428b93450f67762dbfe47cf05f&oe=60E870C4");
  /* Set a specific height */
  width : 50%;
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  width : 100%;
  height: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}

.hero-text button {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 10px 25px;
  color: black;
  background-color: #ddd;
  text-align: center;
  cursor: pointer;
}

.hero-text button:hover {
  background-color: #555;
  color: white;
}

#selection{
  grid-area: selection; 
  grid-row: 3; 
  background-color: red;
  margin: 8px; 
}

#tour{
    grid-area: tour; 

    grid-row: 4; 
    grid-template-columns: 0.7fr 0.3fr; 
    grid-template-rows: 0.4fr 0.6fr; 
    grid-template-areas: "map story-image" "map sidebar";
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
    display: grid; 
}

#story-image{
    grid-area: story-image; 
    /* grid-column: 1;  */
    /* position: sticky;  */
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
    max-width: 100%; 
}

#map{ /*????? */
  grid-area: map; 
  /* grid-column: 2; 
  grid-row: 1;  */
  /*position: sticky;  doesnt work*/ 
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color:rgba(255,255,255,0.75);
}

#sidebar{
  grid-area: sidebar; 
  display: grid; 
  grid-template-rows: repeat(3, minmax(0, auto-fit)); 
  overflow-y: scroll; 
} 

.story{ /* borders not showing :( */
  border-style: solid; 
  border-width: thin;
  border-color: black; 
  padding: 5px;
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 9999; /* 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: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
  z-index:9999;
}

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


/* Todo: Avoid repetitoin with individual story divs*/
/* .story1{
  background-color:rgba(255,255,255,0.75);
}

.story3{
  background-color:rgba(255,255,255,0.75);
} */



img{
    max-width: 100%; 
    max-height: 100%; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
}

.btn-group button {
  background-color: #6c9bc7; /* Green background */
  border: 1px #000000; /* Green border */
  color: white; /* White text */
  padding: 10px 24px; /* Some padding */
  cursor: pointer; /* Pointer/hand icon */
  float: left; /* Float the buttons side by side */
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  position: relative;
  z-index: 99999;
}

/* Clear floats (clearfix hack) */
.btn-group:after {
  content: "";
  clear: both;
  display: table;
}

.btn-group button:not(:last-child) {
  border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
  background-color: #4576a3;
}


#closing{

  grid-row: 8; 
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

footer{

  grid-row: 9; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
}


/* #story-buttons{
    grid-area: story-buttons; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:rgba(255,255,255,0.75);
} */