.p2covercontainer {
  position: absolute;
  top: 50%;
  left: 28%;
  transform: translate(-50%, -50%);
  width: 40%;
}
.p2covercontainer > .textpara {
  color: #31087b;
  font-family: 'Baloo';
  font-size: 4vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
/* .air,
.water,
.solar,
.battery {
  display: none;
} */
.topheader,
.bottomheader {
  background: #31087b;
  position: absolute;
  top: 5%;
  left: 50%;
  width: 95%;
  transform: translateX(-50%);
}
.topheader > .textpara,
.bottomheader > .textpara {
  color: #fff;
  padding: 1vw 0;
  font-size: 1.75vw;
}
.bottomheader {
  top: 48%;
  transform: translate(-50%, -50%);
}
.info1header,
.info2header,
.info3header {
  position: absolute;
  top: 20%;
  left: 50%;
  width: 95%;
  transform: translate(-50%, -50%);
}
.info1header > .textpara,
.info2header > .textpara,
.info3header > .textpara {
  color: #31087b;
  text-align: center;
  font-family: 'Andika New Basic';
  font-size: 1.5vw;
  font-weight: 400;
}
.info2header {
  top: 28%;
}
.info3header {
  top: 36%;
}
.imagecontainer,
.imagecontainer1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  position: absolute;
  bottom: 3%;
  width: 95%;
  left: 50%;
  transform: translateX(-50%);
}
.imagecontainer1 {
  grid-template-columns: repeat(3, 1fr);
  height: 60%;
  position: relative;
  bottom: -36%;
}
.imagecontentwire,
.imagecontentgas,
.imagecontentwater {
  background: #ffc23c;
}
.imagecontentsolar,
.imagecontentair,
.imagecontentbattery {
  height: 10em;
}
.imagecontentwire > .imginfo1,
.imagecontentgas > .imginfo3,
.imagecontentwater > .imginfo2 {
  margin-top: 5%;
}
.imagecontentwater > img,
.imagecontentair > img,
.imagecontentsolar > img,
.imagecontentbattery > img,
.imagecontentwood > img,
.imagecontentpaper > img,
.imagecontentman > img,
.imagecontenttowel > img,
.imagecontentwire > img,
.imagecontentwater > img,
.imagecontentgas > img {
  width: 100%;
  height: 85%;
  object-fit: contain;
}
.imagecontentwire > .imginfo1,
.imagecontentwater > .imginfo2,
.imagecontentgas > .imginfo3 {
  cursor: pointer;
}
.imgwrapper {
  cursor: pointer;
}
.imgwrapper > img,
.imgwrapper > img,
.imgwrapper > img {
  margin-top: 5%;
  max-width: 80%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
}
.imagecontentwire > button,
.imagecontentwater > button,
.imagecontentgas > button {
  position: absolute;
  bottom: -3%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.2em 0.9em;
  cursor: unset;
  background-color: #fff;
  border: transparent;
}
.textbox2 {
  position: absolute;
  top: 29%;
  left: 20%;
  transform: translate(-50%, -50%);
  width: 80%;
}
.topheading {
  display: inline-flex;
  padding: 0.5em;
  align-items: center;
  justify-content: center;
  border-radius: 27px;
  border: 6px solid #af82f2;
  background: #040404;
  position: absolute;
  top: 3%;
  left: 50%;
  width: 90%;
  transform: translateX(-50%);
}
.topheading > .textpara {
  color: #fff;
  font-family: 'Andika New Basic';
  font-size: 1.2em;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.data1container,
.data2container {
  position: absolute;
  top: 25%;
  left: 28%;
  transform: translate(-50%, -50%);
  width: 54%;
}
.data2container {
  top: 31%;
}
.data1container > .textpara,
.data2container > .textpara {
  color: #31087b;
  font-family: 'Andika New Basic';
  font-size: 1.25vw;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}
.switch_on,
.switch_off {
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 43%;
  z-index: 5;
}

.note {
  position: absolute;
  right: 5%;
  width: 34%;
  bottom: 5%;
}
.notecontainer {
  position: absolute;
  bottom: 28%;
  width: 27%;
  right: 8%;
  z-index: 1;
}
.exploreelectricitycontainer {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.exploreelectricitycontainer > .textpara {
  color: #31087b;
  font-family: 'Baloo';
  font-size: 4vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.textbox_img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
}
.bggraycontainer,
.bggraycontainer1,
.bggraycontainer2 {
  position: absolute;
  bottom: 0%;
  height: 67%;
  background: rgba(255, 255, 255, 0.47);
  width: 100%;
}
.bggraycontainer1 {
  width: 85%;
  background-color: #fff;
}
.girl_blinking {
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 43%;
  z-index: 6;
}
.speechbubble1 {
  position: absolute;
  top: 47%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 50%;
  z-index: 6;
}
.calloutcontainer {
  position: absolute;
  top: 45%;
  left: 48%;
  transform: translate(-50%, -50%);
  width: 40%;
  z-index: 7;
}
.calloutcontainer > .textpara {
  font-size: 1.5vw;
}
.onoffbutton {
  position: absolute;
  top: 51%;
  left: 17%;
  transform: translate(-50%, -50%);
  width: 16%;
  height: 15%;
  z-index: 10;
  cursor: pointer;
  display: none;
}
.p2_textbox2 {
  position: absolute;
  top: 5%;
  left: 0%;
  width: 85%;
}
.textbox2text1,
.textbox2text2,
.textbox2text3 {
  position: absolute;
  top: 7%;
  left: 5%;
  width: 75%;
}
.textbox2text2 {
  top: 12%;
}
.textbox2text3 {
  top: 17%;
}

.textbox2text1:lang(np) {
  top: 9%;
}
.textbox2text2:lang(np) {
  top: 14%;
}
.textbox2text3:lang(np) {
  top: 19%;
}
.textbox2text1 > .textpara,
.textbox2text2 > .textpara,
.textbox2text3 > .textpara {
  text-align: left;
}
.p2_textbox3,
.atomcontainer,
.atoms-img {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
}
.atomcontainer {
  width: 70%;
}
.atoms-img {
  top: 65%;
  width: 40%;
}
.p2_textbox4 {
  position: absolute;
  top: 2%;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.atominfocontainer,
.atominfocontainer1,
.atominfocontainer4,
.atominfocontainer5 {
  position: absolute;
  top: 5%;
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
}
.atominfocontainer1 {
  top: 15%;
}
.atominfocontainer4,
.atominfocontainer5 {
  top: 10%;
}
.atominfocontainer > .textpara,
.atominfocontainer1 > .textpara {
  font-size: 1.5vw;
}
.atomcontainer > .textpara {
  color: #31087b;
  font-family: 'Baloo';
  font-size: 4vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.atom {
  position: absolute;
  top: 66%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 40%;
  z-index: 5;
  display: none;
}
.protoncontainer,
.neutroncontainer,
.electroncontainer,
.nucleuscontainer {
  position: absolute;
  top: 61%;
  left: 55%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: none;
}
.neutroncontainer {
  top: 70%;
}
.electroncontainer {
  top: 46%;
}
.nucleuscontainer {
  top: 80%;
}
.notecontainer1 {
  position: absolute;
  right: 0%;
  width: 40%;
  bottom: 5%;
  z-index: 5;
}
.noteinfo1,
.noteinfo2 {
  position: absolute;
  right: 4%;
  width: 31%;
  bottom: 40%;
  z-index: 5;
}
.noteinfo2 {
  bottom: 18%;
}
.imagecontentwood,
.imagecontentman,
.imagecontenttowel,
.imagecontentpaper {
  height: 15em;
  bottom: 0;
}
.imagecontentwood > div,
.imagecontentman > div,
.imagecontenttowel > div,
.imagecontentpaper > div {
  padding: 0.5em 0;
}
.imagecontentwood > div > p,
.imagecontentman > div > p,
.imagecontenttowel > div > p,
.imagecontentpaper > div > p {
  padding: 0.5em;
  background-color: #fff;
}
.mattercontainer {
  border-radius: 1em;
  border: 6px solid #fff;
  background: rgba(4, 4, 4, 0.69);
  display: inline-flex;
  padding: 0.5em 0.5em;
  justify-content: center;
  align-items: center;
  position: relative;
  bottom: 30%;
}
.mattercontainer > .textpara {
  color: #fff;
  font-family: 'Andika New Basic';
  font-size: 1.5vw;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.goInGas {
  animation: scaleUp 2s linear forwards;
  /* transform: scale(-10) translate(-16px, -20%);
  transition: 2s ease-in; */
}

@keyframes scaleUp {
  to {
    transform: translate(-30%, -80%) scale(10);
  }
}
.zoomIn {
  animation: zoomin 0.3s linear forwards;
}
.gaswrapper {
  width: 80%;
  height: 45%;
  margin: 0 auto;
  margin-top: 5%;
  border: 2px solid #5b6bb5;
  border-radius: 1vw;
  overflow: hidden;
}

@keyframes zoomin {
  from {
    transform: translate(-50%, -50%) scale(0.2);
  }
  to {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  .p2covercontainer > .textpara {
    font-size: 10vh;
  }
  .topheader > .textpara {
    font-size: 4vh;
  }
  .info1header > .textpara,
  .info2header > .textpara,
  .info3header > .textpara {
    font-size: 3vh;
  }
  .data1container > .textpara,
  .data2container > .textpara {
    font-size: 2.5vh;
  }
  .exploreelectricitycontainer > .textpara {
    font-size: 6vh;
  }
  .calloutcontainer > .textpara {
    font-size: 4vh;
  }
  .atomcontainer > .textpara {
    font-size: 10vh;
  }
  .atominfocontainer > .textpara,
  .atominfocontainer1 > .textpara {
    font-size: 3vh;
  }
}