:root {
	--font-heading: Verdana, sans-serif;
	--font-body: Verdana, sans-serif;
	--font-monospace: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;

	font-size: 16px;
	font-family: var(--font-body);
}

@media screen and (max-width: 800px) {
	:root {
		font-size: 14px;
	}
}

@media screen and (min-width: 2000px) {
	:root {
		font-size: 18px;
	}
}



/* ===== Font Families ===== */

h1, h2, h3, h4, h5, h6,
th, dt {
	font-family: var(--font-heading);
}

p, td, dd, figcaption, li, blockquote,
input, textarea, select, option, optgroup, legend, fieldset, label, button {
	font-family: var(--font-body);
}

pre, code, samp {
	font-family: var(--font-monospace);
}

a, span,
b, i, u, q,
strong, em, mark, cite {
	font-family: inherit;
}



/* ===== Font Sizes ===== */

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 1.8rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.2rem;
}

h5 {
	font-size: 1rem;
}

h6 {
	font-size: 0.8rem;
}

th, td, dt, dd,
p, figcaption, li, blockquote,
pre,
input, textarea, select, option, optgroup, legend, fieldset, label, button {
	font-size: 1rem;
}

a, span,
b, i, u, q,
strong, em, mark, cite,
code, samp {
	font-size: inherit;
}



/* ===== Colors ===== */

::selection {
	color: var(--theme-text-selection);
	background: var(--theme-bg-text-selection);
}

h1, h2, h3, h4, h5, h6,
th, dt {
	color: var(--theme-text-heading)
}

p, td, dd, figcaption, li, blockquote,
input, textarea, select, option, optgroup, legend, fieldset, label {
	color: var(--theme-text-body)
}

button, input:is([type='button'], [type='submit'], [type='reset']) {
	color: var(--theme-text-button-primary);
	background: var(--theme-bg-button-primary);
}

:is(button, input:is([type='button'], [type='submit'], [type='reset'])):hover {
	background: var(--theme-bg-button-primary-hover);
}

:is(button, input:is([type='button'], [type='submit'], [type='reset'])).secondary {
	color: var(--theme-text-button-secondary);
	background: var(--theme-bg-button-secondary);
}

:is(button, input:is([type='button'], [type='submit'], [type='reset'])).secondary:hover {
	background: var(--theme-bg-button-secondary-hover);
}

pre, code, samp {
	color: var(--theme-code-normal);
}

a {
	color: var(--theme-text-link);
}

a:active {
	color: var(--theme-text-link-active);
}

a:visited {
	color: var(--theme-text-link-visited);
}

mark {
	color: var(--theme-text-highlight);
	background: var(--theme-bg-text-highlight);
}

span,
b, i, u, q,
strong, em, cite {
	color: inherit;
}