*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #ffffff;
  --text: #000000;
  --cyan: #00c4d8;
  --blue: #1558c0;
  --menu-pad-x: 1rem;
  --menu-width: calc((30ch + (2 * var(--menu-pad-x))) * 0.8);
  --footer-height: 2.15rem;
  --header-name-size: 1.7rem;
  --font: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

html {
  color-scheme: light;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}

a {
  color: var(--blue);
}

a:hover,
a:focus-visible {
  color: var(--cyan);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
  }
}