/* 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');
@import url('https://fonts.googleapis.com/css2?family=Platypi:ital,wght@0,300..800;1,300..800&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');



/*main css*/


* {
   box-sizing: border-box;
}

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

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

.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;
}

.background {
   position: sticky;
   position: -webkit-sticky;
   top: 0px;
   z-index: -1;
   height: 100vh;
}

.background img {
   height: 100%;
   object-fit: cover;
   object-position: 50% top;
}

.headline {
   text-align: center;
   font-size: 3em;
   background-color: rgba(255, 255, 255, 0.6);
   width: 80%; 
   margin: auto;
   border-radius: 20px;
   color: #990000; 
   text-shadow: 2px 2px 2px black;
   padding: 1px;           
}

.headline p {
   color: #FFCC00; 
   text-shadow: 2px 2px 2px black;  
}

.introtext {
   text-align: center;
   font-size: 3em;
   margin: 50vh auto 100vh auto;
   width: 80%;
   background-color: rgba(255, 255, 255, 0.6);
   padding: 10px;
   border-radius: 20px;
}

.intrograph {
   width: 80%;
   margin: 25vh auto 25vh auto;
}

.bigstat {
   font-size: 2em;
   color: #990000;
}

.sidebyside {
   display: grid;
   grid-template-columns: 1fr 1fr;
   min-height: 100vh;
}

.sidepic {
   height: 100vh;
   position: sticky;
   position: -webkit-sticky;
   top: 0px; 
   z-index: -1;  
}

.sidepic img {
   height: 100%;
   object-fit: cover;
}

.flipped {
   direction: rtl;
}

.sidetext {
   padding: 20px 50px;
   font-size: 1.5em;
   direction: ltr;
   background-color: white;
}

.bigbreak {
   padding: 10vh 10vw 5vh 10vw;
   background-color: #990000;
   position: relative;
}

.littleblurb {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   font-size: 2em;

}

.littleblurb h2 {
   background-color: rgba(255, 255, 255, 0.6);
   padding: 10px;
}

.bigbreak.next {
   padding-top: 0vh;
}


.whitebox {
   background-color: white;
   font-size: 1.5em;
   padding: 1% 5%;
}

.footer {
   background-color: black;
   color: white;
   padding: 20px;
   text-align: right;
}




/*media query for responsive design */

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

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

   .sidetext {
      background-color: rgba(255,255,255,0.6);
   }


}