@font-face {
  font-family: 'Minecraft';
  src: url('/fonts/minecraft/MinecraftRegular.otf');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Minecraft';
  src: url('/fonts/minecraft/MinecraftBold.otf');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'Minecraft';
  src: url('/fonts/minecraft/MinecraftBoldItalic.otf');
  font-weight: bold;
  font-style: italic;
}
@font-face {
  font-family: 'Minecraft';
  src: url('/fonts/minecraft/MinecraftItalic.otf');
  font-weight: normal;
  font-style: italic;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

* {
  font-family: 'Titillium Web', sans-serif;
}

@layer components {
  select, input {
    @apply text-black p-2 rounded-xl
  }
}

@layer utilities {
  .loader-ball {
    animation: color-cycle infinite 3s linear;
    animation-delay: var(--loader-delay);
    @apply m-auto
  }

  .loader {
    animation: spin 5s ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg)
    }
    100% {
      transform: rotate(1440deg)
    }
  }

  @keyframes color-cycle {
    0% {
      @apply bg-fire;
    }
    25% {
      @apply bg-grape;
    }
    50% {
      @apply bg-sky;
    }
    75% {
      @apply bg-wasabi;
    }
    100% {
      @apply bg-fire;
    }
  }
}