/* styles.css 
   Project: 
   Author: 
   Date: 
*/

/*google font*/

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Montserrat:wght@300;400&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

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

body {
   background-color: black;
   font-family: 'Lato', sans-serif;
   /*font-family: 'Montserrat', sans-serif;*/
   color: white;
}

.overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  overflow-y: scroll;
  display: none;
  z-index:  10;
}
.overlay.start {
  display: block;
}
.content {
   color: black;
  width: 90%;
  margin: 10vh auto;
  background-color: white;
  padding: 5%;
  text-align: center;
}

.closer {
  position: absolute;
  right: 1vh;
  top:  1vh;
  width: 10%;
  cursor: pointer;
}

.pause_play {
   background-color: white;
   width: 5%;
   position: fixed;
   right: 0px;
   top: 0px;
   cursor: pointer;
   display: none;
   padding: 1rem;
   border-radius: 50%;
}


.header {
   width: 100vw;
   height: 100vh;
   text-align: center;
   display: grid;
   align-items: center;
}

.blackbox {
   width: 100%;
   background-color: black;
   padding: 20px 0px;
   min-height: 220vh;
   display: grid;
   align-items: center;
}


.text.middle {

   max-width: 480px;
   margin: auto;
   font-size: 1.5em;
   line-height: 1.5em;
/*   text-align: justify;*/

}

.text.left {
   width: 25%;
   margin-left: 5%;
   line-height: 1.5em;
   background-color: rgba(0,0,0,0.1);
   padding: 1%;
}

.text.right {
   width: 25%;
   margin-left: 70%;
   line-height: 1.5em;
    background-color: rgba(0,0,0,0.2);
   padding: 1%;
   margin-bottom: 200px;

}

.fullphoto {
   width: 100%;
   background-color: black;
   height: 100vh;
}


/*show this to Keith and see how we can resize the photo*/
.fit {
   width: 50%;
   margin-left: 50%;
}

.stick {
   position: sticky;
   top: 0px;
   z-index: -1;
}

.quotebox {
   display: grid;
   grid-template-columns: 2fr 3fr;
   background-color: black;
/*   border: 1px solid hotpink;*/
}

.quote {
   background-color: black;
   display: flex;
   flex-direction: column;
   text-align: center;
   justify-content: center;
   align-items: center;
   padding: 0% 13%;
   line-height: 1.3em;
}

.tall {
   justify-content: start;
/*   align-items: start;*/
   margin-top: 35vh;
}

.quote p, .convo p {
   display: none;
}

.convo {
   background-color: black;
   display: flex;
   flex-direction: column;
   text-align: center;
   align-items: center;
   padding: 0% 13%;
   line-height: 1.3em;
}

.tall-p {
   margin: 0.5em;
   padding: 0;
}

.sis {
   font-style: italic;
}

.spacer {
  padding-bottom: 50vh;
}

.space {
   z-index: 99;
/*   background: linear-gradient(to top, black, 40%, transparent);*/
   min-height: 20vh;
}

.quotepic {
   opacity: 0;
}


.appear {
   animation: appear 0.3s ease;
   opacity: 1;
}


@keyframes appear {

   0% {
      opacity: 0;
   }

   100% {
      opacity: 1;
   }

}


.disappear {
   animation: disappear 0.3s ease;
   opacity: 0;
}


@keyframes disappear {

   0% {
      opacity: 1;
   }

   100% {
      opacity: 0;
   }

}

/*
.topspace {
   margin-top: 20vh;
}*/

/*.spacer-small {
   padding-bottom: 10vh;
}*/







/*media query for responsive design */




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

   .stick {
      position: relative;
   }

   .text.left {
      width: 80%;
      margin-left: 10%;
   }

   .text.right {
      width: 80%;
      margin-left: 10%;
   }

   .quotepic {
      opacity: 1;
   }

   .appear {
      animation: appear 0s ease;
      opacity: 1;
   }

   .disappear {
      animation: disappear 0s ease;
      opacity: 1;
   }

   @keyframes disappear {

      0% {
         opacity: 1;
      }

      100% {
         opacity: 1;
      }

   }

   @keyframes appear {

      0% {
         opacity: 1;
      }

      100% {
         opacity: 1;
      }

   }

   .fit {
      width: 100%;
      margin-left: 0%;
   }


   .quotebox {
      grid-template-columns: 1fr;
   }


   .quote p {
      display: block;
   }


   .spacer {
      padding-bottom: 5vh;
   }

}