@import "tailwindcss";

@theme {
  --font-mi: MiSans, ui-sans-serif, system-ui, sans-serif;

  --animate-spinner-bar: spinner-bar 6s linear infinite;
  --animate-fade-in: fade-in 0.3s both;
  --animate-fade-out: fade-out 0.3s both;
  --animate-fade-in-left: fade-in-left 0.3s backwards;
  --animate-fade-off-right: fade-off-right 0.3s forwards;

  @keyframes spinner-bar {
    0% {
      width: 0%;
    }
    100% {
      width: 100%;
    }
  }

  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

  @keyframes fade-in-left {
    0% {
      opacity: 0;
      transform: translateX(1.5rem);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes fade-off-right {
    0% {
      opacity: 1;
      transform: translateX(0);
    }
    100% {
      opacity: 0;
      transform: translateX(1.5rem);
    }
  }
}

@media screen and (max-width: 639px) {
  :root {
    font-size: 14px;
  }
}