: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).opttxt {
  font-family: laila !important;
}
:lang(np).decor {
  font-family: laila !important;
}
:lang(np).anstxt {
  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;
    }
    .opttxt,.decor,.anstxt{
      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;
    }
    .opttxt,.decor,.anstxt{
      font-size: 5vw !important;
    }
}

.imagediv {
  position: absolute;
  z-index: 200;
  top: 27%;
  left: 10%;
  height: 55%;
  width: 35%;
  background: #ffffff;
  border: 0.15em solid #98B5D3;
  border-radius: 2em;
  display: flex;
  align-items: center;
  justify-content: center;
}
img.note_book01,.note_book02 {
  position: absolute;
  z-index: 15;
  top: 22%;
  left: 32%;
  height: 73%;
  pointer-events: none;
  cursor: pointer;
  /* width: 35%; */
}
img.hand {
  position: absolute;
  z-index: 15;
  top: 75%;
  left: 60%;
  height: 16%;
  display: none;
  cursor: pointer;
}
div#svg-block,#svg-block2,#svg-block3 {
  z-index: 1000;
  height: 100%;
  width: 100%;
  left: -16%;
  /* background: aqua; */
}
svg#Layer_1 {
      /* left: -30%; */
      height: 44%;
      width: 100%;
      top: 33%;
      overflow: visible;
}
#svg-block2>#Layer_1 {
  left: 17%;
  height: 50%;
  width: 100%;
  top: 33%;
}
#svg-block3>#Layer_1 {
  left: -8%;
  height: 57%;
  top: 27%;
  width: 100%;
}
#part-one{
  animation: partone 5s linear forwards;
}
@keyframes partone{
  0%{
    transform: translate(0% , 0%);
  }
  85%{
    opacity: 1;
  }
  100%{
    transform:translate(102% , -18%) rotate3d(1, 22, 1, 152deg);
    opacity: 0;
  }
}
#part-two{
  animation: parttwo 5s linear forwards;
}
@keyframes parttwo{
  0%{
    opacity: 0;
  }
  90%{
    opacity:0;
  }
  100%{
    opacity: 1;
  }
}
#part-three{
  animation: partthree 5s linear forwards;
}
@keyframes partthree{
  0%{
    opacity: 1;
  }
  90%{
    opacity:1;
  }
  100%{
    opacity: 0;
  }
}
.spkdiv {
  position: absolute;
  z-index: 200;
  height: 54%;
  width: 14%;
  /* background: #26bfbf; */
  left: 80%;
  top: 29%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.recording {
  border-radius: 50%;
  background: aliceblue;
  height: 45%;
  width: 100%;
  margin-top: 9%;
  margin-bottom: 13%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.stop>.recordimg {
  height: 72%;
  width: 74%;
}
img.recordimg {
  /* position: absolute; */
  left: 0%;
  top: 0%;
  height: 100%;
  width: 100%;
}

.Rec {
  animation: pulse 1.5s linear infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0px 0px 5px 0px rgba(173, 0, 0, .3);
  }

  65% {
    box-shadow: 0px 0px 5px 15px rgba(173, 0, 0, .3);
  }

  90% {
    box-shadow: 0px 0px 5px 17px rgba(173, 0, 0, 0);
  }
}

.Spk {
  animation: pulse2 1.5s linear infinite;
}

@keyframes pulse2 {
  0% {
    box-shadow: 0px 0px 5px 0px rgb(195 255 180 / 30%);
  }

  65% {
    box-shadow: 0px 0px 5px 15px rgb(59 173 0 / 30%);
  }

  90% {
    box-shadow: 0px 0px 5px 17px rgb(59 173 0 / 0%);
  }
}

.scale {
  animation: scale 1.5s linear infinite;
}

@keyframes scale {
  0% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1);
  }
}
.darkbg {
  filter: brightness(50%);
  pointer-events: none;
}
.statsdiv {
  position: absolute;
  height: 4%;
  width: 51%;
  top: 60%;
  left: 30%;
  background: antiquewhite;

}

.recStat,
.listenStat {
  position: absolute;
  bottom: 0%;
  left: 0%;
  /* width: 100%; */
  height: 3%;
  z-index: 5000;
  background-color: #f58220;
}

.listenStat {
  background-color: #83f27c;
}
.noclick{
  pointer-events: none;
}
#opcity{
  opacity: 0;
}
.animatepage{
  transform-origin: bottom left;
  animation: animatepage 4s linear forwards;
}
@keyframes animatepage{
  0%,50%{
    opacity: 1;
  }
  80%{
    
    opacity: 0;
  }
  100%{
    opacity: 0;
    transform: scaleX(-1);
  }
}