header {
  width: 100%;
  max-width: 720px;
  padding: var(--space-xl) var(--space-md);
}

header a {
  color: var(--grey-600);
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

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

main {
  width: 100%;
  max-width: 720px;
  padding: var(--space-md);
  flex: 1;
}

h1 {
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-sm);
}

.last-updated {
  color: var(--grey-800);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-xl);
}

h2 {
  font-size: var(--font-size-xl);
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}

h3 {
  font-size: var(--font-size-lg);
  margin-top: var(--space-md);
  margin-bottom: var(--space-sm);
}

p {
  color: var(--grey-600);
  font-size: var(--font-size-md);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

ul {
  color: var(--grey-600);
  font-size: var(--font-size-md);
  line-height: 1.8;
  margin-bottom: var(--space-md);
  padding-left: var(--space-lg);
}

a {
  color: var(--grey-50);
}

a:hover {
  text-decoration: underline;
}

footer {
  font-size: var(--font-size-xs);
}

footer a {
  color: var(--grey-50);
  text-decoration: none;
}

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