.covercontainer {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 55%;
}
.covercontainer > .textpara {
  color: #000;
  font-family: 'Baloo';
  font-size: 2.5vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.headercontainer {
  width: 100%;
  height: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.headercontainer > .textpara {
  color: #fff;
  font-family: 'Andika New Basic';
  font-size: 1.5vw;
  font-weight: 400;
}
.girl_talking,
.girl_talking1 {
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 30%;
  transform: scaleX(-1);
  /* display: none; */
}
.speech_bubble,
.calloutcontainer {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 30%;
  transform: translate(-50%, -50%) scaleX(-1);
  /* display: none; */
}
.calloutcontainer {
  width: 28%;
  transform: translate(-50%, -50%);
}
.calloutcontainer > .textpara {
  color: #000;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 700;
}
.image_box,
.image_box1,
.handshake_girl,
.handshake_girl1 {
  position: absolute;
  top: 60%;
  right: 0%;
  transform: translateY(-50%);
  width: 35%;
  z-index: 10;
}
.image_box1,
.handshake_girl1 {
  left: 5%;
  right: unset;
}
.btn1container,
.btn2container {
  display: inline-flex;
  width: 40%;
  padding: 1em 1em;
  align-items: center;
  border-radius: 30px;
  background: #fff;
  position: absolute;
  bottom: 28%;
  left: 22%;
  cursor: pointer;
}
.btn2container {
  bottom: 12%;
}
.btn1container:hover,
.btn2container:hover {
  background: #394b94;
  color: #fff;
}
.correctoption {
  border: 1vw;
  border: 2px solid #000;
  background: #00f37f;
}
.incorrectoption {
  border-radius: 1vw;
  border: 2px solid #980d0d;
  background: #f33a00;
}
.girl_balloon {
  position: absolute;
  top: 50%;
  left: 71%;
  transform: translate(-50%, -50%);
  width: 40%;
}
.dotted_textbox,
.dottedtext,
.dotted_textbox1,
.dottedtext1 {
  position: absolute;
  top: 30%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 50%;
}
.dotted_textbox1,
.dottedtext1 {
  top: 65%;
}
.dottedtext,
.dottedtext1 {
  width: 40%;
  left: 25%;
  top: 35%;
  /* height: 60%; */
}
.dottedtext1 {
  top: 75%;
}
.dotted_textbox,
.dotted_textbox1 {
  width: 40%;
  left: 25%;
  top: 35%;
}
.dotted_textbox1 {
  top: 75%;
  height: 30%;
}
.frame,
.walking_static_gif,
.bg_room {
  position: absolute;
  width: 90%;
  height: 75%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: none;
}
.replay,
.replaycontainer {
  position: absolute;
  top: 27%;
  left: 80%;
  transform: translate(-50%, -50%);
  z-index: 21;
  width: 8%;
  display: none;
}
.walking_static_gif,
.bg_room {
  top: 63.5%;
  width: 85%;
  height: 63%;
  object-fit: contain;
  z-index: 21;
}
.bg_room {
  z-index: 20;
}
.replaycontainer {
  left: 70%;
}

.whathappened,
.whythishappened {
  position: absolute;
  top: 30%;
  left: 60%;
  transform: translate(-50%, -50%);
}
.whythishappened {
  top: 60%;
}
.whathappened > .textpara,
.whythishappened > .textpara,
.whathappenedcontinued > .textpara,
.whythishappenedcontinued > .textpara {
  color: #000;
  text-align: center;
  font-size: 1.5vw;
  font-weight: 700;
}
.whathappenedcontinued > .textpara,
.whythishappenedcontinued > .textpara {
  font-weight: 400;
}
.text_box1,
.whathappenedcontinued,
.text_box2,
.whythishappenedcontinued {
  position: absolute;
  top: 44%;
  right: 0%;
  width: 55%;
  transform: translateY(-50%);
}
.text_box2,
.whythishappenedcontinued {
  top: 80%;
  height: 30%;
}
.whythishappenedcontinued {
  top: 85%;
  right: 1%;
  width: 50%;
}

@media screen and (min-aspect-ratio: 4/3) {
  .covercontainer > .textpara {
    font-size: 6vh;
  }
  .headercontainer > .textpara {
    font-size: 3vh;
  }
}

.bg_room {
  display: none;
  position: absolute;
}