solarsailer/base.css

## base.css
/**
 * Box-model:
 * 1. Change default box-model to border-box (the better model).
 * 2. All elements will inherit from the <html> box-model.
 */

html {
  box-sizing: border-box; /* 1 */
}

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

/**
 * Typography, set once and forget:
 * 1. Change default typography (10px, 140% line-height, sans-serif).
 *    Line-height should be between 120% and 145%
 * 2. Set a flexible font-size on the document (1.5em, ie. 1.5 * 10px (default typo) = 15px).
 *
 * Then, use 'rem' for spacing (margin, padding, etc.) to have consistent spacings everywhere.
 * And use 'em' for font sizes only. Everything will inherit from the body value and change accordingly.
 * Try a bit with this system, find the correct default values that you need and never touch them again.
 */

html {
  font: 62.5%/1.4 Verdana, sans-serif; /* 1 */
}

body {
  font-size: 1.5em; /* 2 */
}

/**
 * Full-viewport body.
 */

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
}

/**
 * Colors:
 * 1. Content.
 * 2. Overscroll (what appears when you scroll the page top on OSes with scroll inertia).
 * 3. Document background.
 * 4. Selection state.
 */

html {
  color: black; /* 1 */
  background: tomato; /* 2 */
}

body {
  background: white; /* 3 */
}

::selection { /* 4 */
  color: white;
  background: tomato;
}
	/**
	* Box-model:
	* 1. Change default box-model to border-box (the better model).
	* 2. All elements will inherit from the <html> box-model.
	*/

	html {
	box-sizing: border-box; /* 1 */
	}

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

	/**
	* Typography, set once and forget:
	* 1. Change default typography (10px, 140% line-height, sans-serif).
	* Line-height should be between 120% and 145%
	* 2. Set a flexible font-size on the document (1.5em, ie. 1.5 * 10px (default typo) = 15px).
	*
	* Then, use 'rem' for spacing (margin, padding, etc.) to have consistent spacings everywhere.
	* And use 'em' for font sizes only. Everything will inherit from the body value and change accordingly.
	* Try a bit with this system, find the correct default values that you need and never touch them again.
	*/

	html {
	font: 62.5%/1.4 Verdana, sans-serif; /* 1 */
	}

	body {
	font-size: 1.5em; /* 2 */
	}

	/**
	* Full-viewport body.
	*/

	body {
	position: relative;
	min-height: 100vh;
	margin: 0;
	}

	/**
	* Colors:
	* 1. Content.
	* 2. Overscroll (what appears when you scroll the page top on OSes with scroll inertia).
	* 3. Document background.
	* 4. Selection state.
	*/

	html {
	color: black; /* 1 */
	background: tomato; /* 2 */
	}

	body {
	background: white; /* 3 */
	}

	::selection { /* 4 */
	color: white;
	background: tomato;
	}