/* 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=Roboto+Slab:wght@100..900&display=swap');

/*main css*/


* {
   box-sizing: border-box;
}

img {
   width: 70%;
   display: block;
   margin:auto;
}

body {
   background-color: white;
   color: black;
   font-family: 'Lato', sans-serif;
   margin: auto;
   width:100vw;
/*   overflow: hidden;*/
}

.imagebox{
   text-align:center;
   margin:30px;
}

.vertimg{
   width:200px;
}

.horimg{
   width:400px;
}

.imagebox img{
   width:100%;
   height:auto;
}

.floatright{
   float:right;
}

.cover{
   width:100vw;
   height:100vh;
   z-index:-5;
   position:fixed;
   top:0px;
   background-image: url("../img/cover.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size:cover;
}

.header{
   width:60%;
   margin:auto;
   padding:20px;
   margin-bottom:5vh;
/*   background-color:rgba(0,0,0,0.5);*/
   display:none;
   z-index:-1;
   text-align:center;
}

.header h1{
   font-family: "Roboto Slab", serif;
   font-size:3em;
   text-shadow: 1px 1px 6px rgba(0, 0, 0, 0.9);
   color:white;
}

.by{
   width:50%;
   margin-top:5vh;
   padding:20px;
/*   background-color:rgba(0,0,0,0.5);*/
   display:none;
   margin:auto;
   z-index:-1;
   text-align:center;
   color:white;
   font-size:1.5em;
}

.byline{
   color:black;
}

.space{
      padding-top:27vh;
   height:100vh;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, #000000 120%);
}

.two{
/*   display:none;*/
}

.back{
   background-color:white;
   width:100vw;
/*   padding:50px;*/
}

.row{
   display:grid;
   grid-template-columns:1fr 1fr 1fr 1fr 1fr ;
   width:100vw;
   z-index:1;
   margin-left:-20px;
}

.card{
   margin:auto;
   width:90%;
   height:100%;
   text-align:center;
   display:none;
   position:relative;
/*   grid-template-columns: 3fr 1fr;*/
   transition: padding-right 0.5s ease;
}

.card img{
   margin-top:20px;
}

.cardbox{

}

/*.bar{
   height:100%;
   width:50px;
   background-color:green;
   position:absolute;
   bottom:0px;
   right:0px;
   display:none;
   border-radius:2px;
}*/

.narration{
   position:absolute;
   top:43vh;
   width:100vw;
   margin-top:20px;
   margin:auto;
   text-align:center;
   font-weight:bold;
   display:none;
}

.first{
   width:70%;
   margin:auto;
   padding-top:50px;
}

.head{
   text-align:center;
}

#second{
   position:absolute;
   bottom:10px;
}

.modal{
display:none;
}

.modal .header{
   height:75px;
   background-color:#990000;
   padding:20px;
   width:100%;
}

.annenberg{
   width:200px;
}

.return{
   margin:auto;
  filter: invert(100%);
  width:50px;
}

.header .return{
   position:absolute;
   right:20px;
   top:10px;
   filter: invert(0%);
   width:50px;

}

.return:hover{
   cursor:pointer;
}

.main{
   width:80vw;
   margin:auto;
   padding:50px;
   padding-top:15px;
   font-size:1.1em;
}

.main h2{
   font-size:3em;
   margin-bottom:0px;
   margin-top:-20px;
/*   line-height: 30px;*/
}




.imagegraph{
   width:15vw;
   float:right;
}

.captionbox{
   background-color:rgba(255,255,255,0.9);
   width:100%;
   height:100%;
   position:absolute;
   top:0px;
   left:0px;
   opacity:0;
}

.hover:hover{
   opacity:100%;
}

.graphbox{
   display:grid;
   grid-template-columns: 1fr 6fr;
   text-align:right;
   width:70vw;
   margin:auto;
   margin-top:50px;

}

.bartext{
/*   margin-top:3%;*/
   margin-right:2%;
}

.graph{
   width:90%;
   height:100%;
   margin-left:20px;
   position:relative;
   border: 0px solid black;
   grid-gap:2px;
}

.bar{
   background-color:#339933;
   height:8%;
   min-width:80px;
   position:absolute;
   bottom:0px;
   color:white;
   text-align:center;
   padding:6px;
   box-shadow:2px 2px 5px rgba(0, 0, 0, 0.7);
}
.bartext{
/*   margin-top:0px;*/
/*   position:absolute;*/
/*   left:10px;*/
}
.bar:hover{
   background-color:darkseagreen;
   color:black;
}

.barnum{
   position:absolute;
/*   top:0px;*/
   right:10px;
   margin-top:0px;
}

.axis{
   margin:auto;
   text-align:center;
   margin-bottom:0px;
   margin-top:50px;
   font-weight:bold;
}

.zero{
   margin-left:15%;
}

.b1{
   top:1%;
}

.b2{
   top:11%;
}

.b3{
   top:21%;
}

.b4{
   top:31%;
}

.b5{
   top:41%;
}

.b6{
   top:51%;
}

.b7{
   top:61%;
}

.b8{
   top:71%;
}

.b9{
   top:81%;
}

.b10{
   top:91%;
}


th{
   font-weight:normal;
   font-size:0.9em;
}

.twitter-tweet{
   margin:auto;
   max-width:300px;
}

.boxbox{
   display:grid;
   grid-template-columns:1fr 1fr 1fr 1fr 1fr;
   width:100vw;
   grid-gap:20px;
   padding:50px;
}

.namebox{
   background-color:grey;
   color:white;
   font-size:1.5em;
   padding:20px;
   height:150px;
   text-align:center;
   box-shadow:2px 2px 5px rgba(0, 0, 0, 0.7);
   border-radius:5px;
   border:5px solid transparent;
/*   display:none;*/
}

.namebox:hover{
   background-color:darkgrey;
   border:5px solid white;
   cursor:pointer;
}  

/*#chart{
   width:90%;
   height:40%;
   margin:auto;
}


#chart .bar{
--labels-align-block: start;
--labels-size: 200px;
   --color-1: rgba(255, 170, 170, 1);
  --color-2: rgba(255, 170, 170, 0.95);
  --color-3: rgba(255, 170, 170, 0.9);
  --color-4: rgba(255, 170, 170, 0.85);
  --color-5: rgba(255, 170, 170, 0.8);
  --color-6: rgba(255, 170, 170, 0.75);
  --color-7: rgba(255, 170, 170, 0.7);
  --color-8: rgba(255, 170, 170, 0.65);
  --color-9: rgba(255, 170, 170, 0.5);
  --color-10: rgba(255, 170, 170, 0.45);
  --aspect-ratio: 5 / 1;
}

.data{
   font-size:0.9em;
}

#chart .bar tbody td{
  transform-origin: left;
  animation: revealing-bars 3s ease-in-out;
}

@keyframes revealing-bars {
  0%  { transform: scaleX( 0 ); }
  30% { transform: scaleX( 1 ); }
}

#chart .bar td {
  transition-duration: 0.3s;
}
#chart .bar td:hover {
  background-color: rgba(255, 75, 75, 0.8);
}

.data{
   margin-right:10px;
}*/

.footer {
/*   max-width: 640px;*/
   margin: auto;
   text-align: center;
   font-size: 0.75em;
   line-height: 1.5em;
   background-color:black;
   color:white;
   width:100%;
   position:absolute;
   padding:20px;
/*   bottom:0px;*/
}

.footer img {
   width: 200px;
   margin:auto;
   box-shadow:0px 0px;
}


/*media query for responsive design */

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

  .header h1{
   font-size:2em;
  }

  .by{
   font-size:1em;
  }

  .space{
   padding-top:10vh;
  }

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

  .main h2{
   font-size:2.5em;
  }

  .floatright{
   float:none;
  }

  .imagebox{
   margin:auto;
  }

  .horimg{

  }

}

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


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

  .graphbox{
   width:95vw;
  }

  .graph{
   margin-left:5px;
   width:98%;
  }

  .bar{
   padding:10px;
   min-width:60px;
  }

  .barnum{
   font-size:0.75em;
   right:5px;
  }

  .main{
   width:90vw;
   padding:20px;
  }

  .horimg{
   width:200px;
   }

}