.pointer {
  position: absolute;
  z-index: 20;
  bottom: 18%;
  left: 38.5%;
  cursor: pointer;
}

.pointer-pour,
.pointer-pour__2 {
  left: 40%;
}
.pointer-pour__3 {
  left: 41%;
}

.pointer-jug {
  left: 34%;
}

.speech-1.sm-text {
  font-size: 1.7svw;
}

.highlight-bottle {
  left: 34.5%;
  width: 4.3svw;
}
.highlight-bottlebeaker {
  position: absolute;
  width: 13svw;
  aspect-ratio: 1/1;
  z-index: 20;
  top: 54%;
  left: 34.5%;
  border: 2px solid red;
}
.highlight-beaker {
  position: absolute;
  width: 5svw;
  aspect-ratio: 2/3;
  z-index: 20;
  top: 63%;
  left: 39.5%;
  border: 2px solid red;
}
@media screen and (min-width: 1440px) {
  .highlight-bottle {
    width: 3.3svw;
  }
  .highlight-beaker {
    width: 4svw;
  }
  .highlight-bottlebeaker {
    width: 10svw;
  }
  .speech-1.sm-text {
    font-size: 1.4svw;
  }
}

.options {
  min-width: 10rem;
}

.question-2 {
  font-size: 0.5em;
  font-weight: normal;
  padding: 1em;
  border: 2px dashed #111;
  background-color: #eeeeee;
}

.question {
  font-size: 2.7svw;
  border-top: none;
  border-left: none;
  border-right: none;
}

@media screen and (min-width: 1440px) {
  .question {
    font-size: 2svw;
  }
}

.question-3 {
  --bg-color: #ffecfb;
  --border-color: #d477c0;
  --radius: 1em;
  --size: 1.5em;
  background-color: var(--bg-color);
  border: 2px solid var(--border-color);
  padding: 4%;
  font-size: var(--size);
  border-radius: var(--radius);
  position: absolute;
  top: 20%;
  right: 5%;
  z-index: 25;
  width: 40%;
}

.answer {
  width: 40%;
  top: 45%;
}
.answer-2 {
  top: 65%;
}

.answer-3 {
  top: 75%;
}

.answer-2 + .answer-3 {
  top: 83%;
}

.info {
  top: unset;
  bottom: 10%;
  padding-top: 0.6em;
  padding-bottom: 0.6em;
}

@media (min-aspect-ratio: 4/3) {
  .question {
    font-size: 4vh;
  }

  .answer:lang(np) {
    font-size: 2.3vh;
  }
  .speech-1.sm-text {
    font-size: 2.5vh;
  }
  .highlight-bottle {
    width: 6vh;
  }
  .highlight-bottlebeaker {
    width: 18vh;
  }
  .highlight-beaker {
    width: 7vh;
  }
}