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

*/

* {
   box-sizing: border-box;
}

a {
  text-decoration: none;
  color: indianred;
}

a:hover, a:active {
  color: #5E7F66;
} 


img, video{
   width: 100%;
   display: block;
}

body{
   background-color: rgba(64,53,39,0.9);
   font-family: 'Playfair Display', serif;
   /*font-family: 'Montserrat', sans-serif;*/
   padding: 15%;
   padding-top: 10%;
   color: wheat;
   background-image: url("../img/back1.png");
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   background-attachment: fixed;
/*   opacity: 90%;*/
}

.diff{
   background-image: url("../img/backgroundpic5.jpg");
   background-size: cover;
}

/*all the background-xx is for the background img*/

.enterpage{
   width: 100%;
/*   height: 100%;*/
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: black;
   overflow-y: scroll;
   z-index: 1;
/*   display: none;*/
}

.header img{
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -1;
  background-color: black;
}

.entertxt{
  position: absolute;
  width: 100%;
  top: 20%;
  color: white;
  text-align: center;
  padding: 3%;
}

.entertxt h1{
  font-size: 6em;
  margin-bottom: -4px;
}

.entertxt h3{
   color: #443627;
  margin-top: 2%;
  font-size: 2.2em;
  font-style: italic;
}

.enterbtn{
   position: absolute;
   align-content: center;
   left: 42%;
   width: 250px;
   text-align: center;
   border-radius: 20px;
}

h1{
   color: #443627;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}

h2{
   color: #443627;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
}

h3{
   color: #443627;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 0;
}

h6{
   color: #443627;
   text-align: center;
   padding-bottom: 0; 
   display: flex;
   align-items: center;
   justify-content: center;
}

.script{
   max-width: 640px;
  margin: auto;
  color: #4A3728;
  font-size: 1.2em;
  line-height: 1.7em;
  text-align: justify;
/*  font-size: 1.4em;
  font-weight: 300;
  line-height: 1.8em;*/
  padding: 1%;
}


.audio{
   width: 100%;
   padding: 2%;
   min-height: 180px;
   max-height: 400px;
   border: 3px solid black;
   background-color: #cbc8b2;
}

.audio h4{
  text-align: center;

}

.audio audio{
   width: 100%;
}

audio:hover {transform: scale(1.1);filter: drop-shadow(2px 3px 3px #333);}

.container{
   background-color: rgba(250,235,215,0.9);
   color: black;
   width: 85%;
/*   height: 100vh;*/
   padding: 5%;
   margin: auto;
   overflow:  hidden;
}

.overlay{
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
   display:  none;
   overflow-y: scroll;
}

/*.overlay.first{
   display: block;
}
*/

/*this will be for the opening overlay*/

.storyhead{
   width: 100%;
}

.storyhead p{
   font-size: 0.6em;
   text-align: right;
   line-height: 1em;
}

.storyhead img{
   width: 100%;
   border: 3px solid black;
   padding: 5px;
}

.storyheadvid{
   width: 100%;
}

.storyhead video{
   width: 100%;
   display: block;
   object-fit: cover;
   margin: auto;
   border: 3px solid black;
   padding: 5px;
}


.timelinebtn button{
   position: absolute;
   bottom: 0px;
   left: 0px;
   font-size: 1.4em;
/*   border-radius: 20px;*/
   cursor: pointer;
}

.mapcontainer{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   width: 100%;
}

.map{
   padding: 10%;
   border: 3px solid black;
}

.heads{
   padding-bottom:  0;
}

.timelinedeets{
   margin: 20vh 10%;
   width:  80%;
   border: 3px solid wheat;
   padding: 2%;
   background-color: rgba(253,245,230,0.9);
   text-align: center;
   align-items: center;
   justify-content: center;
}

.timelinedeets img{
   width: 100%;
   border: 3px solid black;
   margin: auto;
}

.photobox{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 10px;
   margin: 5%;
}

.photobox2{
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-gap: 25px;
   margin: 5%;
}

.hiddenwellbox{
   padding: 5%;
   background-color: whitesmoke;
   border: 3px solid lightgrey;
   cursor: pointer;
}

.hiddenwellbox img{
   width: 100%;
   object-fit: cover;
   border: 3px solid #36454F;
}

.timelinepic{
   padding: 40px;
   object-fit: cover;
   background-color: whitesmoke;
   border: 3px solid black;
   cursor: pointer;
}

.timelinepic img {
   width: 100%;
   padding: 5px;
}

.timelinehead{
   position:  relative;
   width: 80%;
   margin: auto;
}

.Photocap{
   position: absolute;
   bottom: -20px;
   right: 0;
   font-size: 0.7em;
}

.caption{
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 10px;
}

.polaroidoverlay{
   position: fixed;
   top: 0px;
   left: 0px;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
   display:  none;
   overflow-y: scroll;
}

.polaroidmodal{
   border: 5px solid white;
   width: 90%;
   transform: translate(-50%, -50%);
   left: 50%;
   top: 50%;
   position: relative;
}

.polaroidcontent{
   display: grid;
   grid-template-columns: 1fr 1fr;
   width: 100%;
   background-color: oldlace;
}

.polaroidphoto{
   width: 100%;
}

.polaroidphoto img{
   width: 100%;
}

.polaroidcaption{
   padding-top: 8%;
   padding-right: 4%;
   padding-bottom: 0;
   padding-left: 8%;
   width: 100%;
   line-height: 1.5;
}

.closer{
/*   background-color: darkgrey;*/
   width: 5%;
   cursor: pointer;
   right: 0;
   top: 0;
   position: absolute;
   box-sizing: border-box;
   transition: all 1s ease;
   display: block;
}


.rotate{
   animation: rotate 3s 1 forwards;
   transform-origin: 0% 0%;
}

.rotateback{
   animation: rotateback 3s 1 forwards;
   transform-origin: 100% 100%;
}

.waitBeforeNavigate{
/*   margin-left: 80%;*/
}

.shin{
   display:  grid;
   grid-template-columns: 1fr 1fr 1fr;
}

.turn{
   background-color: whitesmoke;
   padding: 1%;
   border: 3px black;
/*   width: 25%;*/
/*   min-width: 50px;*/
   text-align: center;
}

.back{
   padding: 3%;
/*   width: 33%;*/
}

.first{
   background-color: rgba(250,235,215,0.1);
}

.next{
   padding: 3%;
}

.last{
   background-color: rgba(250,235,215,0.1);
}





footer {
  background-color: lightgray;
  color: #443627;
  padding: 1%;
  text-align: right;
  align-items: center;
  justify-content: center;
  width: 85%;
  margin: auto;
}

@keyframes rotate {
   0% {
      transform: rotateY(0deg);
   }

   100% {
      transform: rotateY(-90deg);    
   }
}

@keyframes rotateback {
   0% {
      transform: rotateY(0deg);
   }

   100% {
      transform: rotateY(90deg);    
   }
}





/*media query for responsive design */

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

   .container, footer{
      width: 95%;
   }

   .header img{
      width: 300%;
      height: 100%;
      z-index: -1;
   }

   .enterpage{
      overflow-y: scroll;
      z-index: 1;
   }

   .entertxt{
      bottom: 20%;
      font-size: 0.7em;
      position: fixed;
      text-align: center;
/*      display: flex;*/
      align-items: center;
      justify-content: center;
   }

   .entertxt h1{
      margin: 0.5em;
   }

   .enterbtn{
      position: absolute;
/*      align-content: center;*/
      left: 20%;
/*      width: 200px;*/
      text-align: center;
      border-radius: 20px;
   }
   .wide {
      display: none;
   }


}