/* styles.css 
   Project: 
   Author: 
   Date: 
	
   Helpful links: 
   	Web colors: 
   		https://en.wikipedia.org/wiki/Web_colors#X11_color_names
	Color picker tool:
		https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool
		http://colorpicker.com

*/

iframe {
   min-width: 100%;
   min-height: 100%;
}

* {
   box-sizing: border-box;
}

 img {
   display: block;
 }

 body {
   /*padding: 5%;*/
   background-color: #202040;
   padding-top: 150px;
   font-family: 'Vollkorn', serif;
   text-align: justify;
 }

 header {
   background-color:#ffbd69;
   padding: 20px;
   overflow: hidden;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }

.logo {
   border: 5px solid #023750
;
   background-color: #ffbd69;
   padding: 10px;
   font-size: 2.5em;
   /*float: center;*/
   text-align: center;
   width: 60%;
   color: #010A43;
   margin: 0 auto;
   margin-top: 1.5%;
   margin-bottom: 2%;
}

.sub {
   padding: 25px;
   font-size: 2em;
   text-align: center;
   width: 60%;
   margin: 0 auto;
   margin-top: -2%;
   margin-bottom: -7%;
   color: navajowhite;
}

.author {
   text-align: center;
   font-weight: bold;
   font-size: 1.25em;
   color: navajowhite;
   padding: 5%;
}


nav {
   /*border: 2px solid firebrick;*/
   float: right;
   background-color: navajowhite;
   border: 3px solid #ffbd69;
}

nav li {
   display: inline-block;
   margin-right: 20px;
   border-top: 12px solid #ffbd69;
   padding-top: 20px;
}

nav li:hover {
   border-top: 12px solid #202040;
}

nav li a {
   text-decoration: none;
}

section {
   /*height: 1000px*/;
   width: 90%;
   margin: 4% auto;
   border: 4px solid #ffbd69;
   padding-left: 3.5%;
   padding-right: 3.5%;
   background-color: linen;
   overflow: hidden;
}

.section1 {
   /*height: 680px;*/
}

.section3 {
   width: 85%;
   margin: auto;
}


.chartbox {
   width: 60%;
   margin: 4% auto;
   border: 4px solid #ffbd69;
   color: linen;
   padding: 20px;
   background-color: cornsilk;
   color: #123C69;
   display: block;

}

.section4 {
   /*height: 1000px;*/
}

.mapbox {
   border: solid 5px #543864;
   padding: 3%;
   width: 89%;
   margin: 5%;
   align-content: center;
   left: 4%;
   height: 750px;
}

.juxtapose {
      min-height: 750px;
   }

.section5 {
   /*height: 650px;*/
}

h3 {
   text-align: center;
}

.photo {
   border: solid 10px #202040;
   margin-left: 25%;
   margin-bottom: 2%;
   padding: 1.5%;
   width: 55.5%;
   background-color: #202040;
   
}

.photo img {
   display: block;
   width: 100%;
   margin: auto;
}

.textbox{
   top: 0px;
   left: 0px;
   height: 100vh;
   width: 100vw;
   margin: auto;
   background-color: (0,0,0,0.5);
   position: absolute;
   display: none;
   z-index: 1;
}

.result {
   position: fixed;
   top: -7%;
   left: 15%;
   height: 93%;
   z-index: -1;
   align-content: center;
   width: 70%;
   margin: 4% auto;
   padding-left: 3.5%;
   padding-right: 3.5%;
   background-color: linen;
   border: 4px solid #ffbd69;
   overflow: hidden;
}

/*.result img {
   width: 150px;
   height: auto;
   margin: auto;
   border: 4px solid darkred;
   align-content: center;
   box-shadow: 8px 5px 9px 1px #000000;
}*/
.close {
   top: -10px;
   float:right;
   border: none;
   font-size: 0.8em;
   padding: 0.5%, 0.7%;
   background-color: #202040;
   border: 3px solid #ff6363;
   color: #ffbd69;
   border-radius: 50%
   margin: 0.5%;
}

.section6{
   /*height: 2600px;*/

}

.picbox {
   margin: 2%;
   padding: 2%;
   position: relative;
   border: 3px solid #ffbd69;
   background-color: #202040;
   float: left;
}

.picbox img {
   display: block;
   width: 100%;
}

.caption {
   bottom: 0.75%;
   width: 91%;
   padding: 0.25%;
   background-color: rgba(0,0,0,0.5);
   color: linen;
   position: absolute;
   text-align: center;
   position: absolute;

}

.picboxtwo {
   margin: 2%;
   padding: 2%;
   border: 3px solid #ffbd69;
   position: relative;
   background-color: #202040;
   float: right;
   position: relative;

}

.picboxtwo img {
   display: block;
   width: 100%;
}

.captiontwo {
   bottom: 0.75%;
   width: 91%;
   padding: 0.25%;
   background-color: rgba(0,0,0,0.5);
   color: linen;
   position: absolute;
   text-align: center;
}

.method {

   width: 90%;
   margin: 4% auto;
   border: 4px solid #ffbd69;
   padding: 20px;
   background-color: navajowhite;
}

.footer {
   width: 100%;
   height: 0.1%;
   padding: 2%;
   background-color: #ffbd69;
   border: 2px solid #543864;
   font-size: 14px;
}

/*media query for responsive design */

@media only screen and (max-width: 640px) {

   header{
      display: none;
   }

   .section3 {
      height: 380px;
   }

   .mapbox{
      border: none;
   }

   .juxtapose {
      min-height: 400px;
      width: 90%;
   }


   .textbox {
         width: 80%;
       /*  top, left, bottom, right*/
         margin: 0px auto 50vh auto;
         font-size: 1.5em;
      /*   undoes text align justify to remove weird gaps in between words*/
         text-align: left;
   }

   .result {
      overflow: scroll;
      position: fixed;
      top: -2%;
      left: 15%;
      height: 93%;
      z-index: -1;
      align-content: center;
      width: 70%;
      margin: 4% auto;
      padding-left: 3.5%;
      padding-right: 3.5%;
      font-size: 0.5em;

   }

   .photo img {
      width: 100%;
      align-content: center;
   }

   .picbox {
      float: none;
   }

   .picbox img {
      float: none;
   }

    .picboxtwo {
      float: none;
   }

   .picboxtwo img {
      float: none;
   }
}

@media only screen and (max-width: 750px) {

   header {
      display: none;
   }

   .logo {
      font-size: 1.5em;
   }

   .juxtapose {
      min-height: 600px;
      min-width: 100%
   }

   .section3 {
      height: 400px;
   }

   .mapbox {
      border: none;
   }

   .photo img {
      width: 90%;
      align-content: center;
   }

   .result {
      overflow: scroll;
      position: fixed;
      top: 10%;
      left: 15%;
      height: 93%;
      z-index: -1;
      align-content: center;
      width: 70%;
      margin: 4% auto;
      padding-left: 3.5%;
      padding-right: 3.5%;
      font-size: 0.75em;

   }

   .picbox {
      float: none;
   }

   .picbox img {
      float: none;
   }

   .picboxtwo {
      float: none;
   }

   .picboxtwo img {
      float: none;
   }
}