.cover-text {
  width: 60%;
  height: 30%;
  background-color: #efefefff;
  font-size: 6vmin;
  border-radius: 0.5em;
  display: grid;
  place-content: center;
}

.coverboardfull {
  background-color: #fff2cc;
}

.character {
  left: unset;
  right: 5%;
}

.sabina-centered {
  left: 50%;
}

.sp-2 {
  left: 15%;
}

.bg-full.mt-2 {
  height: 90%;
  top: 10%;
}

:is(.car, .ambulance, ) {
  position: absolute;
  width: 15%;
  object-fit: contain;
  top: 25%;
  user-select: none;
}

.ambulance {
  left: -30%;
  width: 20%;
}

.car1 {
  left: 20%;
}

.car2 {
  left: 38%;
  top: 38%;
}

.car3 {
  left: 55%;
}

.car4 {
  left: 75%;
  top: 38%;
}

:is(.car5, .car6, .car7, .car8, .car9) {
  top: 70%;
}

.car5 {
  left: 5%;
}

.car6 {
  left: 25%;
  top: 58%;
}

.car7 {
  left: 42%;
}

.car8 {
  left: 60%;
  top: 58%;
}

.car9 {
  left: 80%;
}

.car:is(.car2, .car4, .car6, .car8) {
  cursor: grab;
  pointer-events: none;
}

.droppable {
  width: 15%;
  height: 13%;
  border: 0.1em solid transparent;
  position: absolute;
  top: 26%;
  left: 38%;
  transition: all 500ms ease;
  user-select: none;
}

.droppable img {
  width: 100%;
  height: 100%;
  position: unset;
}

.highlight-dropzone {
  animation: dropzone 500ms 5 ease alternate-reverse;
}

@keyframes dropzone {
  to {
    border-color: #ff0000;
  }
}

.droppable.drop2 {
  left: 75%;
}

.great-job {
  color: #1155cc;
  background-color: #efefefff;
  border: 0.08em solid #cccccc;
  border-radius: 0.5em;
  width: 40%;
  font-size: 5vmin;
  padding: 5%;
  display: none;
}

.girl {
  left: 45%;
}

.pointer {
  left: 50%;
}
.shoes-instruction {
  width: 22%;
  height: 30%;
  position: absolute;
  top: 50%;
  left: 60%;
  padding: 0 2%;
}

.shoes-instruction label {
  font-size: 2.3vmin;
  font-weight: 500;
}

.shoes-instruction img {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: -50% 0 0;
  cursor: pointer;
}

.shoes {
  height: 5%;
  top: 65%;
  left: 20%;
  display: none;
}

.nosmoking-sign,
.qna-container .nurse-container {
  background-color: #d9d9d9ff;
  padding: 2%;
  border: 0.15em solid #3c78d8;
  border-radius: 2em;
}

.qna-container.nohorn .options-container {
  top: -20%;
}

.nohorn-text,
.beep-text,
.hospital-ticket__counter {
  position: absolute;
}

.nohorn-text {
  top: 40%;
  right: 1%;
  font-size: 2vmin;
  color: #ff0000;
  font-weight: 700;
}

.nohorn-text:lang(np) {
  right: 2%;
}

.beep-text {
  bottom: 9%;
  left: 33%;
  font-weight: 800;
}

.hospital-ticket__counter {
  top: 22%;
  right: 1%;
  font-size: 4.3vmin;
  font-weight: 800;
  color: #fff;
  width: 38%;
  height: 16%;
  padding: 1%;
  display: grid;
  place-content: center;
}

.nosmoking-sign {
  height: 17%;
  width: 15%;
  border-radius: 1em;
  top: 11%;
  left: 50%;
  padding: 1%;
}

.nosmoking-sign img {
  width: 80%;
  height: 80%;
  object-fit: contain;
}

.nosmoking-sign label {
  width: max-content;
  font-weight: 800;
  font-size: 2vmin;
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%);
}

.smoking-person {
  left: 30%;
}

.pointer-smoking {
  top: 20%;
  left: 60%;
  width: 8%;
  object-fit: contain;
}

.qna-container {
  align-items: center;
}

.qna-container .question-content {
  flex: 2;
}

.hospital {
  top: 5%;
  object-fit: contain;
}

.nurse-container {
  position: absolute;
  inset: 30% 0 0 25%;
  margin: auto;
  height: 60%;
  width: 65%;
  padding: 3%;
}

.nurse-container img {
  height: 80%;
}

.nurse-container label {
  color: #3c78d8;
  margin-top: 1em;
}

.correct-incorrect__img {
  height: 70%;
  position: absolute;
  z-index: 30;
  right: -30%;
  top: 50%;
  transform: translateY(-50%);
}

.road-milestone,
.bajeko-hotel {
  position: absolute;
  height: 100%;
  width: 100%;
  inset: 0;
  margin: auto;
}

.bajeko-hotel img{
  width: 55%;
  height: 60%;
  object-fit: contain;
  inset: unset;
  bottom: 0;
  right: 0;
}

.road-milestone label {
  position: absolute;
  bottom: 18%;
  right: 27%;
  width: 6.3%;
  height: 10%;
  font-size: 1.2vmin;
  display: grid;
  place-content: center;
}

.highlight-milestone {
  animation: highlightMilestone 500ms 5 ease alternate;
}

@keyframes highlightMilestone {
  to {
    color: #457982;
    transform: scale(0.8);
  }
}

.qna-container .nepal-container {
  padding: 0;
  margin-right: 1em;
}

.bajeko-hotel label {
  position: absolute;
  font-size: 2vmin;
  color: #e69138;
  background-color: #ffe599ff;
  border: 0.2em solid #de7d00;
  border-radius: 0.5em;
  width: 18%;
  padding: 2%;
  right: 28%;
  top: 50%;
}

div.header-summary {
  padding: 2%;
}

/* 
Slider Stylesheet
*/

.slider-container {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 70%;
  background-color: #fff;
  border-radius: 0.5em;
  padding: 0 5%;
  user-select: none;
}

.slider-content {
  width: 85%;
  margin: auto;
  overflow: hidden;
}

.slider-controller {
  position: absolute;
  height: 25%;
  z-index: 50;
  left: 1%;
  top: 50%;
  transform: translateY(-50%);
  object-fit: contain;
  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;
  left: 0;
}

.slider .sliderimg-container {
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 3%;
}

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

.slider label {
  z-index: 50;
  position: absolute;
  font-weight: 500;
  font-size: 1vw;
  white-space: pre-wrap;
  width: 17%;
}

.shoe-rack__label {
  top: 28%;
  left: 60%;
}

.slider .nosmoking-label {
  left: 38%;
  top: 38%;
}

.slider .silence-label {
  width: max-content;
  left: 58%;
  top: 63%;
  font-size: 2vmin;
}

.slider .nohorn-label {
  left: 76.5%;
  top: 25%;
}

.slider .road-label {
  left: 57.5%;
  top: 60%;
  font-size: 3vmin;
}

.slider .road-label:lang(np) {
  left: 61%;
}

.slider .dhawa-label {
  left: 26%;
  top: 30%;
  width: 20%;
  font-size: 2.5vmin;
  color: #e69138;
  background-color: #ffe599ff;
  border: 0.2em solid #de7d00;
  border-radius: 0.5em;
}

@media screen and (min-aspect-ratio: 4/3) {
  .cover-text,
  .great-job {
    font-size: 6vh;
  }

  .shoes-instruction label,
  .bajeko-hotel label,
  .nosmoking-sign label,
  .nohorn-text {
    font-size: 2.3vh;
  }
  .shoes-instruction label:lang(np),
  .bajeko-hotel label:lang(np),
  .nohorn-text:lang(np) {
    font-size: 2.1vh;
  }

  .hospital-ticket__counter {
    font-size: 4vh;
  }

  .road-milestone label {
    font-size: 1.2vh;
  }

  .slider label {
    font-size: 1.6vh;
  }

  .slider .silence-label {
    font-size: 2vh;
  }

  .slider .road-label,
  .beep-text {
    font-size: 3vh;
  }

  .slider .dhawa-label {
    font-size: 2.5vh;
  }
}