@font-face {
  font-family: laila;
  src: url('../../../../../fonts/laila/laila-regular.ttf');
}

.diy {
  font-family: laila;
  color: #44ae17;
  font-size: 10vmin;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.coverboardfull {
  display: flex;
}

.bg_full {
  object-fit: contain;
}

.content {
  height: 100%;
}

.left-content {
  flex: 4;
}

.left-content .animal {
  position: absolute;
  height: 40%;
  bottom: 3%;
  /* cursor: url('../images/sec3/pointer.png') 50 50, auto; */
}

.animal.ladybug {
  height: 10%;
  bottom: 50%;
  left: 0;
}

.animal.caterpillar {
  /* transform: rotate(90deg); */
  height: 8%;
  left: 0;
  bottom: 0%;
}

.animal.rabbit {
  left: 10%;
  height: 15%;
  bottom: 10%;
}

.animal.elephant {
  left: 25%;
  height: 42%;
  bottom: 10%;
}

.animal.tiger {
  left: 30%;
  height: 30%;
}
.animal.girraffe {
  left: 73%;
  height: 70%;
  bottom: 10%;
}

.animal.ant {
  height: 6%;
  left: 55%;
}

.animal.earthworm {
  height: 5%;
  left: 70%;
}

.animal.peacock {
  left: 10%;
  bottom: 50%;
}

.animal.dragonfly {
  height: 20%;
  bottom: 60%;
  left: 40%;
}

.animal.butterfly {
  height: 10%;
  bottom: 80%;
}

.right-content {
  flex: 2;
  background-color: #44ae17ff;
}

.header {
  color: #434343;
  width: 60%;
  text-align: left;
  height: 15%;
  padding: 5%;
  font-size: 3vmin;
  font-weight: 600;
}

.header:lang(np) {
  width: 80%;
}

.camera {
  position: absolute;
  height: 13%;
  right: 0;
  top: -15%;
}

.answer-container {
  background-color: #eeeeeeff;
  height: 84.9%;
  width: 90%;
  margin: auto;
  border-radius: 0.5em;
  display: flex;
  flex-wrap: wrap;
  padding: 7% 3%;
  gap: 3%;
  justify-content: center;
}

.answer {
  width: 45%;
  height: 30%;
  background-color: #ffffffff;
  box-shadow: 0.2em 0.2em 0.2em rgb(14 14 14/0/3);
}

.answer img {
  display: block !important;
  height: 70%;
  width: 80%;
  margin: 10% auto 0;
  object-fit: contain;
  background-color: #47a836ff;
}

.answer label {
  height: 30%;
  font-weight: 500;
  font-size: 2.5vmin;
}

.congrats {
  position: absolute;
  z-index: 40;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  background-color: #ff5560;
  color: #fff;
  padding: 2%;
  font-size: 3.5vmin;
  display: none;
}

@media (min-aspect-ratio: 4/3) {
  .diy {
    font-size: 10vh;
  }
  .congrats {
    font-size: 4vh;
  }
  .header {
    font-size: 3vh;
  }

  .answer label {
    font-size: 2.5vh;
  }
}