/* ==========================================================================
   ELEMENTS / PAGE
   ========================================================================== */

/**
 * High-level, page-level styling.
 *
 * 1. Ensure the page always fills at least the entire height of the viewport.
 * 2. Force scroll bars to always be visible to prevent awkward 'jumps' when
 *    navigating between pages that do/do not have enough content to produce
 *    scroll bars naturally.
 * 3. 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.
 * 4. Fonts on OSX will look more consistent with other systems that do not
 *    render text using sub-pixel anti-aliasing.
 * 5. Prevent certain mobile browsers from automatically zooming fonts.
 * 6. Set the, non-standard, color of the highlight that appears over a link
 *    when it is being tapped in some browsers.
 * 7. https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
 */

html {
	height: 100%;
	min-height: 100%; /* [1] */
	overflow-y: scroll; /* [2] */
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: calc((16px / 16) * 1em); /* [3] */
	-webkit-font-smoothing: antialiased; /* [4] */
	-moz-osx-font-smoothing: grayscale; /* [4] */
	line-height: 1.5; /* [3] */
	-webkit-text-size-adjust: 100%; /* [5] */
	-ms-text-size-adjust: 100%; /* [5] */
	color: #4a4a4a;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	touch-action: manipulation; /* [7] */
}

	@media (min-width: 40em) {
		html {
			line-height: calc((1.5 + 1.8) / 2);
		}
	}
	
	@media (min-width: 60em) {
		html {
			line-height: 1.8;
		}
	}


body {
	display: flex;
	min-height: 100%;
	flex-direction: column;
}


main {
	flex-grow: 1;
}