/*-- components/typography --*/
html {
  font-family: var(--font-sans);
}
body {
  color: var(--body-color);
  background-color: var(--body-background);
}
:any-link:not(button, .button), .hover {
  text-decoration: none;
  transition: all var(--unit-transition);
  color: var(--link-color);
  &:hover {
    color: var(--link-hover);
    cursor: pointer;
  }
}

#{$headings} {
  color: var(--heading-color);
  &:first-child {
    margin-top: 0;
  }
  &:not(:first-child) {
    margin-top: 2rem;
  }
}
p:first-child {
  margin-top: 0;
}
.intro {
  font-size: var(--size-large);
  // background-color: var(--grey-100);
  // padding: 0.5rem 0.75rem;
}

li:not(:last-child) {
  margin-bottom: 0.5rem;
}
/*
p, li {
  // max-width: 65ch;
}
*/
// hack to fix some examples
.output > .caption + h1 {
  margin-top: 0;
}