@tailwind base;

a {
  @apply text-grey-darker no-underline
}

a:hover,
a:focus {
  @apply text-blue-dark underline
}

@tailwind components;

.content {
  @apply font-serif text-lg leading-loose;
  @screen md {
    @apply text-xl
  }

  h2 {
    @apply text-2xl font-bold mt-8 -mb-5
  }

  a {
    @apply text-black font-bold pb-px border-b-2;

    &:hover {
      @apply border-transparent no-underline
    }
  }

  * + * {
    @apply mt-6
  }

  ul {
    @apply list-disc ml-6
  }

  li + li {
    @apply mt-0
  }
}

@tailwind utilities;