@import "tailwindcss";
@import "@catppuccin/tailwindcss/mocha.css";

@font-face {
  font-family: Stray;
  font-display: swap;
  src: url("/stray.woff2") format("woff2");
}

@theme {
  --animate-marquee: marquee 15s linear infinite;
  --animate-marquee2: marquee2 15s linear infinite;
  @keyframes marquee {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
  }
  @keyframes marquee2 {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0%); }
  }
}

@layer base {
  * { @apply transition-all duration-300 ease-in-out; }
  html { @apply h-full scroll-smooth; }
  body { @apply bg-ctp-crust text-ctp-text h-full; }
  h1 { @apply text-3xl md:text-4xl font-semibold my-4; }
  h2 { @apply text-2xl md:text-3xl font-bold my-4; }
  h3 { @apply text-xl md:text-2xl font-bold my-4; }
  h4 { @apply text-lg md:text-xl font-bold my-4; }
  h5 { @apply text-base md:text-lg font-bold my-4; }
  h6 { @apply text-sm md:text-base font-bold my-4; }
  a { @apply text-ctp-sapphire hover:text-ctp-sky no-underline; }
  article { @apply p-2 sm:p-4 text-ctp-subtext0; }
  p { @apply my-4 text-sm sm:text-base; }
  code { @apply bg-ctp-overlay0 p-0.5 rounded-md; }
  pre { @apply bg-ctp-overlay0 p-4 rounded-md my-4 overflow-x-auto; }
  blockquote { @apply bg-ctp-overlay0 p-4; }
  hr { @apply my-4 border-ctp-overlay1; }
  ul { @apply list-disc ml-6; }
  ol { @apply list-decimal ml-6; }
  header { @apply flex flex-col justify-between items-center gap-4; }
  nav { @apply flex gap-4; }
  img { @apply object-cover object-center; }
  form { @apply my-4 flex flex-col justify-center items-start; }
  input { @apply m-1 py-1 px-2 w-full border bg-ctp-overlay1 text-ctp-subtext1; }
  button { @apply m-1 py-1 px-2 w-full text-base; }
  footer { @apply my-4 text-center; }
  table { @apply w-full my-4; }
  thead { @apply bg-ctp-overlay0; }
  tbody { @apply bg-ctp-base text-ctp-subtext0; }
  tr, th, td { @apply p-1 border border-ctp-overlay1; }
}