main.css

/**
 * Based on: https://github.com/robsheldon/sscaffold-css
 * Stripped down just for main html and body and with some adaptations of colors and font sizing.
 * The rest of the styling takes place within shadow roots of main app and child elements using sccaffoldStyle.js.
 */

*,
*:after,
*:before {
  /* Set universal box sizing with inheritance. [3] */
  box-sizing: inherit;
}

html {
  /* Fix the line height in all browsers. [1] */
  line-height: 1.15;
  /* Set universal box sizing with inheritance. [3] */
  box-sizing: border-box;
  /* Font size is set to 62.5% so that all future rem sizes are based on a 10px font. [6] */
  font-size: 62.5%;
}

body {
  /* Smoothly scroll between anchors. [4] */
  scroll-behavior: smooth;
  /* Prevent adjustments of font size after orientation changes in iOS. [1] */
  -webkit-text-size-adjust: 100%;
  /* optimizeLegibility may cause some performance issues in some browsers
      (https://marco.org/2012/11/15/text-rendering-optimize-legibility) -- not sure if
      this is still current. Probably safe to assume that an appropriately legible
      font will be used anyway. [4] */
  text-rendering: optimizeSpeed;
  /* Disable iOS text selection */
  -webkit-user-select: none;
  /* Disable iOS link tap highlighting */
  -webkit-tap-highlight-color: transparent;
  /* Disable iOS callouts */
  -webkit-touch-callout: none;
  /* Remove the default margin for these elements in all browsers. [1],[4] */
  margin: 0;
  /* Ensure that the page body fills the display even if the content does not. [4] */
  min-height: 100vh;
  /* Typography: font, letter-spacing, line-height, text-*, list-style-type. */
  font-family: 'Open Sans', Corbel, 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans',
    'DejaVu Sans', 'Bitstream Vera Sans', 'Liberation Sans', Verdana, 'Verdana Ref', sans-serif;
  font-size: calc(10px + 2vmin);
  font-weight: 300;
  line-height: 1.6;
  /* Colors, borders, outline, box-shadow, appearance, and opacity. */
  color: var(--primary-text-color);
  background-color: var(--primary-color);
}

/******************************************************************************
 *
 *   CREDITS
 * 
 *   [1] normalize.css, https://github.com/necolas/normalize.css/
 *   [2] milligram.css, https://github.com/milligram/milligram/
 *   [3] https://css-tricks.com/box-sizing/
 *   [4] https://hankchizljaw.com/wrote/a-modern-css-reset/
 *   [5] https://github.com/jgthms/minireset.css/
 *   [6] skeleton.css, https://github.com/dhg/Skeleton
 * 
 ******************************************************************************/