html,
body {
  background: var(--basis);
  color: var(--color);
  font-family: var(--fonts);
  font-size: var(--font-size-text);
  font-weight: 400;
  letter-spacing: 0.05em;
  line-height: 2;
}

body {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 0 var(--page-margin);
}

body>* {
  max-width: var(--content-width);
  width: 100%;
}

main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 800;
}

h2 {
  color: var(--pale);
  font-size: var(--font-size-title);
  font-weight: 400;
  margin-top: 3rem;
}

a,
a:visited {
  color: var(--informative);
}

span {
  color: var(--pale);
  font-size: var(--font-size-2);
  opacity: .4;
}

ul,
ul li {
  list-style-type: none;
}

ul li {
  display: flex;
}

ul li::before {
  content: "-";
  color: var(--medium);
  margin-right: 8px;
}

ul li > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

h3+ul {
  margin-top: -16px;
}

small {
  font-size: var(--font-size-text);
}

article>* {
  margin-bottom: 32px;
}