body {
  background-image: none;
}

.btb {
  margin-top: calc(var(--spacing) * 8);
}

.post-meta {
  color: var(--neutral-500);
  margin-bottom: calc(var(--spacing) * 8);
}

.post {
  h1 {
    margin-bottom: calc(var(--spacing) * 2);

    &:first-of-type {
      margin-top: calc(var(--spacing) * 8);
    }
  }

  h2 {
    margin-top: calc(var(--spacing) * 8);
    margin-bottom: calc(var(--spacing) * 4);
  }

  h3 {
    margin-top: calc(var(--spacing) * 6);
    margin-bottom: calc(var(--spacing) * 2);
  }

  p {
    line-height: 1.875;
    margin-bottom: calc(var(--spacing) * 4);
  }

  code {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    background-color: var(--neutral-200);
    padding: 0.1em 0.25em;
  }

  pre code {
    border-radius: 0;
  }
}

.post ul {
  color: var(--neutral-700);
  margin-bottom: calc(var(--spacing) * 8);

  li {
    list-style: disc inside;
    margin-bottom: var(--spacing);
  }

  a {
    transition: border-color 0.2s ease-in-out;
    border-bottom: 1px solid var(--neutral-500);

    &:hover {
      border-bottom: 1px solid var(--neutral-900);
    }
  }
}

pre {
  border-radius: var(--radius-md);
  margin-block: calc(var(--spacing) * 8);
  margin-inline: 0;
  padding-block: calc(var(--spacing) * 6);
  padding-inline: calc(var(--spacing) * 6);
  background-color: var(--neutral-100);
  overflow-x: auto;
  white-space: pre;

  code {
    font-family: var(--font-mono);
    font-size: var(--text-base);
  }

  code.hljs {
    padding: 0 !important;
    background: none !important;
  }

  /* Bleed on Desktop */
  @media (width >=768px) {
    margin-inline: -1.25rem;
  }
}

.like-btn {
  .like-count {
    font-size: var(--text-sm);
  }
}

.post-footer {
  margin-top: calc(var(--spacing) * 8);
}