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

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

* {
   box-sizing: border-box;
}

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

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

p {
  line-height: 1.4;
  font-size: 1.1em;
  text-align: justify;
}

a {
  Color: yellow;
}

header {
  position: sticky;
  top: 0;
  left: 0;
  /*border: solid 3px pink;*/
  background-color: rgba(0,0,0,.7);
  z-index: -3;
  height: 100vh;
  width: 100vw;
  /*-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));*/
  
}

img {
  display: block;
}
.toppix img{
  background: linear-gradient(rgba(0,0,0,1), rgba(0,0,0,0),rgba(0,0,0,1));
}
.top {
  /*border: 2px solid orange;*/
  width: 100%;
  position: sticky;
  top: 0;
  z-index: -10;
  /*background-color: black;*/
  /*overflow: hidden;*/
  /*opacity: .5;*/
  margin: auto;
  height: 100vh;
}

.top video {
  height: 100%;
  width: 100%;
  object-fit: cover;
  -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, 
    from(rgba(0,0,0,.9)), to(rgba(234, 221, 202,0)));
*/}

video {
   width: 100vw; 
}

.title1 {
  width: 100%;
  /*top: 20%;*/
  color: white;
  text-align: center;
  padding: 3%;
  z-index: 10;
}

.mainhed h1 {
  width: 500px;
  position: absolute;
  font-size: 4.6em;
  bottom: 30%;
  right: 10%;
  color: #ffe000;
  font-style: italic;
  text-align: right;
}

.subhed h2{
  width: 500px;
  position: absolute;
  bottom: 20%;
  right: 10%;
  text-align: right;
}
.subhed h3{
  width: 500px;
  position: absolute;
  bottom: 5%;
  right: 10%;
  text-align: right;
}
.toppix {
  display: none;
  position: sticky;
  top: 0;
  left: 0;
  z-index: -2;
  height:100vh;
  /*border: 10px solid red;*/
}

.toppix img {
  width: 100%;
}

/*.section1 img {
  position: sticky;
  top: 0;
  width: 100vw;
  object-fit: cover;
  height: 100vh;
  z-index: -3;

}*/


.section1 {
  /*display: none;*/
  color: white;
  z-index: 11;
  margin-top: 300px;
}



.textbox {
   background-color: rgba(0, 0, 0, .8);
   border: 2px solid yellow;
   width: 40%;
   padding: 40px 60px;
   margin-left: 10%;
   /*margin-top: 200px;*/
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
 }

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10%
 }
.textbox1 {
   background-color: rgba(0, 0, 0, .8);
   border: 2px solid yellow;
   width: 90%;
   padding: 60px 40px;
   margin-right: 100px;
   margin-top: 500px;
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
 }

.grafs {
  background-color: rgba(0, 0, 0, .8);
   border: 2px solid yellow;
   width: 90%;
   height: 600px;
   padding: 50px 50px;
   margin-left: 10%;
   margin-top: 500px;
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
   color: white;
 }

 .grafs h2 {
  color: yellow;
  font-family: 'arial';
  text-align: center;
  font-size: 1.5em;
 }

 .grafs img{
  width: 100%;
 }

 .textbox2 {
   background-color: rgba(0, 0, 0, .8);
   border: 2px solid yellow;
   width: 40%;
   padding: 40px 60px;
   margin-left: 10%;
   margin-top: 500px;
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
   color: white;
 }


 .extra {
  width: 100%;
  height:500px;
  background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1));
 }

 .video {
  width: 100%;
  background-color: black;
  /*background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1),rgba(0,0,0,1));*/
  padding: 10% 8% 10% 10%;
  margin: auto;
 }

 .video video {
    width: 95%;
    /*margin: auto;*/
 }

.section2{
  width: 100vw;
  background-color: black;

}


/*.section2 img {
  width: 60%;
  margin: auto;
  margin-bottom: -50px;
}*/

.text2 {
  width: 50%;
  margin: auto;
  padding-top: 100px;
  color: white;
  padding-bottom: 50px;
  /*height: 100vh;*/
}

.section2 h2 {
  color: yellow;
  font-family: 'arial';
  text-align: center;
  font-size: 2.5em;
}

.section3 h2{
  color: yellow;
  font-family: 'arial';
  text-align: center;
  font-size: 2.5em;
}
.audio {
  border: 3px solid yellow;
  width: 60%;
  color: black;
  margin: auto;
  padding-top: 2%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 2%;
}

.audio p {
  color: white;
}
.audio h2 {
  color: yellow;
  font-family: 'arial';
  text-align: center;
  font-size: 2.5em;
  margin-bottom: 30px;
}

audio {
width: 100%;
margin: auto;
}


.section3 {
  z-index:-2;
  background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,.7), 
  rgba(0,0,0,1));
}

.section3 img {
  position: sticky;
  top: 0;
  width: 100vw;
  object-fit: cover;
  height: 100vh;
   z-index: -3;
}

.photo {
  position:relative;
  width: 70vw;
  margin: auto;

}
.photo img {
  max-width: 100%;
  margin: auto;
  z-index: 1;
  /*margin-bottom: 50px;*/
}

.cappp {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  background-color: rgba(0,0,0,.6);
  z-index: 10;
  margin: auto;

}
.cappp p {
  font-family: 'Arial';
  font-size: .8em;
  line-height: 1.2em;
  text-align: center;
  color: white;

}

.text3{
  width:50%;
  color: white;
  margin: auto;
  padding-bottom: 50px;
}


.section5 {
  z-index:-2;
  background: linear-gradient(rgba(0,0,0,1),rgba(0,0,0,.5));
}

.section5 h2 {
  color: yellow;
  font-family: 'arial';
  text-align: center;
  font-size: 2.5em;
}
.section5 img {
  position: sticky;
  top: 0;
  width: 100vw;
  object-fit: cover;
  height: 100vh;
   z-index: -3;
}


.barchart {
  border: 3px solid yellow;
  padding: 0%;
  width: 80%;
  margin: auto;
  z-index: 10;
  margin-bottom: 400px;
  object-fit: cover;
}
.barchart img {
  width: 100%;
  z-index: 10;
  margin: auto;
}
.text5 {
  width:50%;
  color: white;
  margin: auto;
  margin-top: -300px;
  padding-bottom: 50px;
}


footer {
 height:50px;
  position: relative;
  top:-20px;
  background-color: rgba(0,0,0,.3);
  color: white;
  padding: 1%;
}

footer p {
  text-align: right;
  padding-right: 20px;
}
/*media query for responsive design */

@media only screen and (max-width: 900px) {
    .barchart {
width: 100%;
  margin: auto;
  margin-bottom: 50%;
}

.barchart img {
  width: 100%;
}

}

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

  .textbox  {
    width: 95%;
    padding:5%;
    margin: auto;
   /*margin-top: 200px;*/
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
  }

    .barchart {
width: 100%;
  margin: auto;
  margin-bottom: 70%;
}

.barchart img {
  width: 100%;
  padding: 5%;
}

.textbox1 {
    width: 95%;
    padding:5%;
    margin: auto;
   /*margin-top: 200px;*/
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
  }

.textbox2 {

    width: 95%;
    padding:5%;
    margin: auto;
   /*margin-top: 200px;*/
   line-height: 2;
   box-shadow: 2px 2px 8px black;
   margin-bottom: 100px;
  }

.mainhed h1 {
  width: 90%;
  position: absolute;
  font-size: 2em;
  bottom: 60%;
  right: 10%;
  color: #ffe000;
  font-style: italic;
  text-align: right;
}

.subhed h2{
  width: 90%;
  position: absolute;
  bottom: 20%;
  right: 10%;
  text-align: right;
}
.subhed h3{
  width: 500px;
  position: absolute;
  bottom: 5%;
  right: 10%;
  text-align: right;
}

.video {
  width: 100%;
  background-color: black;
  /*background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,1),rgba(0,0,0,1));*/
  padding: 0;
  margin: auto;
 }

.text2, .text3,.text5 {
  width:90%;
}

.audio {
  width: 95%;
}

.photo {
  width:100%;
}

.photo img {
  width: 100%;
}


}














