accords-library.com/src/tailwind.css

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

@layer base {

  * {
    @apply box-border font-body font-medium scroll-smooth scroll-m-8;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    @apply font-headers font-black;
  }

  a {
    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark dark:decoration-dark-dark hover:text-dark dark:hover:text-dark-dark;
  }

  *::selection {
    @apply bg-dark dark:bg-dark-dark text-light dark:text-dark-light;
  }

  /* SCROLLBARS STYLING */

  * {
    @apply [scrollbar-color:theme(colors.dark)_transparent] dark:[scrollbar-color:theme(colors.dark-dark)_transparent] [scrollbar-width:thin];
  }

  *::-webkit-scrollbar {
    @apply w-3 mobile:w-0;
  }

  *::-webkit-scrollbar-track {
    @apply bg-light dark:bg-dark-light;
  }

  *::-webkit-scrollbar-thumb {
    @apply bg-dark dark:bg-dark-dark rounded-full border-[3px] border-solid border-light dark:border-dark-light;
  }

  /* CHANGE PROSE DEFAULTS */

  .prose a {
    @apply transition-colors underline-offset-2 decoration-dotted underline decoration-dark dark:decoration-dark-dark hover:text-dark dark:hover:text-dark-dark;
  }

  .prose footer {
    @apply border-t-[3px] border-dotted pt-6;
  }

  .prose footer > div {
    @apply my-2 px-6 py-4 rounded-xl;
  }

  .prose footer > div:target {
    @apply bg-mid dark:bg-dark-mid shadow-inner-sm shadow-shade dark:shadow-dark-shade;
  }
}