@import "tailwindcss";

@custom-variant dark (&:is(.dark, .dark *));

@font-face {
  font-family: 'Nunito';
  src: url('/fonts/Nunito-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@layer base {
  html {
    scroll-behavior: smooth;
    font-family: 'Nunito', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }
}

@theme {
  --animate-speed-streak-1: speed-streak 0.6s linear infinite;
  --animate-speed-streak-2: speed-streak 0.5s linear 0.18s infinite;
  --animate-speed-streak-3: speed-streak 0.7s linear 0.35s infinite;
}

@keyframes speed-streak {
  0% {
    opacity: 0;
    transform: translateX(0) scaleX(0.2);
  }

  50% {
    opacity: 0.8;
    transform: translateX(-8px) scaleX(1);
  }

  100% {
    opacity: 0;
    transform: translateX(-16px) scaleX(0);
  }
}