/**
 * Global: page
 * Default markup for page level elements
 */

/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
  box-sizing: var(--htmlBoxSizing);
  min-height: var(--htmlHeight); /* [3] */
  overflow-y: var(--htmlOverflowY); /* [2] */
  font-family: var(--htmlFontFamily);
  font-size: calc(var(--htmlFontSize) / 16 * 100%); /* 1 */
  font-weight: var(--htmlFontWeight); /* 1 */
  line-height: var(--htmlLineHeight);
  background-color: var(--htmlBackgroundColor);
}

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

body {
  -webkit-font-smoothing: antialiased;
  color: var(--bodyColor);
}

::-moz-selection { /* stylelint-disable-line */
  color: var(--bodySelectionColor);
  text-shadow: var(--bodySelectionTextShadow);
  background-color: var(--bodySelectionBackgroundColor);
}

::selection {
  color: var(--bodySelectionColor);
  text-shadow: var(--bodySelectionTextShadow);
  background-color: var(--bodySelectionBackgroundColor);
}