simple_tails.css

@layer base {

  html {
    @apply text-[18.4px] scroll-smooth;
  }

  body {
    @apply m-0 grid bg-theme-bg;
    grid-template-columns: 1fr min(45rem, 90%) 1fr;
  }

  body > * {
    grid-column: 2;
  }

  .simple-tails {
    @apply
    prose
    prose-headings:my-6
    prose-headings:break-words
    prose-headings:font-semibold
    prose-headings:leading-tight
    prose-headings:text-theme-text
    prose-h1:sm:text-[3rem]
    prose-h1:text-[2.5rem]
    prose-h2:sm:text-[2.6rem]
    prose-h2:text-[2.1rem]
    prose-h3:sm:text-[2rem]
    prose-h3:text-[1.75rem]
    prose-h4:text-[1.44rem]
    prose-h4:sm:text-[1.25rem]
    prose-h5:text-[1.15rem]
    prose-h6:text-[0.96rem]
    prose-p:text-theme-text
    prose-a:text-blue-600
    prose-blockquote:mx-24
    prose-blockquote:font-extralight
    prose-blockquote:text-theme-text
    prose-figcaption:text-center
    prose-strong:text-theme-text
    prose-code:font-mono
    prose-code:font-extralight
    prose-code:text-theme-text-light
    prose-pre:bg-theme-accent-bg

    prose-pre:font-mono
    prose-pre:font-extralight
    prose-pre:text-theme-code
    prose-pre:border
    prose-pre:border-[1px]
    prose-pre:border-theme-border
    prose-ol:text-theme-text-light
    prose-ul:text-theme-text-light
    prose-table:text-theme-text-light
    prose-img:mx-auto
    prose-hr:my-0;
  }

   main {
    @apply mt-12;
  }

  textarea,
  select,
  input,
  progress {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
  }

  p, h1, h2, h3, h4, h5, h6 {
    @apply break-words;
  }

  .simple-tails nav {
    @apply mt-4 flex flex-col text-xl sm:mx-12 sm:flex-row sm:justify-between sm:text-2xl;
  }

  .simple-tails label {
    @apply block;
  }

  .simple-tails textarea,
  .simple-tails select,
  .simple-tails input[type="color"],
  .simple-tails input[type="date"],
  .simple-tails input[type="datetime-local"],
  .simple-tails input[type="email"],
  .simple-tails input[type="file"],
  .simple-tails input[type="hidden"],
  .simple-tails input[type="image"],
  .simple-tails input[type="month"],
  .simple-tails input[type="number"],
  .simple-tails input[type="password"],
  .simple-tails input[type="range"],
  .simple-tails input[type="reset"],
  .simple-tails input[type="search"],
  .simple-tails input[type="tel"],
  .simple-tails input[type="text"],
  .simple-tails input[type="time"],
  .simple-tails input[type="url"],
  .simple-tails input[type="week"] {
    @apply w-full rounded-md border-[1px] border-theme-border bg-theme-accent-bg py-2 px-4
    text-theme-text md:w-3/5;
  }

  input[type="submit"] {
    @apply w-full rounded-md border-2 border-theme-border bg-theme-accent-bg py-2 px-4
    text-theme-text md:w-3/5;
  }

  .simple-tails label {
    @apply text-theme-text;
  }

  ::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }

  .simple-tails button,
  .simple-tails input[type="submit"] {
    @apply my-2 mx-1 rounded bg-theme-accent py-3 px-4 text-center font-sans text-theme-bg
     hover:bg-gray-400 focus:cursor-pointer focus:outline-none focus:ring-2 focus:ring-gray-600 focus:ring-opacity-50;
  }

  .simple-tails .radio-group p {
    @apply -my-1 flex items-center text-theme-text;
  }

  .simple-tails .radio-group-name {
    @apply text-theme-text;
  }

  .simple-tails .radio-group label {
    @apply ml-2;
  }

  .simple-tails .checkbox-group p {
    @apply -my-1 mb-6 flex items-center;
  }

  .simple-tails .checkbox-group label {
    @apply ml-2;
  }

  button[disabled],
  [role="button"][aria-disabled="true"],
  input[type="submit"][disabled],
  input[type="reset"][disabled],
  input[type="button"][disabled],
  input[type="checkbox"][disabled],
  input[type="radio"][disabled],
  select[disabled] {
    @apply cursor-not-allowed opacity-50;
  }

  input:disabled,
  textarea:disabled,
  select:disabled {
    @apply cursor-not-allowed bg-theme-accent-bg !important;;
  }

  body > header {
    @apply bg-theme-accent-bg border-b-[1px] border-gray-500 text-center px-2 pb-8;
    grid-column: 1 / -1;
  }

  body > header h1 {
    @apply max-w-screen-xl mx-auto my-4 text-theme-text text-[3rem] font-bold;
  }

  body > header p {
    @apply mx-auto my-4 max-w-2xl text-xl text-theme-text;
  }

  /* Format navigation */
  header > nav {
    @apply mx-auto my-4 max-w-screen-xl;
  }


  header > nav a,
  header > nav a:visited,
  header > nav > form  {
    @apply text-theme-text mx-2 mb-4  py-[.1rem] px-4 rounded-md border-[1px] border-theme-border inline-block no-underline;
  }

  header > nav a:hover,
  header > nav > form:hover {
    @apply cursor-pointer brightness-150;
  }

  /* Reduce nav side on mobile */
  @media only screen and (max-width: 720px) {
    header > nav a,
    header > nav > form > button{
      @apply border-none p-0 leading-3 underline;
    }
  }
}