/*
 ==============================================================================
 Base
 ==============================================================================
*/

/**
 * Base styling for "root" elements.
 *
 * 1. `border-box` please
 * 2. Set default font size (in pixels)
 * 3. Set base typography properties and colors
 */

html {
  box-sizing: border-box; /* [1] */
  font-size: 14px;

  /**
   * We start with visibility hidden so we can
   * toggle it after webfont is loaded to prevet
   * FOUT
   **/
  visibility: hidden;

  @media (--medium-up) {
    font-size: var(--font-size-base); /* [2] */
  }
}

html.show { visibility: visible !important; }

*,
*::before,
*::after {
  box-sizing: inherit; /* [1] */
}

body { /* [3] */
  font-family: var(--font-family-serif);
  font-size: var(--font-size);
  line-height: var(--line-height);
  color: var(--color);
  background-color: var(--color-bg);
}

/**
 * Make sure checkboxes are vertically aligned with their labels.
 */

input[type=checkbox] {
  vertical-align: middle;
}

/**
 * Fix <sub> visually
 */

sub:before {
  content: "_";
}

sub {
  bottom: 0;
  font-size: 100%;
}