.covercontainer {
  position: absolute;
  top: 17%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}
.covercontainer > .textpara {
  color: #000;
  font-family: 'Baloo';
  font-size: 2.5vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.upperheadertextblock {
  position: absolute;
  top: 0%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 10%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.upperheaderpara {
  color: #f9f4fd;
  font-size: 1.75vw;
  font-weight: 700;
}
.girl_talking,
.girl_talking1 {
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 40%;
  transform: scaleX(-1);
  display: none;
}
.speech_bubble,
.calloutcontainer {
  position: absolute;
  top: 40%;
  left: 50%;
  width: 50%;
  transform: translate(-50%, -50%) scaleX(-1);
  display: none;
}
.calloutcontainer {
  transform: translate(-50%, -50%);
  width: 45%;
}
.calloutcontainer > .textpara {
  color: #000;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 700;
}
.infocontainer,
.info1container {
  position: absolute;
  color: #000;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 700;
  font-family: 'Andika New Basic';
  top: 30%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 39%;
  display: none;
}
.info1container {
  top: 55%;
}
.questionmark {
  position: absolute;
  bottom: 3%;
  left: 20%;
  /* transform: translateY(-50%); */
  width: 10%;
  display: none;
}
.op1container,
.op2container,
.op3container,
.op4container {
  position: absolute;
  top: 25%;
  left: 73%;
  transform: translate(-50%, -50%);
  width: 35%;
  display: inline-flex;
  padding: 0.5em 1em;
  align-items: center;
  border-radius: 1vw;
  background: #fff;
  color: #000;
  cursor: pointer;
  display: none;
}
.op2container {
  top: 40%;
}
.op3container {
  top: 55%;
}
.op4container {
  top: 70%;
}
.op1container:hover,
.op2container:hover,
.op3container:hover,
.op4container:hover {
  background: #394b94;
  color: #fff;
}
.correctoption {
  border: 1vw;
  border: 2px solid #000;
  background: #00f37f;
}
.incorrectoption {
  border-radius: 1vw;
  border: 2px solid #980d0d;
  background: #f33a00;
}
.bg3container,
.bg4container {
  position: absolute;
  width: 90%;
  top: 55%;
  left: 50%;
  height: 80%;
  background: #62428f;
  bottom: 0%;
  transform: translate(-50%, -50%);
}
.bg4container {
  width: 100%;
  height: 88%;
}
.image_box,
.balloonrubbedhair,
.first_girl_gif,
.balloonrepel,.balloonattract {
  position: absolute;
  top: 56%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 35%;
  z-index: 10;
}
.balloonrubbedhair {
  width: 33%;
  z-index: 11;
}
.replay {
  position: absolute;
  top: 24%;
  left: 37%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 6%;
  cursor: pointer;
}
.replaycontainer {
  position: absolute;
  top: 24%;
  left: 31%;
  transform: translate(-50%, -50%);
  z-index: 10;
}
.girl_balloon_rub {
  position: absolute;
  top: 56%;
  left: 25%;
  transform: translate(-50%, -50%);
  width: 30%;
  z-index: 10;
}
.letsseecontainer {
  color: #fff;
  text-align: center;
  font-family: 'Andika New Basic';
  font-size: 1.75vw;
  font-weight: 700;
  position: absolute;
  right: 10%;
  top: 25%;
}
.ex_textbox,
.feedbackmsg {
  position: absolute;
  right: 4%;
  top: 35%;
  width: 50%;
  z-index: 10;
}
.feedbackmsg {
  top: 38%;
}
.girl_talking1 {
  left: unset;
  right: 0%;
  z-index: 10;
  transform: unset;
  width: 30%;
  z-index: 15;
  display: block;
}
.speech_bubble1,
.speechtextcontainer {
  position: absolute;
  bottom: 10%;
  left: 64%;
  transform: translate(-50%, -50%);
  width: 30%;
  z-index: 15;
}
.speechtextcontainer {
  width: 26%;
}
.speechtextcontainer > .textpara {
  color: #073809;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 700;
}
.speechtextcontainer {
  bottom: 32%;
}
.cross {
  position: absolute;
  right: 4%;
  top: 12%;
  width: 4%;
  object-fit: contain;
  z-index: 20;
  cursor: pointer;
}
.dottedtextbox,
.ballooninfo {
  position: absolute;
  top: 50%;
  left: 70%;
  z-index: 10;
  transform: translate(-50%, -50%);
  width: 50%;
}
.ballooninfo {
  width: 48%;
}
.b23{
  bottom: 7.5em;
}
@media screen and (min-aspect-ratio: 4/3) {
  .upperheaderpara {
    font-size: 3.5vh;
  }
  .covercontainer > .textpara {
    font-size: 5vh;
  }
  .calloutcontainer > .textpara {
    font-size: 3.5vh;
  }
}