@import url('https://fonts.googleapis.com/css?family=Poppins:200.300,400,500,600,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');

* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    
    font-family: 'Poppins', sans-serif;
    color: cornsilk;
    cursor: pointer;
}

img{
  pointer-events: none;
}

#quiz-page{
  width: 100%;
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;

  background:#1c1c1c;
  background: linear-gradient(270deg, #3f3f44,#162447, #1C1C1C, #262626);
  background-size: 600% 600%;
  -webkit-animation: AnimationName 5s ease infinite;
  -moz-animation: AnimationName 5s ease infinite;
  -o-animation: AnimationName 5s ease infinite;
  animation: AnimationName 5s ease infinite; 
  
}

@-webkit-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@-o-keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
@keyframes AnimationName {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:10% 50%}
}

#quiz-box{
  
}

#top-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 5px;
}

#time-remaining{
  width: 360px;
  height: 60px;
  
  
  color: #FFF;
  border-radius: 30px;
  font-size: 30px;
  font-weight: 500;
  padding: 5px;
  
}

#time-remaining-value{
  color: #FFF;
  font-size: 30px;
  font-weight: 500;
}

#score{
  width: 170px;
  height: 60px;
  
  color: #fff;
  border-radius: 30px;
  font-size: 30px;
  font-weight: 500;
  padding: 5px;
}

#score-value{
  color: #FFF;
  font-size: 30px;
  font-weight: 500;
}

/* #correct{

}

#wrong{
  display: none;
} */

/* Decrease the height and width to 320px x 240px
in the phone mode */

#question-value{
  border-radius: 5%;
  opacity: 1;
  width: 320px;
  height: 240px;
}

#gameOver{
  width: 500px;
  height: 240px;
  font-size: 55px;
  padding-top: 35px;
  display: none;
  margin: 0 auto;
  color: #f6eedf;
  border-radius: 5%;

  background: linear-gradient(321deg, #f57b51, #d63447, #ffd31d);
  background-size: 600% 600%;

  -webkit-animation:x 5s ease infinite;
  -moz-animation: x 5s ease infinite;
  -o-animation: x 5s ease infinite;
  animation: x 5s ease infinite;
}

@keyframes x {
  0%{background-position:0% 53%}
  50%{background-position:100% 48%}
  100%{background-position:0% 53%}
}

#option-wrapper{
  padding: 10px;
}

.option-box{
  width: 500px;
  height: 60px;
  margin: 15px;
  
  color: #3F3F44;
  border-radius: 30px;
  font-size: 30px;
  font-weight: 400;
  line-height: 27px;

  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: white;

  /* background: linear-gradient(321deg, #faf2f2, #f3e1e1,#f1d1d1);
  background-size: 600% 600%;

  -webkit-animation: y 5s ease infinite;
  -moz-animation: y 5s ease infinite;
  -o-animation: y 5s ease infinite;
  animation: y 5s ease infinite; */
}

@keyframes y {
  0%{background-position:0% 53%}
  50%{background-position:100% 48%}
  100%{background-position:0% 53%}
}

.option-box:hover{
  transform: scale(1.05);
  background: #e43f5a;
  color: #faf2f2;
  animation: none;
}

#bottom-wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.start-reset{
  width: 400px;
  height: 60px;
  
  background-color: #FFF;
  color: #3f3f44;
  border-radius: 30px;
  font-size: 39px;
  font-weight: 500;
  padding: auto 0;
}

.start-reset:hover{
  transform: scale(1.05);
  background: #4cd3c2;
  color: #323232;
}

.credit{
  margin-top: 20px;
}

.credit-name{
  color: #FFF;
  font-size: 20px;
  font-weight: 400;
}

.credit-name a{
  color: #FFF;
  font-size: 20px;
  font-weight: 400;
}


/* MEDIA QUERY */


@media (max-width:556px) {

 #time-remaining {
  width: 300px;
  height: 60px;
  font-size: 27px;
}


#time-remaining-value{
  font-size: 27px;
}

#score{
  width: 150px;
  height: 60px;
  font-size: 27px;
}

#score-value{
  font-size: 27px;
}
  
.option-box{
  width: 400px;
  height: 60px;
  margin: 13px;
  border-radius: 20px;
  font-size: 26px;
  line-height: 27px;
}

.option-box:hover{
  transform: scale(1);
  animation: none;
}

#gameOver{
  width: 400px;
  height: 240px;
  font-size: 45px;
  padding-top: 35px;
  display: none;
  margin: 0 auto;
}

}


@media (max-width:456px) {

  #time-remaining {
   width: 260px;
   height: 60px;
   font-size: 25px;
   padding: 2px;
   text-align: left;
 }
 
 
 #time-remaining-value{
   font-size: 25px;
 }
 
 #score{
   width: 130px;
   height: 60px;
   font-size: 25px;
   padding: 2px;
   text-align: left;
 }
 
 #score-value{
   font-size: 25px;
 }
   
 #option-wrapper{
  padding: 6px;
}

 .option-box{
   width: 390px;
   height: 60px;
   margin: 13px;
   border-radius: 20px;
   font-size: 25px;
   line-height: 27px;
 }
 
 .start-reset{
  width: 320px;
  height: 60px;
  
  
  border-radius: 20px;
  font-size: 35px;
  font-weight: 500;
  padding: auto 0;
}

.credit{
  margin-top: 15px;
}

.credit-name{
  font-size: 16px;
  font-weight: 400;
}

.credit-name a{
  font-size: 16px;
  font-weight: 400;
}
 
}


@media (max-width:424px) {

  #top-wrapper{
    justify-content: center;
    padding: 0px;
    margin-bottom: 10px;
  }

  #time-remaining {
   width: 224px;
   height: 60px;
   font-size: 21px;
   padding: 0px;
   text-align: left;
 }
 
 
 #time-remaining-value{
   font-size: 21px;
 }
 
 #score{
   width: 100px;
   height: 60px;
   font-size: 21px;
   padding: 0px;
   text-align: left;
 }
 
 #score-value{
   font-size: 21px;
 }
   
 #option-wrapper{
  padding: 0px;
}

 .option-box{
   width: 320px;
   height: 50px;
   margin-top: 6px;
   margin-bottom: 6px;
   margin-left: 0;
   margin-right: 0;
   border-radius: 20px;
   font-size: 21px;
   line-height: 25px;
 }
 
 .start-reset{
  width: 310px;
  height: 60px;
}

#gameOver{
  width: 320px;
  height: 180px;
  font-size: 35px;
  margin: 0;
  
}
 
}

@media (max-width:325px) {

  #top-wrapper{
    justify-content: center;
    padding: 0px;
    margin-bottom: 10px;
  }

  #time-remaining {
   width: 224px;
   height: 60px;
   font-size: 21px;
   padding: 0px;
   text-align: left;
 }
 
 
 #time-remaining-value{
   font-size: 21px;
 }
 
 #score{
   width: 85px;
   height: 60px;
   font-size: 21px;
   padding: 0px;
   text-align: left;
 }
 
 #score-value{
   font-size: 21px;
 }
   
 #option-wrapper{
  padding: 0px;
}

 .option-box{
   width: 320px;
   height: 50px;
   margin-top: 6px;
   margin-bottom: 6px;
   margin-left: 0;
   margin-right: 0;
   border-radius: 20px;
   font-size: 21px;
   line-height: 25px;
 }
 
 .start-reset{
  width: 310px;
  height: 60px;
}

#gameOver{
  width: 320px;
  height: 180px;
  font-size: 35px;
  margin: 0;
  
}
 
}

/* IPHONE 6 / 7 / 8  */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { 
  
 }



 /* LOADER ANIMATION */
 .loader-wrapper{
  position: absolute;
  top: 0;
  left: 0;
  background: whitesmoke;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  animation: fadeIn 2.5s forwards;
  z-index: 10000;
 }

.loader-wrapper img{
  width: 300px;
  
}

@keyframes fadeOut {
from {
  opacity: 1;
}
to {
  opacity: 0;
  /* WE ADD Z-INDEX TO THIS BECAUSE 
  WHEN THE LOADING SCREEN IS LOADED 
  AND WHEN IT GETS OVER IT STILL REMAINS 
  ON THE TOP OF THE BROWSER SCREEN AND DISABLES
  THE USE OF BUTTON */
  z-index: -1;
  
}
}

@keyframes fadeIn {
to {
  opacity: 1;
}
}