@import url(https://fonts.cdnfonts.com/css/open-dyslexic);
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer components;
@layer components {
  .flashcard-container {
    transition: transform 0.6s;
    transform-style: preserve-3d;
  }
  .flipped .flashcard-container {
    transform: rotateY(180deg);
  }
  .fade-out {
    animation: 1s fade-out-normal;
    animation-fill-mode: forwards;
  }
  .fade-in {
    animation: 1s fade-in-normal;
    animation-fill-mode: forwards;
  }
  .fade-out-correct {
    animation: 1.5s fade-out-correct;
    animation-fill-mode: forwards;
  }
  .wrong-answer {
    animation: wrong-answer 0.2s forwards 0s 2;
  }
  .correct-answer {
    animation: 0.5s correct-answer;
    animation-fill-mode: forwards;
  }
  .correct-answer-delay {
    animation: 0.5s correct-answer;
    animation-fill-mode: forwards;
    animation-delay: 0.25s;
  }
  @keyframes fade-out-normal {
    0% {
      opacity: 100;
    }
    100% {
      visibility: hidden;
      opacity: 0;
    }
  }
  @keyframes fade-out-correct {
    0% {
      opacity: 100;
      box-shadow: 0 0 0 0.2rem rgba(0, 255, 111, 0.32);
    }
    50% {
      box-shadow: 0 0 0 0.2rem rgb(0, 255, 111);
    }
    100% {
      visibility: hidden;
      opacity: 0;
    }
  }
  @keyframes fade-in-normal {
    0% {
      visibility: visible;
      opacity: 0;
    }
    100% {
      opacity: 100;
    }
  }
  @keyframes wrong-answer {
    0% {
      transform: rotateZ(0deg);
      box-shadow: 0 0 0 0.2rem rgba(220, 20, 60, 0.5);
    }
    20%, 80% {
      transform: rotateZ(1.5deg);
      box-shadow: 0 0 0 0.2rem rgba(255, 0, 51, 1);
    }
    50% {
      transform: rotateZ(-1.5deg);
      box-shadow: 0 0 0 0.2rem rgba(220, 20, 60, 0.5);
    }
    100% {
      transform: rotateZ(0deg);
      box-shadow: 0 0 0 0.2rem rgba(255, 0, 51, 1);
    }
  }
  @keyframes correct-answer {
    0% {
      box-shadow: 0 0 0 0.2rem rgba(0, 255, 111, 0.32);
    }
    100% {
      box-shadow: 0 0 0 0.2rem rgb(0, 255, 111);
    }
  }
}

[data-loading=""],[data-loading=show],[data-loading*=\|show]{display:none}

