@view-transition {
  navigation: auto;
}

:root {
  --vmin: calc(100vmin / 1080);

  --c-green: #2dae4a;
  --c-blue: #0a4da0;
  --c-blue-bright: #2a82e4;

  --c-text: #333333;
  --c-text-dark: #1a1a1a;
  --c-text-muted: #666666;
  --c-border: #e8e8e8;
  --c-white: #ffffff;
  --c-footer-bg: #13487a;
  --c-footer-text: #a9a6c2;

  --header-h: calc(77 * var(--vmin));
  --header-h-m: calc(44 * var(--vmin));
  --container-w: calc(1732 * var(--vmin));
  --container-pad: calc(60 * var(--vmin));
  --radius-pill: calc(999 * var(--vmin));

  --fs-section-title: calc(30 * var(--vmin));
}

@media (max-width: 768px) {
  :root {
    --vmin: calc(100vmin / 768);
    --header-h: var(--header-h-m);
    --container-pad: calc(20 * var(--vmin));
    --fs-section-title: calc(24 * var(--vmin));
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.container {
  width: min(var(--container-w), calc(100% - var(--container-pad) * 2));
  margin-inline: auto;
}

.section-title {
  font-size: var(--fs-section-title);
  font-weight: bold;
  color: var(--c-text-dark);
  line-height: 1.3;
}

html.i18n-pending body {
  visibility: hidden;
}

html.i18n-fade body {
  animation: i18n-fade-in 0.18s ease;
}

@keyframes i18n-fade-in {
  from {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.i18n-fade body {
    animation: none;
  }
}