/* Wrapper for the user-generated content inside projects */
.markdown-content h1 {
  @apply text-black-500;
  font-weight: 700;
  font-size: 21px;
  line-height: 28px;
  margin-bottom: 18px;
}

.markdown-content h2 {
  @apply text-black-400;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  margin-bottom: 14px;
}

.markdown-content h3 {
  @apply text-black-400;
  font-weight: 600;
  font-size: 16px;
  line-height: 18px;
  margin-bottom: 12px;
}

.markdown-content h4 {
  @apply text-black-400;
  font-weight: 500;
  font-size: 15px;
  line-height: 18px;
  margin-bottom: 8px;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol {
  @apply text-black-300;
  font-size: 14px;
  margin-bottom: 1rem;
}

/* reduce the vertical space between paragraphs */
.markdown-content p + p {
  margin-top: -0.75rem;
}

.markdown-content ul {
  @apply list-disc list-inside;
}

.markdown-content ol {
  @apply list-decimal list-inside;
}

/* remove the vertical space between nested lists */
.markdown-content ul ol,
.markdown-content ol ol,
.markdown-content ul ul,
.markdown-content ol ul {
  margin-bottom: 0;
}

/* specify the vertical space below pre elements inside of list items */
.markdown-content ul pre,
.markdown-content ol pre {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.markdown-content a {
  @apply text-blue-500;
  font-weight: 700;
}

.markdown-content a:hover,
.markdown-content a:focus {
  text-decoration: underline;
}

.markdown-content img {
  margin-bottom: 18px;
}

.markdown-content code {
  @apply bg-black-50;
  padding: 0.2em 0.4em;
  margin: 0;
  font-size: 85%;
  border-radius: 5px;
}

.markdown-content pre {
  @apply bg-black-50 text-black-500;
  border-radius: 5px;
  font-size: 85%;
  margin-bottom: 1rem;
  padding: 0.5rem 1rem;
}

/* Use this class on the direct parent of an anchor to display it on hover */
.anchor-reveal:hover > .anchor {
  opacity: 1;
}
