.markdown, .markdown& {
  .subnav, .subnav& {
    @apply .flex;
    @apply .mt-6;
    @apply .mb-6;
    @apply .pb-2;
    @apply .border-b-2;
    @apply .border-smoke;

    .subnav-link, .subnav-link& {
      @apply .mr-6;
      @apply .leading-none;
      @apply .text-slate-dark;
      @apply .text-sm;
    }
  }

  > hr {
    @apply .my-12;
    @apply .border-t-0 .border-r-0 .border-l-0;
    @apply .border-b .border-smoke;
  }

  > a, > p a, a& {
    @apply .text-blue;
    &:hover {
      @apply .underline;
    }
  }

  > p code, p& code& {
    @apply .inline-block;
    @apply .bg-smoke-lighter;
    @apply .rounded-sm;
    @apply .text-sm;
    @apply .p-1;
    @apply .leading-none;
    @apply .whitespace-no-wrap;
    @apply .text-purple;
    @apply .font-mono;
    @apply .align-baseline;
    font-weight: 400;
  }

  > pre, pre& {
    @apply .font-mono;
    font-weight: 400;
  }

  > blockquote, blockquote& {
    @apply .italic;
    @apply .text-slate-dark;
    @apply .text-sm;
  }

  > h1, h1& {
    @apply .mb-1;
    @apply .leading-none;
    @apply .text-slate-darker;
    @apply .font-semibold;
    @apply .text-4xl;
  }

  > h2, h2& {
    @apply .mt-16;
    @apply .mb-8;
    @apply .text-slate-darker;
    @apply .leading-none;
    @apply .font-semibold;
    @apply .text-2xl;
  }

  > h3, h3& {
    @apply .mt-12;
    @apply .mb-4;
    @apply .text-slate-darker;
    @apply .leading-none;
    @apply .font-semibold;
    @apply .text-xl;
  }

  > p, p&, > blockquote > p {
    @apply .text-slate-dark;
    @apply .mt-4;
    @apply .mb-4;
    line-height: 1.75;
  }

  > ul, > ol {
    @apply .text-slate-dark;
    margin: 0 0 2em;
  }

  > ul {
    list-style: disc inside;
  }

  > ol {
    list-style: decimal inside;
  }

  > li {
    @apply .my-2;
    @apply .text-slate-dark;
  }

  > :not(pre) > code[class*="language-"], > pre[class*="language-"], pre[class*="language-"]& {
    @apply .bg-smoke-lighter;
    @apply .text-sm;
    @apply .leading-normal;
  }
}