@keyframes remove-learned-letter {
  from {
    transform: translateY(0);
    filter: opacity(100%) blur(0);
  }

  to {
    transform: translateY(-100%);
    filter: opacity(0%) blur(10px);
  }
}

.quiz__button--removed {
  animation: remove-learned-letter 0.3s ease-out forwards;
}

@keyframes show-quiz-letter {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  10% {
    opacity: 0;
  }

  90% {
    transform: scale(1.02);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.quiz__button--appearing {
  animation: show-quiz-letter 0.3s ease-out var(--quiz-button-appear-delay, 0ms) backwards;
}