ultrawidify/src/main.css

@import "tailwindcss";
@import "tailwindcss/utilities";

@theme {
  --color-primary: #ff872c;
  --color-primary-50:  #ffddbe;
  --color-primary-100: #ffcda0;
  --color-primary-200: #ffbd83;
  --color-primary-300: #ffac66;
  --color-primary-400: #ff9a4a;
  --color-primary-500: #ff872c;
  --color-primary-600: #de7622;
  --color-primary-700: #be6518;
  --color-primary-800: #9f540e;
  --color-primary-900: #824406;
  --color-primary-950: #663400;
}

@import './ui/res/styles/forms.css';
@import './ui/res/styles/fonts.css';
@import './ui/res/styles/buttons.css';

html, body {
  @apply bg-stone-950 text-stone-300;
  font-size: 16px;
}
@media (max-width: 999px) {
  html, body {
    font-size: 12px;
  }
}

@layer base {
  body {
    @apply font-sans text-stone-300;
  }

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

  h2 {
    @apply text-[1.75em];
  }

  h3 {
    @apply text-primary-300 text-[1.25em] mt-4 border-b-1 border-b-stone-700;
  }

  a {
    @apply text-primary-400;

    &:hover {
      @apply text-primary-300;
    }
  }

  p {
    @apply mt-1 mb-2;
  }

  p, li {
    @apply leading-tight;
  }

  ul {
    @apply bg-stone-900/50 px-4 py-2 mt-1 mb-2;

    li {
      @apply ml-4 list-disc marker:text-primary-400 mt-1 mb-2;
    }
  }

  small, strike {
    @apply opacity-50;
  }
}