@import "tailwindcss";
@plugin "@tailwindcss/typography";

@variant dark (&:where(.dark, .dark *));

@theme {
  --font-sans: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --animate-shiny-text: shiny-text 8s infinite;
}

@keyframes shiny-text {
  0%,
  90%,
  100% {
    background-position: calc(-100% - var(--shiny-width)) 0;
  }
  30%,
  60% {
    background-position: calc(100% + var(--shiny-width)) 0;
  }
}

body {
  background-color: #f6f6f6;
  color: black;
  --shiny-width: 50px;
}

.dark body {
  background-color: #0b0f19;
  color: white;
}

#root {
  min-height: 100vh;
}