:lang(np).coverboardfull {
    font-family: laila !important;
}
:lang(np).speechbox {
    font-family: laila !important;
  }
  :lang(np)span {
    font-family: laila !important;
  }
  :lang(np)label {
    font-family: laila !important;
  }
  :lang(np)p {
    font-family: laila !important;
  }
  :lang(np).speechbox > p {
    font-family: laila !important;
  }
  
  :lang(np).innertxt {
    font-family: laila !important;
  }
  :lang(np).cover_page_txt {
    font-family: laila !important;
  }
  :lang(np).headertext {
    font-family: laila !important;
  }
  :lang(np).p-color-name {
    font-family: laila !important;
  }
  :lang(np).clr-name {
    font-family: laila !important;
  }
  :lang(np).option {
    font-family: laila !important;
  }
  
  .coverboardfull {
    background: #F1FCEB !important;
    user-select: none;
  }
  
  .bg_full {
    position: absolute !important;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 10;
  }
  
  .topbar {
    height: 15% !important;
    color: #fff;
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #0A90DB;
    width: 100%;
    z-index: 99;
    overflow: hidden;
  }
  
  @media screen and (min-aspect-ratio: 4/3) {
    .headertext {
      font-size: 5.5vh !important;
    }
    .innertxt {
      font-size: 5.5vh !important;
    }
    .spktxt {
        font-size: 5vh !important;
      }
      .option{
        font-size:6vh !important;
      }
  }
  
  @media screen and (max-aspect-ratio: 4/3) {
    .headertext{
        font-size: 3.5vw !important;
    }
    .innertxt{
      font-size: 4vw !important;
  }
    .spktxt {
        font-size: 4vw !important;
      }
      .option{
        font-size: 5vw !important;
      }
  }

  .outerdiv {
    position: absolute;
    z-index: 200;
    top: 22%;
    left: 15%;
    height: 70%;
    width: 70%;
    background: #cacaca;
    border: 0.2em solid #98B5D3;
    border-radius: 2em;
  }
  .innerdiv {
    position: absolute;
    z-index: 200;
    top: 14%;
    left: 8%;
    height: 65%;
    width: 47%;
    /* border: 0.2em solid #98B5D3;
    border-radius: 2em; */
    display: flex;
  }
  #matra{
    display: none;
  }
#letter-svg{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0%;
  top: 0%;
  z-index: 1;
  display: none;
}
#letter-svg svg{
  left: 30%;
  width: 35%;
  height: 90%;
  top: 0%;
  /* background: bisque; */
}
#gr{
  width: 15%;
}
#part-one{
  width: 15%;
  animation: parttwo 4s ease-in-out forwards;
  z-index: 10;
}
@keyframes parttwo{
  0%{
    transform: translate(0% , -235%);
  }
  100%{
    transform: translate(0% , 0%);
  }
}
.boy,.boy2 {
  position: absolute;
  height: 125%;
  top: 6%;
  left: -6%;
}
.girl,.girl2 {
  position: absolute;
  height: 125%;
  right: -10%;
  top: 8%;
  transform: scaleX(-1);
}
.speechbox.spbox.spbks1 {
  height: 33%;
  width: 38%;
  left: 31%;
  top: 6%;
  opacity: 0;
}
.speechbox.spbox.spbks2 {
  top: 54%;
  left: 35%;
  height: 40% !important;
  width: 35%;
  z-index: 20;
  opacity: 0;
}
img.speechbg.text_box2 {
  transform: scale(-1);
  top: -15%;
}
.question {
  position: absolute;
  z-index: 1000;
  top: 30%;
  left: 36%;
  height: 55%;
  width: 31%;
  /* background: antiquewhite; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.option {
      /* position: absolute; */
    /* z-index: 1000; */
    height: 28%;
    width: 100%;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border: 0.1em solid #6896E1;
    border-radius: .5em;
    margin: 3%;
    cursor: pointer;
    pointer-events: none;
}
.option:hover{
  transform: scale(1.1);
}
.correct{
  border: 0.1em solid #7BB263;
  background: #B6D7A8;
}
.wrong{
  border: 0.1em solid #CE0808;
  background: #EA9999;
  pointer-events: none !important;
}
.noclick{
  pointer-events: none !important;
}
.mark,.mark2 {
  width: 11%;
  position: absolute;
  top: -8%;
  right: -8%;
}

.p-color-name{
  position: absolute;
  right: 5%;
  top: 50%;
  font-size: 15vh;
  color: #444444;
  transform: translateY(-50%);
  
}
.clr-name{
  font-weight: bold;
  opacity: 0;
}