/* xmas 2024 */
.char-question .modal-answers {
  margin-bottom: 100px;
}

.scale-char {
  animation: scale-char-anim-mob 0.85s forwards 1;
}

@keyframes scale-char-anim-mob {
  0% { transform: rotate(0deg); scale: 1; }
  10% { transform: rotate(80deg); }
  30% { transform: rotate(0deg); scale: 1.3175; }
  50% { transform: rotate(-80deg); scale: 1.3175; }
  90% { transform: rotate(0deg); scale: 1.3175; }
  100% { transform: rotate(0deg); scale: 1.25; }
}

@keyframes scale-char-anim {
  0% { transform: rotate(0deg); scale: 1; }
  10% { transform: rotate(80deg); }
  30% { transform: rotate(0deg); scale: 1.3175; }
  50% { transform: rotate(-80deg); scale: 1.3175; }
  90% { transform: rotate(0deg); scale: 1.3175; }
  100% { transform: rotate(0deg); scale: 1; }
}

/* do the following changes */

.selected {
  box-shadow: 0 0 10px green inset;
  transition: box-shadow 2s ease;
}

/* Question characters */
.char-q-nat img {
  scale: 1.85;
  margin-bottom: 15px;
}

.char-q-didi img {
  scale: 1.5;
  margin-bottom: 70px;
}

.char-q-joey img,
.char-q-ollie img,
.char-q-granny img {
  scale: 1.3;
  margin-bottom: 45px;
}

.char-q-ollie img {
  scale: 1.125;
}

.char-q-ollie img {
  margin-left: -20px;
}

.char-q-millie img {
  margin-bottom: 10px;
}

/* Bubbles */
.bubble-error {
  top: -170px;
  left: -80px;
}

.granny-bubble-error {
  left: -80px;
}

.didi-bubble-error {
  top: -150px;
  left: -120px;
}

.millie-bubble-error {
  top: -120px;
  left: -125px;
}

.bubble-correct {
  top: -150px;
  left: -150px;
}

.didi-bubble-correct {
  top: -130px;
  left: -180px;
}

.millie-bubble-correct {
  top: -100px;
  left: -180px;
}


@media screen and (min-width: 1024px) {
  .char-q img {

  }  

  .char-q-nat img {
    scale: 1.5;
    margin-left: 50px;
    margin-bottom: -20px;
  }

  .char-q-didi img {
    scale: 1.25;
    margin-left: 20px;
    margin-bottom: 35px;
  }

  .char-q-ollie img {
    scale: 0.8;
    margin-left: 20px;
  }

  .char-q-joey,
  .char-q-granny {
    margin-left: 20px;
  }

  .char-q-joey img,
  .char-q-millie img,
  .char-q-granny img {
    scale: initial;
    margin-bottom: -20px;
  }

  .char-q-joey img {
    margin-bottom: -20px;
  }

  .char-q-millie img {
    margin-left: 50px;
  }

  .bubble-error {
    top: -150px;
    left: 30px;
  }

  .didi-bubble-error {
    top: -125px;
    left: -50px;
  }

  .ollie-bubble-error {
    top: -130px;
    left: -30px; 
  }

  .granny-bubble-error {
    left: -90px;
  }

  .millie-bubble-error {
    top: -120px;
    left: -100px;
  }

  .bubble-correct {
    top: -130px;
    left: -120px;
  }

  .didi-bubble-correct {
    top: -100px;
    left: -170px;
  }

  .joey-bubble-correct {
    top: -110px;
    left: -130px;
  }

  .ollie-bubble-correct {
    top: -95px;
    left: -120px; 
  }

  .millie-bubble-correct {
    top: -90px;
    left: -130px;
  }

  .scale-char {
    animation: scale-char-anim 0.85s forwards 1;
  }

}




/* Animation of characters */

@keyframes anichar {
  0% { transform: rotate(0deg); }
  11% { transform: rotate(5deg); }
  11.25% { transform: rotate(0deg); }
  11.5% { transform: rotate(-10deg); }

  11.75% { transform: rotate(3deg); }
  12% { transform: rotate(0deg); }
  12.25% { transform: rotate(-7deg); }

  12.5% { transform: rotate(1deg); }
  12.75% { transform: rotate(0deg); }
  13% { transform: rotate(-5deg); }

  13.25% { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.char-off-joey img {
  animation: anichar 24s infinite forwards; animation-delay: 16.4s;
}

.char-off-didi img {
  animation: anichar 24s infinite forwards; animation-delay: 22.75s;
}

.char-off-ollie img {
  animation: anichar 24s infinite forwards; animation-delay: 7.21s;
}

.char-off-nat img {
  animation: anichar 24s infinite forwards; animation-delay: 4.3s;
}

.char-off-granny img {
  animation: anichar 24s infinite forwards; animation-delay: 11.6s;
}

.char-off-millie img {
  animation: anichar 24s infinite forwards; animation-delay: 19.7s;
}

.char-wrap.char-off img.scale-char {
  animation: none;
}