HTML {
  scrollbar-color: var(--color-primary) var(--color-secondary);
}
body {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 300;
  font-style: normal;
  font-size: var(--step-0);
  margin: var(--space-xs-l);
  background-color: #e9eaec;
}
@media screen and (min-width: 30em) {
  body {
	margin-block-start: calc(0.5 * var(--space-xs-l));
  }
}
/* Reset */
ul {
  margin: 0;
  padding: 0;
}
/* Headlines */
h1, h2 {
  font-weight: 300;
}
h1 {
  font-size: var(--step-5);
}
@media screen and (max-width: 30em) {
  h1 {
    hyphens: auto;
	hyphenate-limit-chars: 10;
  }
}
h2 {
  color: var(--color-highlight);
  font-size: var(--step-2);
  font-weight: 300;
}
/* Links */
a {
  text-decoration: none;
}
a:hover, 
a:not([class])[aria-current="page"] {
  color: var(--color-highlight);
}
article a {
  background-color: var(--color-secondary);
}
/* Navigation */
nav {
  font-size: var(--step--1);
  /*margin-block-start: var(--flow-space);*/
}
@media screen and (min-width: 30em) {
  nav {
    font-size: var(--step-0);
  }
}
nav ul {
  display: flex;
  flex-flow: row;
  justify-content: flex-end;
  gap: 1.5em;
}
nav ul li:first-child {
  margin-inline-end: auto;
}
/* Article */
article > *:not(h1, h2) {
  max-inline-size: 64ch;
}
article > h1 {
  max-inline-size: 36ch;
}
article > h2 {
  max-inline-size: 50ch;
  margin-block-start: 2em;
}
article ul {
  list-style-type: disc;
  padding-inline-start: 1em;
}