@import "@fontsource/montserrat/400.css";
@import "@fontsource/montserrat/500.css";
@import "@fontsource/montserrat/600.css";
@import "@fontsource/montserrat/700.css";
@import "@fontsource/montserrat/800.css";

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

@layer base {
  b,
  strong {
    @apply font-semibold;
  }

  i,
  em {
    @apply italic;
  }

  u {
    @apply underline;
  }

  s {
    @apply line-through;
  }

  abbr[title] {
    @apply underline decoration-dotted underline-offset-2;
  }

  q,
  blockquote {
    @apply italic tracking-wider;
  }
  blockquote {
    @apply border-gray border-l-4 pl-3 italic;
  }

  kbd {
    @apply bg-gray rounded-md px-2 dark:text-black;
  }

  mark {
    @apply bg-yellow rounded-md px-2;
  }

  ol {
    @apply list-inside list-decimal;
  }

  ul {
    @apply list-inside list-disc;
  }

  dfn {
    @apply font-semibold italic;
    cursor: help;
  }
}

body {
  @apply bg-background dark:bg-background-dark font-sans text-black dark:text-white;
}

@keyframes ripple {
  to {
    opacity: 0;
    transform: scale(2);
  }
}