@import url("https://fonts.googleapis.com/css?family=Dosis|Fredoka+One|Press+Start+2P");
@font-face {
font-family: "Cocogoose";
src: url("src/Cocogoose.woff") format("woff"),
url("src/Cocogoose.woff2") format("woff2");
}
@font-face {
font-family: "Roboto-Black";
src: url("src/Roboto-Black.woff") format("woff"),
url("src/Roboto-Black.woff2") format("woff2");
}
@font-face {
font-family: "Roboto-Medium";
src: url("src/Roboto-Medium.woff") format("woff"),
url("src/Roboto-Medium") format("woff2");
}
body {
  background: #111111;
  overflow: hidden;
}

.home {
  position: absolute;
  height: 100%;
  width: 100%;
  background: #262626;
  background-image: url(img/bg-preguntas.jpg);
  background-position: center center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-attachment: fixed;
  background-size: cover;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
  transition: 0.2s;
  padding-top: 5%;
  
}

.title {
  margin-top: 50px;
  font-family: Dosis;
  font-size: 650%;
  font-weight: bold;
  text-align: center;
}

.T {
  color: #ff6666;
}

.R {
  color: #ffa700;
}

.I {
  color: #ffff66;
}

.V {
  color: #00ff7f;
}

.play {
  background: #a45ba3;
  color: white;
  border-bottom: 8px solid lightgray;
  width: 25%;
  margin-left: 35%;
  border-radius: 50px;
  margin-bottom: 6%;
  margin-top: 0%;
  font-family: 'Cocogoose';
  text-align: center;
  font-size: 40px;
  font-weight: bold;
  
  
}

.normal {
  position: absolute;
  bottom: 2%;

}

.learn:hover {
  background: #ffa700;
  color: white;
  border-bottom: 8px solid darkorange;
  transition: 0.3s;
}

.normal:hover {
  background: white;
  color: black;
  border-bottom: 8px solid lightgray;
  transition: 0.3s; 
   
}

.normal:active {
  border-bottom: 4px solid #a45ba3;
  transform: translateY(4px);
  transition: 0.1s;
}

.learn:active {
  border-bottom: 4px solid darkorange;
  transform: translateY(4px);
  transition: 0.1s;
}

.normalUI {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 0%;
  overflow: hidden;
  height: 100%;
  margin: auto;
  background: #ffc70f;
  transition: 0.2s;
}

.normalUIOverflow {
overflow-y: auto;
}

.questionWrap {
  height: 8%;
  width: 50%;
  background: #a45ba3;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 20px;
  position: relative;
  display: table;
  padding: 2%;
  border: 7px solid white;

}

.question {
  font-family: 'Roboto-Black';
  color: white;
  font-size: 40px;
  text-align: center;
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}

.respuesta{
  background: white;
  color: black;
  border-bottom: 8px solid lightgray;
  padding: 10px 2% 10px 2%;
  width: 50%;
  margin-left: 25%;
  border-radius: 50px;
  margin-bottom: 6%;
  font-family: 'Roboto-Medium';
  text-align: center;
  vertical-align: middle;
  font-size: 30px;
  font-weight: normal;
}

.choiceA, .choiceB, .choiceC, .choiceD, .choiceE, .choiceF, .choiceG  {
  width: 40%;
  left: 0;
  right: 0;
  margin: 2% auto;
  position: relative;
}

.choiceA:active, .choiceB:active, .choiceC:active {
  transform: translateY(4px);
  border-bottom: 4px solid lightgray;
}

.score {
  font-family: Fredoka One;
  font-size: 200%;
  color: #ffa700;
  height: 7%;
  text-align: center;
  padding-top: 3%;
}

.gameScore {
  color: #7647a2;
}

.wait {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 90%;
  background: #3399ff;
  background-image: url(img/Pantalla-2.jpg);
   background-position: left top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-attachment: fixed;
  background-size: cover;
  z-index: 2;
  transition: 0.8s;
  font-family: Dosis;
  font-size: 600%;
  color: white;
  text-align: center;
  padding: 5% 5% 0 5%;
  font-weight: bolder;
}

.wait2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 90%;
  background: #881ac7;
  background-image: url(img/Pantalla-3.png);
   background-position: left top; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-attachment: fixed;
  background-size: cover;
  z-index: 2;
  transition: 0.8s;
  font-family: Dosis;
  font-size: 600%;
  color: white;
  text-align: center;
  padding: 5% 5% 0 5%;
  font-weight: bolder;
}

.protip {
  font-family: Fredoka One;
  color: white;
  font-weight: lighter;
  font-size: 30%;
  bottom: 27%;
  position: absolute;
  padding: 0 5%;
}

.timeWrap {
  height: 5%;
  width: 95%;
  background: white;
  bottom: 1%;
  left: 2.5%;
  border-radius: 20px;
}

.time {
  height: 100%;
  width: 0;
  background: #00ff7f;
  border-radius: 20px;
  animation-delay: 5.8s;
}

@keyframes timeCheck {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
.correct {
  color: #00cc00;
  font-size: 0%;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 16%;
  text-align: center;
  font-weight: bolder;
  transition: 0.1s;
}

.incorrect {
  color: #ff3232;
  font-size: 0%;
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 5%;
  text-align: center;
  font-weight: bolder;
  transition: 0.1s;
}

.gameOver {
  position: absolute;
  top: 0;
  left: -100%;
  width: 80%;
  height: 100%;
  background: #00ff7f;
  z-index: 3;
  color: white;
  text-align: center;
  font-family: Dosis;
  padding: 10%;
  line-spacing: -5%;
  transition: 0.4s;
}

.affirmation {
  font-size: 650%;
  margin-top: 47%;
}

.pntsTxt {
  font-size: 350%;
  margin-top: -10%;
}

.learnUI {
  position: absolute;
  height: 100%;
  width: 70%;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: #262626;
  z-index: 1;
  display: none;
}

.trivMachine {
  height: 24vw;
  width: 30vw;
  background: #5badff;
  border-radius: 20px;
  position: absolute;
  left: 2%;
  top: 45%;
}

@keyframes jump {
  50% {
    transform: rotate(-3deg) translateY(-4vw);
  }
  100% {
    transform: rotate(0) translateY(0);
  }
}
.screen {
  height: 14vw;
  width: 21vw;
  background: #262626;
  margin: auto;
  position: absolute;
  top: 10%;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 20px;
}

.barrel {
  height: 40%;
  width: 7%;
  background: #3399ff;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: -7%;
  border-radius: 0 10px 10px 0;
}

@keyframes shoot {
  0% {
    height: 40%;
  }
  50% {
    height: 20%;
  }
  100% {
    height: 40%;
  }
}
.meter {
  height: 4vw;
  width: 4vw;
  border-radius: 50%;
  background: white;
  position: absolute;
  top: 1.25vw;
  left: 7vw;
  background: #ff6666;
}

.right {
  position: absolute;
  margin-left: 6vw;
  background: #00ff7f;
}

.rightRight {
  position: absolute;
  margin-left: 12vw;
  background: #ffff66;
}

.lever {
  height: 3.5vw;
  width: 7vw;
  background: #3399ff;
  border-radius: 3.5vw 3.5vw 0 0;
  position: absolute;
  top: -3.5vw;
  left: 0;
  right: 1vw;
  margin: auto;
}

.leverHandle {
  height: 10vw;
  width: 1.5vw;
  background: linear-gradient(#3399ff 30%, lightgray 0);
  z-index: -1;
  position: absolute;
  left: 2.75vw;
  top: -9vw;
  border-radius: 30px;
  transform: rotate(-70deg);
  transform-origin: bottom;
  transition: 0.5s;
}

.face {
  height: 9vw;
  width: 9vw;
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.eye {
  background: #00ff7f;
  height: 1vw;
  width: 1vw;
  position: absolute;
  top: 2vw;
}

.l {
  position: absolute;
  left: 3vw;
  top: 2vw;
}

@keyframes bop {
  0% {
    top: 2vw;
  }
  100% {
    top: 1vw;
  }
}
.r {
  position: absolute;
  right: 3vw;
}

.mouth {
  background: #00ff7f;
  height: 1vw;
  width: 1vw;
  position: absolute;
  bottom: 3vw;
  left: 4vw;
  box-shadow: -1vw 0vw #00ff7f, -2vw 0vw #00ff7f, 1vw 0vw #00ff7f, 2vw 0vw #00ff7f, 0vw 1vw #00ff7f, -1vw 1vw #00ff7f, 1vw 1vw #00ff7f;
}

.trivFact {
  height: 24vw;
  width: 36vw;
  background: white;
  border: 2vw solid black;
  border-radius: 30px;
  position: absolute;
  top: -15vw;
  left: -5vw;
  transform: scale(0);
  transition: 0.4s;
}

.factTxt {
  height: 20vw;
  width: 26vw;
  position: absolute;
  top: 2.3vw;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  font-family: Dosis;
  font-size: 3.5vw;
  z-index: 5;
}

.blockOff {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 4;
  display: none;
}

.learnOut {
  height: 10vw;
  width: 10vw;
  background: #ff6666;
  color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 12vw 0 0 0;
  z-index: -1;
  font-weight: bolder;
  font-size: 7vw;
  text-align: center;
  padding: 3vw 0 0 3vw;
}

.learnOut:hover {
  background: #e50000;
  transition: 0.6s;
}

@media (max-width: 1080px) {

  .logo{
    padding-top: 140px;
  margin-left: 40px;
  }

  .normal{
    bottom:35%;
  }

  .play {
  
  border-bottom: 5px solid lightgray;
  width: 50%;
  margin-left: 25%;
  margin-bottom: 6%;
  text-align: center;
  font-size: 45px;
  
  
  
}


.wait {

  background-image: url(img/movil/Pantalla-2.jpg);

  }

  .wait2 {

  background-image: url(img/movil/Pantalla-3.png);

  }
 .questionWrap {
  height: 8%;
  width: 90%;
  background: #a45ba3;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  border-radius: 20px;
  position: relative;
  display: table;
  padding: 2%;
  border: 7px solid white;

}

.question {
  font-family: 'Roboto-Black';
  color: white;
  font-size: 45px;
  text-align: center;
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}

.respuesta{
  background: white;
  color: black;
  border-bottom: 8px solid lightgray;
  padding: 10px 2% 10px 2%;
  width: 90%;
  margin-left: 25%;
  border-radius: 50px;
  margin-bottom: 6%;
  font-family: 'Roboto-Medium';
  text-align: center;
  vertical-align: middle;
  font-size: 40px;
  font-weight: normal;
}

.choiceA, .choiceB, .choiceC, .choiceD, .choiceE, .choiceF, .choiceG  {
  width: 90%;
  left: 0;
  right: 0;
  margin: 2% auto;
  position: relative;
}
}