.coverboardfull {
  background-color: #93c47dff;
}

.overlay {
  height: 100%;
  top: 0;
  padding-top: 10%;
}

.xray-png {
  width: 15%;
  object-fit: contain;
}

.animal {
  position: absolute;
  width: 20%;
  height: 20%;
  object-fit: contain;
  top: 40%;
  left: unset;
  right: 40%;
  display: none;
}

.animal.crab {
  left: 41.5%;
}

.animal.rooster {
  left: 46.5%;
}

.animal.frog {
  left: 43%;
}

.animal.dog {
  left: 44%;
}

/* 
Slider Stylesheet
*/

.slider-container {
  position: absolute;
  z-index: 50;
  bottom: 5%;
  left: 5%;
  width: 50%;
  height: 25%;
  background-color: #fff;
  border-radius: 0.5em;
  padding: 0 5%;
  user-select: none;
}
.slider-content {
  overflow: hidden;
  padding: 0 1%;
}
.slider-controller {
  position: absolute;
  height: 25%;
  object-fit: contain;
  left: 1%;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

.slider-controller.next {
  left: unset;
  transform: scale(-1);
  right: 1%;
  top: 38%;
}

.slider {
  width: 100%;
  height: 100%;
  white-space: nowrap;
  transition: all 800ms ease;
}

.slider .sliderimg-container {
  display: inline-block;
  width: 22%;
  margin: 8% 1%;
  aspect-ratio: 1/1;
  background-color: #d9ead3ff;
  border-radius: 50%;
  padding: 3%;
  cursor: pointer;
}

.slider .sliderimg {
  --slider-img-size: 100%;
  height: var(--slider-img-size);
  width: var(--slider-img-size);
  object-fit: contain;
}

.header2 {
  display: none;
}

.nxtbtn,
.closebtn {
  position: absolute;
  height: 8%;
  z-index: 500;
  right: 5%;
  top: 1%;
  display: none;
  cursor: pointer;
}

.closebtn {
  top: 8%;
  height: 10%;
}

.qna-container {
  z-index: 500;
  width: 44%;
  left: unset;
  right: -4%;
  top: unset;
  height: 30%;
  bottom: -50%;
}

.question {
  height: 30%;
  padding: 2%;
  display: inline-block;
}

.options-container {
  padding-top: 0;
}

.option {
  width: 45%;
}

.animals-answer {
  position: absolute;
  z-index: 500;
  width: 50%;
  height: 90%;
  top: 5%;
  left: -55%;
  background-color: #f6fbffff;
  border-radius: 0.5em;
  padding: 2%;
}

.animals-answer.summary {
  left: unset;
  right: 3%;
}

.animals-answer.summary :is(.upper .animal-grp, .lower .animal-grp) {
  background-color: #d9ead3ff;
  border: 0.1em solid #44ae17;
}
.animals-answer.summary .lower {
  display: none;
}

.animals-answer.summary .animal {
  display: inline-block;
  position: static;
  height: 40%;
  width: 20%;
}

.animals-answer.summary .animal.rooster {
  height: 40%;
  width: 40%;
}

.animals-answer.summary .animal.dog {
  height: 55%;
  width: 55%;
}

.animals-answer.summary .animal.ant {
  width: 25%;
  margin-right: 5%;
}

.animals-answer.summary .animal.butterfly {
  height: 45%;
  width: 70%;
  float: left;
}

.animals-answer.summary .animal.crab {
  height: 65%;
  width: 30%;
  float: right;
}
.animals-answer .title {
  color: #44ae17;
  text-decoration: underline;
  font-size: 3vmin;
  margin: 2%;
}

.animal-grp {
  height: 38%;
  background-color: #e5e7e8ff;
  border-radius: 0.2em;
  padding: 3%;
}

.animal-grp .correct-img {
  width: 45%;
  height: 45%;
  object-fit: contain;
}

.correct-img.fish {
  width: 25%;
}

.correct-img.dog {
  height: 65%;
  bottom: 8%;
}

.correct-img.crab {
  height: 60%;
}

.correct-img.caterpillar {
  width: 25%;
}

.correct-img.ant {
  width: 30%;
}

.summary-text {
  width: 40%;
  background-color: #f6fbffff;
  height: 90%;
  left: 3%;
  top: 5%;
  border-radius: 1em;
  padding: 3%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10%;
  text-align: left;
}

.summary-text .congrats {
  color: #44ae17;
  text-align: center;
  font-size: 4vmin;
  font-weight: 900;
}

.summary-text :is(.vertebrates, .invertebrates) {
  display: none;
}

.overlay .xray-container .xray-enlarged {
  width: 100%;
  object-fit: contain;
}

.highlight {
  animation: hightlightAnim 1s 5 ease alternate-reverse forwards;
}

@keyframes hightlightAnim {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.6);
  }
}

@media screen and (min-aspect-ratio: 4/3) {
  .animals-answer .title {
    font-size: 3.5vh;
  }
  .summary-text .congrats {
    font-size: 4vh;
  }
}