body{
  transition:.5s all;
  background: #F5F5F5;
  height:100vh;
  font-size:1.5em;
  padding:20px;
  font-family: Arial;
  box-sizing: border-box;
  margin:0;
  background-position:center center;
  background-repeat: no-repeat;
}

img{
  margin-top:20px;
  display: block;
  width:60%;
}

#scoreboard{
  font-family: 'Luckiest Guy', cursive;
  font-size:1.5em;
  width:800px;
  margin:0;
  font-weight: lighter;
}

#question{
  background: #333;
  color:white;
  padding:40px;
  display: inline-block;
  max-width:55vw;
  margin-bottom:10px;
}

#a1, #a2, #a3, #a4{
  margin-left:100px;
  border-left:5px solid #333;
  padding:20px;
  display:block;
  opacity:.8;
  transition: .1s all;
  cursor: pointer;
  max-width:55vw;
  margin-bottom:10px;
  margin-top:10px;
}

#a1:hover, #a2:hover, #a3:hover, #a4:hover{
  opacity:1;
  background:#333;
  color:white;
  transition: .2s all;
}

.complete{
  background: url('../images/complete.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.correctAnimationCSS{
  background:#27c200;
  transition:1s all;
}


.incorrectAnimationCSS{
  background:red;
  transition:1s all;
  /* background-image:url(../images/anger2.jpg);
  background-size: cover;
  opacity: 0;
  transform: rotateY(180deg); */
}



#streak{
  position: absolute;
  left:0px;
  width:775px;
  bottom:22px;
  height:50px;
  padding-top:10px;
  padding-bottom:10px;
  padding-left:25px;
  font-size: 2em;
  background: yellow;
  color:red;
  font-family: 'Luckiest Guy', cursive;
  border-radius: 0 220px 0 0;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
  text-shadow: 5px 5px 0px white;
}


.hidden{
  opacity: 0;
  transition: 1s all;
}

.viewable{
  opacity: 1;
  transition: 1s all;
}

.godlike{
  background: yellow !important;
  color:red !important;
}

#mindBlown{
  position: absolute;
  max-width:33vw;
  right:0;
  top:0;
  text-align: center;
  margin:0;
  border-radius: 0 0 0 270px;
}

#stats{
  position: absolute;
  padding-left:25px;
  padding-top:10px;
  padding-bottom:10px;
  bottom:0px;
  left:0px;
  width:1250px;
  height:50px;
  font-size: 2em;
  background: black;
  color:white;
  font-family: 'Luckiest Guy', cursive;
  border-radius: 0 220px 0 0;
  letter-spacing: .2em;
  display: flex;
  align-items: center;
}

#correctPercentage, #bestStreak{
  display: inline;
}
#correctPercentage{
  margin-right:80px;
}

span{
  color:lime;
}

#timePerQuestion{
  opacity:0;
  width:400px;
  height:150px;
  position:absolute;
  right:0px;
  top:50%;
  background:#333;
  color:white;
  display:flex;
  flex-direction: column;
  border-radius:50px 0px 0px 50px;
  justify-content:space-around;
  color:#999;
}

#timePerQuestion p{
  margin:0px;
  padding-left:30px;
  margin:0px;
  color:white;
}