@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap");
@import "tailwindcss";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@theme {
  --color-primary: #ff2d00;
  --color-primary-50: oklch(1 0.244 31.9);
  --color-primary-100: oklch(0.91 0.244 31.9);
  --color-primary-200: oklch(0.84 0.244 31.9);
  --color-primary-300: oklch(0.77 0.244 31.9);
  --color-primary-400: oklch(0.7 0.244 31.9);
  --color-primary-500: #ff2d00;
  --color-primary-600: oklch(0.55 0.244 31.9);
  --color-primary-700: oklch(0.45 0.244 31.9);
  --color-primary-800: oklch(0.35 0.244 31.9);
  --color-primary-900: oklch(0.18 0.244 31.9);
  --color-primary-950: oklch(0.09 0.244 31.9);

  --font-header: "Lutschine Bold", sans-serif;
  --font-header-alt: "Lutschine Regular", sans-serif;
  --font-body: "Roboto", sans-serif;
  --font-mono: "Fira Code", monospace;

  --animate-floaty: floaty 18s forwards linear infinite;

  @keyframes floaty {
    from {
      transform: rotate(0deg) translateX(16px) rotate(0deg);
    }
    to {
      transform: rotate(360deg) translateX(16px) rotate(-360deg);
    }
  }

  --animate-wiggle: wiggle 1s ease-in-out infinite;

  @keyframes wiggle {
    0%,
    100% {
      transform: rotate(-3deg);
    }
    50% {
      transform: rotate(3deg);
    }
  }

  --animate-scrolling-awards: scrolling-awards 24s linear infinite;

  @keyframes scrolling-awards {
    0% {
      transform: translateY(1%);
    }
    1% {
      transform: translateY(0.95%);
    }
    3% {
      transform: translateY(0.7%);
    }
    85% {
      transform: translateY(-50%);
    }
    88% {
      transform: translateY(-50.5%);
    }
    89% {
      transform: translateY(-50.4%);
    }
    96% {
      transform: translateY(0.95%);
    }
    100% {
      transform: translateY(1%);
    }
  }
}

@layer base {
  @font-face {
    font-family: "Lutschine Bold";
    src: url("/fonts/lutschine-bold.otf") format("opentype");
  }

  @font-face {
    font-family: "Lutschine Regular";
    src: url("/fonts/lutschine-regular.otf") format("opentype");
  }

  html {
    font-family: "Roboto", sans-serif;
    @apply text-gray-600 dark:text-white;
  }

  .astro-code {
    @apply overflow-auto;
  }

  .astro-code code {
    counter-reset: step;
    counter-increment: step 0;

    @apply text-sm;
    @apply block;
    @apply w-fit min-w-full;
  }

  .astro-code code .line {
    @apply inline-block;
    @apply w-full;
    @apply pr-8;
    @apply bg-white dark:bg-gray-100;
  }

  .astro-code code .line::before {
    content: counter(step);
    counter-increment: step;

    @apply w-10;
    @apply mr-2 ml-auto pt-1 pr-2 pb-1;
    @apply inline-block;
    @apply text-right;

    @apply sticky;
    @apply left-0;
    @apply z-10;

    @apply bg-gray-200;
  }
}