:root {
  --font: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --navy: #00164f;
  --red: #ec091f;
  --red-deep: #920729;
  --green: #61ce70;
  --wa: #25d366;
  --ink: #000;
  --muted: #333;
  --container: 1140px;
}

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

html { font-size: 16px; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 400;
  color: var(--muted);
  background: #fff;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

.container {
  width: min(var(--container), calc(100% - 30px));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 8px;
  top: -40px;
  z-index: 80;
  background: #fff;
  color: var(--navy);
  padding: 8px 12px;
}

.skip-link:focus { top: 8px; }

[id] { scroll-margin-top: 64px; }
