.bg-full {
  object-fit: fill;
}

.title label {
  color: #fff;
}

.character-name:not(.teacherdiv) {
  bottom: 10%;
}
.character-name.teacherdiv {
  bottom: 12%;
}
.amirdiv {
  left: 50%;
}
.saradiv {
  left: 70%;
}

.instruction {
  position: absolute;
  z-index: 100;
  width: 100%;
  border: 0.2em solid #fff;
  text-align: left;
  background: rgba(221, 223, 231, 0.9);
  box-shadow: 0 0.15em 0.1em 0 rgba(156, 161, 156, 0.25);
  font-family: andikanew, sans-serif;
  padding: 1.8% 2%;
  color: #011375;
  font-weight: 600;
  display: none;
  font-size: 0.7em;
}

.title img {
  width: 100%;
  object-fit: fill;
}

.character-img {
  top: unset;
  bottom: 0;
  width: auto;
  height: 45%;
}

.character-img.amir {
  left: 40%;
}
.character-img.sara {
  left: 60%;
}

.character {
  bottom: 45%;
}

.character:not(.character_A) {
  bottom: 45%;
}

.character_A {
  bottom: 53%;
}

.character_B {
  left: 35%;
}
.character_C {
  left: 65%;
}

.toptextclass {
  color: #424242;
}

.character_A .toptextclass {
  background-color: #d3cdcd;
  color: #000;
}
.character_B .toptextclass {
  background-color: #92dd6b;
}
.character_C .toptextclass {
  background-color: #b5cfe7;
}

.character_A :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #717171;
  color: #fff;
}
.character_B :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #72cc43;
}
.character_C :is(.characterSpeechbox, .checkboxOptionBlock) {
  background: #a7bcf6;
}

.character_B .speakericon {
  filter: invert(1);
}

.congratulationtext {
  position: relative;
}

.ex-number-template-score {
  background-color: #6473f9;
}