article {
  margin: 0 auto;
  line-height: 1.7;
}

article h2,
article h3,
article h4,
article h5,
article h6 {
  padding-top: var(--gap);
  padding-bottom: var(--gap-half);
}

article > * + * {
  margin-top: 1em;
}

article p {
  color: var(--article-color);
}

article aside p {
  margin: var(--gap-half) 0;
}

article video,
article img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: var(--gap) auto;
}

/* Lists */

article ul {
  list-style-position: inside;
  list-style-type: disc;
  padding-left: var(--gap);
}

article ul ul {
  list-style-type: circle;
}

article ul ul ul {
  list-style-type: square;
}

article ol {
  padding: 0;
  list-style-position: inside;
}
/* 
article ol li:not(:last-child),
article ul li:not(:last-child) {
  margin-bottom: var(--gap);
} */

article ol > li > ul {
  margin-left: var(--gap-double);
  list-style-position: inside;
  list-style-type: circle;
}

article aside,
article blockquote {
  border: 1px solid var(--lighter-gray);
  background: var(--lightest-gray);
  padding: var(--gap-half);
  color: var(--article-color);
  margin: var(--gap-half) 0;
}

/* Code Snippets */

.token-line:not(:last-child) {
  min-height: 1.4rem;
}

article *:not(pre) > code {
  font-family: var(--font-mono);
  font-size: 1rem;
}

article *:not(pre) > code::before,
article *:not(pre) > code::after {
  content: '\`';
  color: var(--gray);
  user-select: none;
}

article pre {
  overflow-x: auto;
  background: var(--lightest-gray);
  border-radius: var(--inline-radius);
  line-height: 1.8;
  padding: 1rem;
  font-size: 14px;
}

/* if article pre has a div above it, remove the border radius up top */
article div + pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Linkable Headers */

.header-link {
  /* padding-top: var(--header-height); */
  color: inherit;
  text-decoration: none;
}

article a  {
  text-decoration: none;
}

article a:hover {
  text-decoration: underline;
}

sup {
  font-size: 0.8em;
  vertical-align: super;
  line-height: 1;
  padding-top: var(--header-height);
}

.header-link::after {
  opacity: 0;
  content: '#';
  margin-left: var(--gap-half);
  color: var(--gray);
}

.header-link:hover::after {
  opacity: 1;
}

article ol li p:first-child {
  display: inline;
}

article details {
  margin-top: var(--gap-half);
  margin-bottom: var(--gap-half);
}

@media screen and (max-width: 760px) {
  .header-link::after {
    opacity: 0.5;
  }
}
