:root {
  --spacing-tiny: 4px;
  --spacing-small: 8px;
  --spacing-small-plus: 12px;
  --spacing-medium: 16px;
  --spacing-medium-plus: 24px;
  --spacing-large: 32px;
  --spacing-x-large: 48px;
  --spacing-xx-large: 64px;
  --spacing-xxx-large: 96px;
  --spacing-huge: 128px;
  --spacing-huge-plus: 192px;
  --spacing-massive: 256px;
  --spacing-giant: 384px;
  --spacing-giant-plus: 512px;
  --spacing-ultra: 640px;
  --spacing-ultimate: 768px;
}

body {
  color: #222;
  font-family: sans-serif;
  line-height: 1.5;
  margin: 1rem;
  max-width: 768px;
}

header {
  border-bottom: 1px solid #222;
  margin-bottom: 1rem;
}

header ul {
  list-style: none;
  display: flex;
  gap: var(--spacing-small);
  margin: 0;
  padding: 0;
}

header ul li {

}

footer {
  border-top: 1px solid #222;
  margin-top: 1rem;
}

a {
  color: #00e;
  text-decoration: none;
}