body {
  font-family: "Poppins", sans-serif;
}

.container {
  height: 100vh;
  overflow: scroll;
}

button {
  font-family: "Poppins", sans-serif;
  border-radius: 1.5vw;
  color: white;
  background-color: rgb(0, 183, 255);
  border: none;
  padding: 1vw 3vw 1vw;
}

#texto-plano {
  border-radius: 40px;
  padding: 1.4vw 2vh;
  font-weight: bold;
  background-color: #0089A6;
  position: absolute;
  bottom: 8.2%;
  right: 8%;

}

.siguiente-text {
  color: white;
  background-color: rgb(0, 183, 255);
  position: absolute;
  bottom: 8.2%;
  right: 8%;
  border-radius: 1.5vw;
}

#select {
  border-radius: 40px;
  padding: 1.4vw 2vh;
  font-weight: bold;
  background-color: #0089A6;
  right: -9vw;
  bottom: -3vh;
  position: absolute;
}

.textbox {
  position: absolute;
  opacity: 92%;
  bottom: 10%;
  width: 69%;
  right: 9%;
  background-color: white;
  /* margin: auto; */
  text-align: center;
  border-radius: 40px;
  display: flex;
  padding: 5% 5% 5% 5%;
  ;
  border: 2.4px solid #0089A6;
}

.opciones {
  width: 200px;
}

#stats-text {
  position: absolute;
  bottom: 50%;
}

#life-bar {
  position: absolute;
  top: 2.85%;
  width: 27%;
  height: 3.3%;
  right: -8%;
  transform: translate(-50%, 0);
  background-image: linear-gradient(to right, #B3D83D 50%, white 20%);
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid white;
  border-radius: 1.5vw;
}

.energy-text {
  width: 150px;
  margin-left: 4%;
  margin-top: 3%;
  height: 2% !important;
  background-image: linear-gradient(to right, greenyellow 50%, white 20%);
  color: black;
  justify-content: center;
  border: 1px solid black;
  border-radius: 1.5vw;
  margin: auto;
  display: flex;
  font-size: 1.5vh;
  padding: -1vh;
}

.health-text {
  width: 150px;
  margin-left: 4%;
  margin-top: 3%;
  height: 2% !important;
  background-image: linear-gradient(to right, greenyellow 50%, white 20%);
  color: black;
  justify-content: center;
  border: 1px solid black;
  border-radius: 1.5vw;
  margin: auto;
  display: flex;
  font-size: 1.5vh;
  padding: -1vh;
}

.mood-text {
  width: 150px;
  margin-left: 4%;
  margin-top: 3%;
  height: 2% !important;
  background-image: linear-gradient(to right, greenyellow 50%, white 20%);
  color: black;
  justify-content: center;
  border: 1px solid black;
  border-radius: 1.5vw;
  margin: auto;
  display: flex;
  font-size: 1.5vh;
  padding: -1vh;
}

.eco-text {
  width: 150px;
  margin-left: 4%;
  margin-top: 3%;
  height: 2% !important;
  background-image: linear-gradient(to right, greenyellow 50%, white 20%);
  color: black;
  justify-content: center;
  border: 1px solid black;
  border-radius: 1.5vw;
  margin: auto;
  display: flex;
  font-size: 1.5vh;
  padding: -1vh;
}

.social-text {
  width: 150px;
  margin-left: 4%;
  margin-top: 3%;
  height: 2% !important;
  background-image: linear-gradient(to right, greenyellow 50%, white 20%);
  color: black;
  justify-content: center;
  border: 1px solid black;
  border-radius: 1.5vw;
  margin: auto;
  display: flex;
  font-size: 1.5vh;
  padding: -1vh;
}

.energy-bar {
  display: flex;
  padding: 2%;
  text-align: center;
}

.puntos {
  padding: 2%;
  margin-left: 7%;
  color: rgb(11, 202, 11);
}

#stats-button {
  position: absolute;
  top: 7.5%;
  width: 27%;
  height: 1.6%;
  right: -8%;
  transform: translate(-50%, 0);
  background-color: rgb(0, 183, 255);
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgb(0, 183, 255);
  color: white;
  border-radius: 1.5vw;
}

#current-game {
  position: absolute;
  top: 1.6%;
  width: 27%;
  height: 3.7%;
  padding: 0.8%;
  left: 20%;
  transform: translate(-50%, 0);
  background-color: white;
  color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 3px solid white;
  border-radius: 100px / 50px;
  overflow: ellipsis;
  text-align: center;
}

#game-text {
  font-size: 4vw;
  font-weight: bold;

}

#current-hour {
  font-weight: medium;
  font-size: 2.8vw;
  margin-top: -19%;
}

#exit-game {
  position: absolute;
  top: 7.5%;
  width: 27%;
  height: 1.7%;
  left: 20%;
  transform: translate(-50%, 0);
  background-color: rgb(252, 149, 149);
  color: black;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgb(252, 149, 149);
  border-radius: 1.5vw;
  color: white;
}


.button-wrapper {
  display: inline-block;
  margin: 4%;
}

/* .scene0-text {
  display:flex;
  align-items: center;
  position: relative;

} */

#logo-mobility {
  position: absolute;
  top: -2vh;
  width: 65%;
  height: 28%;
  left: 17vw;
}


#scene0-0-title {
  position: absolute;
  top: 28%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  color: rgb(109, 109, 109);
}

#scene0-0-paragraph {
  position: absolute;
  top: 30%;
  font-size: 4.2vw;
  width: 78.91vw;
  text-align: justify;
  letter-spacing: -0.04em;
  left: 10vw;
}

#scene0-0-button-text {
  position: absolute;
  top: 79%;
  font-size: 3.5vw;
  width: 100%;
  left: 1%;
  font-weight: bold;
  text-align: center;
}

#jugar {
  border-radius: 40px;
  padding: 2vw 2vh;
  font-weight: bold;
  padding: 20px 80px;
  background-color: #0089A6;
  font-size: 6vw;
  bottom: 2%;
  right: 13%;
  position: absolute;
}

.logo-mobility-small {
  position: absolute;
  left: 8.2vw;
  width: 21.5vw;
  height: 11.5vh;
  top: 1.5vh;
}

.scene0-1-index {
  position: absolute;
  width: 26vw;
  font-size: 3vw;
  text-align: center;
  top: 4.5vh;
  font-style: italic;
  right: 5.14vw;
}

#scene0-1-title {
  position: absolute;
  font-size: 5vw;
  width: 80%;
  top: 14%;
  left: 9%;
  font-weight: bolder;
  text-align: center;
}

#scene0-1-title2 {
  position: absolute;
  font-size: 5vw;
  width: 80%;
  top: 14%;
  left: 9%;
  font-weight: bolder;
  text-align: center;
}

.scene0-1-textbox {
  position: absolute;
  opacity: 92%;
  bottom: 10%;
  width: 69%;
  right: 13%;
  background-color: white;
  /* margin: auto; */
  text-align: center;
  border-radius: 40px;
  display: flex;
  padding: 1% 1% 1% 1%;
  border: 2.4px solid #0089A6;
}

.scene0-2-textbox {
  position: absolute;
  text-align: justify;
  opacity: 92%;
  top: 72vh;
  width: 69%;
  background-color: white;
  border-radius: 40px;
  display: flex;
  padding: 1% 1% 1% 1%;
  border: 2.4px solid #0089A6;
  font-weight: medium;
}

#personajes-intro {
  position: absolute;
  top: 28%;
  left: 10%;
  width: 80%;
}

#stats-intro {
  position: absolute;
  top: 28%;
  left: 10%;
  width: 80%;
}

#guia-intro {
  position: absolute;
  top: 17.5vh;
  left: 15.5vw;
  width: 70%;
  height: 45%;
}

.siguiente-button {
  border-radius: 40px;
  padding: 1.4vw 2vh;
  font-weight: bold;
  background-color: #0089A6;
  top: 88%;
  right: 9%;
  position: absolute;
}

#gt-button {
  position: absolute;
  bottom: 50%;
  right: 5%;
  display: none;
}

#lt-button {
  position: absolute;
  bottom: 50%;
  left: 5%;
  display: none;
}

#p-text {
  margin: auto;
}

.text-center {
  text-align: center;
}

#scene-marker {
  z-index: 12000000;
}

#energy-game-bar {
  display: none;
  position: absolute;
  bottom: 2%;
  width: 56%;
  height: 5%;
  right: -8%;
  transform: translate(-50%, 0);
  background-image: linear-gradient(to right, greenyellow 100%, rgba(255, 255, 255, 0)e 0%);
  color: black;
  align-items: center;
  justify-content: center;
  border: 3px solid black;
  border-radius: 1.5vw;
}

#reto-3-video {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  display: none;
  width: 100%;
  height: 100%;
  z-index: -1;
  object-fit: cover;
}

.a-enter-vr,
.a-enter-ar {
  display: none;
}

#gt-button-reto4 {
  position: absolute;
  bottom: 30%;
  right: 5%;
  display: none;
  padding: 3vw 5vw 3vw;
}

#lt-button-reto4 {
  position: absolute;
  bottom: 30%;
  left: 5%;
  display: none;
  padding: 3vw 5vw 3vw;
}

.timerR4 {
  display: none;
  width: 50px;
  height: 50px;
  border: 8px solid #ccc;
  border-radius: 50%;
  position: fixed;
  top: 2%;
  left: 50%;
  transform: translateX(-50%);
  animation: countdown 60s linear infinite forwards;
}

.time {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2em;
  text-align: center;
}

@keyframes timerR4 {
  0% {
    border-top-color: #8a9b0f;
  }

  100% {
    border-top-color: #ccc;
  }
}