html {
  scroll-behavior: smooth;
  scroll-padding-top: 7rem;
}

body.ms-site {
  background: var(--ms-color-surface-page);
  color: var(--ms-color-text-secondary);
  font-family: var(--ms-font-sans);
  font-size: var(--ms-font-size-body);
  line-height: var(--ms-line-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.ms-site :where(h1, h2, h3, h4, h5, h6) {
  color: var(--ms-color-text-primary);
  font-family: var(--ms-font-sans);
  font-weight: 700;
  line-height: var(--ms-line-heading);
  text-wrap: balance;
}

body.ms-site h1 { font-size: var(--ms-font-size-h1); }
body.ms-site h2 { font-size: var(--ms-font-size-h2); }
body.ms-site h3 { font-size: var(--ms-font-size-h3); }
body.ms-site h4 { font-size: var(--ms-font-size-h4); }

body.ms-site :where(p, li) {
  text-wrap: pretty;
}

body.ms-site :where(a) {
  color: inherit;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

body.ms-site :where(a:hover) {
  color: var(--ms-color-action-primary-hover);
}

body.ms-site :where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ms-color-focus);
  outline-offset: 3px;
}

body.ms-site :where(button, input, select, textarea) {
  font: inherit;
}

body.ms-site :where(img, picture, video, canvas, svg) {
  display: block;
  max-width: 100%;
}

body.ms-site ::selection {
  background: var(--ms-color-brand-100);
  color: var(--ms-color-neutral-950);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}