:root {
  color-scheme: light dark;

  /* colors */
  --hsla-black: 232, 26%, 15%, 1;
  --hsla-white: 190, 38%, 95%, 1;

  /* dark theme */
  --dark-bg: var(--hsla-black);
  --dark-fg: var(--hsla-white);

  /* light theme */
  --light-bg: var(--hsla-white);
  --light-fg: var(--hsla-black);
}

body {
  /* layout */
  display: flex;
  flex-direction: column;

  /* dimensions */
  height: 100dvh;
  margin: 0 1rem;
  padding: 0;

  /* theme */
  background-color: light-dark(hsla(var(--light-bg)), hsla(var(--dark-bg)));
  color: light-dark(hsla(var(--light-fg)), hsla(var(--dark-fg)));

  /* typography */
  font-family: sans-serif;
  font-size: calc(15px + 0.3906vw);

  /* media queries */
  @media (width <= 768px) {
    text-align: center;
  }
}

header {
  font-size: 1.8rem;
}

main {
  flex: auto;
}

footer {
  font-size: 0.8rem;
  opacity: 0.25;
  position: sticky;
}

a:active,
a:hover,
a:visited,
a:link {
  color: light-dark(hsla(var(--light-fg)), hsla(var(--dark-fg)));
  text-decoration: none;
}