body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header .layer-inset {
  align-items: center;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

header nav {
  display: flex;
  gap: 1.5rem;
  flex: 1;
}

header nav a {
  color: var(--color-half);
}

header nav a:hover {
  color: var(--color-darkest);
}

.brand {
  align-items: center;
  display: flex;
  font-size: 1.5rem;
  font-weight: 700;
  gap: 0.5rem;
  letter-spacing: -0.03em;
}

footer {
  margin-top: auto;
}

footer .layer-inset {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

[data-theme='dark'] {
  --color-darkest: rgb(255, 255, 255);
  --color-darker: rgba(255, 255, 255, 0.7);
  --color-half: rgba(255, 255, 255, 0.5);
  --color-light: rgba(255, 255, 255, 0.1);
  --color-lighter: rgba(255, 255, 255, 0.05);
  --color-lightest: rgb(0, 0, 17);
}

[data-theme='light'] {
  --color-darkest: rgba(0, 0, 17, 0.9);
  --color-darker: rgba(0, 0, 17, 0.7);
  --color-half: rgba(0, 0, 17, 0.5);
  --color-light: rgba(0, 0, 17, 0.1);
  --color-lighter: rgba(0, 0, 17, 0.05);
  --color-lightest: rgb(255, 255, 255);
}