:root
{
	--font-family-sans: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--font-family-serif: 'Source Serif 4', Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
	--color-black: rgb(22, 22, 22);
	--color-white: rgb(255, 255, 255);
	--color-near-white: rgb(236, 236, 236);
	--color-ivory: rgb(255,255,240);
	--color-beige: rgb(245,245,220);
	--color-blue: rgb(58, 103, 146);
	--color-dark-blue: rgb(2, 37, 59);
	--color-silver: var(--color-near-white);
	--color-light-yellow: rgb(251, 255, 218);
	--color-orange: rgb(193, 71, 0);
	--color-brown: rgb(122, 77, 55);
	--color-dark-gray: rgb(55, 65, 64);
	--color-medium-gray: rgb(76,76,76);
	--color-light-gray: rgb(189, 195, 199);
	--color-vlight-gray: var(--color-near-white);
	--color-green: rgb(62, 107, 72);
	--color-bright-green: rgb(142, 198, 83);
	--color-aqua: rgb(70, 107, 114);
	--color-red: rgb(184,45,30);
	--color-link: rgb(58, 79, 156);
	--color-link-visited: rgb(85, 26, 139);
	--color-link-hover: rgb(204, 0, 0);
	--color-button-primary-cta: rgba(188, 73, 45,1);
	--color-button-primary-cta-hover: rgb(189, 51, 49,.8);
	--mt1: margin-top: 1rem;
	--mt2: margin-top: 2rem;
	--mt3: margin-top: 3rem;
	--mb1: margin-top: 1rem;
	--mb2: margin-top: 2rem;
	--mb3: margin-top: 3rem;
}

html
{
	overflow-y: scroll;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.kb 
{
	float: right;
	margin: 1.5rem 0 1rem 1rem;
	width: 300px;
	height: auto;
}
/* this ensures that a scrollbar is always present */
*, *:before, *:after
{
	-webkit-box-sizing: inherit;
	box-sizing: inherit;
}

body
{
	color: var(--color-black);
	background-color: var(--color-silver);
	font-family: var(--font-family-serif);
	margin: 0;
	padding: 0;
	font-size: 100%;
	line-height: 1.6;
}

h1
{
	color: var(--color-silver);
	font-size: 3.75rem;
	var(--font-family-serif) ;
	margin-block: 0;
}

.intro-light h1
	{
	line-height: .9;
	font-size: 3.75rem;
	margin-block: 1.5rem 1rem;
	color: var(--color-blue) !important;
	}

p, li
{
	font-size: 1.25rem;
	font-family: var(--font-family-serif);
}

h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }
h4 { font-size: 1.25rem; }
.silver { color: var(--color-silver); }

.header-pic
{
	position: relative;
	margin-bottom: -1rem;
	max-width: 100%;
	/* 
	height: 600px;
	overflow: hidden;
 */
}

.header
{
	position: absolute;
	left: 8rem;
	bottom: -2rem;
	z-index: 101;
	background-color: var(--color-black);
	padding: 0 2rem .5rem 2rem;
}

.header a, .header a:visited
{
	color: var(--color-silver);
	cursor: pointer;
}

.header a:hover { color: var(--color-white); }
.intro { background: var(--color-blue); }
.intro p,
.intro h2,
.intro h3,
.intro h4,
.intro h5,
.intro li,
.intro a,
.intro a:visited { color: var(--color-silver); }
.intro-light { background: var(--color-ivory); }
.intro-light p,
.intro-light h2,
.intro-light h3,
.intro-light h4,
.intro-light h5,
.intro-light li,
.intro-light a,
.intro-light a:visited { color: var(--color-black); }

aside
{
	float: right;
	width: 30%;
	border: 1px solid var(--color-light-gray);
	border-radius: 5px;
	background: var(--color-aqua);
	padding: 1rem;
	margin: 1.5rem 0 1rem 1rem;
}

.intro-light aside p,
.intro-light aside h2,
.intro-light aside h3,
.intro-light aside h4,
.intro-light aside h5,
.intro-light aside li,
.intro-light aside a,
.intro-light aside a:visited { color: var(--color-silver); }
aside h2 { margin-block-start: 0; }

aside ul
{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

aside li
{
	line-height: 1.2;
	margin: 0 0 .5rem 0;
}

section
{
	max-width: 80rem;
	margin-inline: auto;
	padding-block: 3rem;
	position: relative;
}

section.readable
{
	max-width: 48rem;
	margin-inline: auto;
}

.header { }

.header h1, .header h2, .header p
{
	color: var(--color-silver);
	margin-block: 0;
}

.header h1 { color: var(--color-bright-green); }

@media only screen and (max-width: 670px)
{
	.header-pic
	{
		position: relative;
		margin-bottom: 0;
		display: block;
	}
	
	.header-pic img
	{
		max-width: 100%;
		height: 17.5rem;
	}
	
	.header
	{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 101;
		background-color: var(--color-black);
		padding: 0 1rem 1rem 2rem;
	}
	
	.header h1
	{
		line-height: .9;
		font-size: 2.375rem;
		margin-block: 1.5rem 1rem;
	}
	
	.header h2
	{
		line-height: 1.1;
		margin-block-end: 1rem;
	}
	
	p, li { font-size: 1rem; }
	section { padding-inline: 1rem; }
}

.source-serif-4-normal
{
	font-family: "Source Serif 4", serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

.lato-thin
{
	font-family: "Lato", sans-serif;
	font-weight: 100;
	font-style: normal;
}

.lato-light
{
	font-family: "Lato", sans-serif;
	font-weight: 300;
	font-style: normal;
}

.lato-regular
{
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: normal;
}

.lato-bold
{
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: normal;
}

.lato-black
{
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-style: normal;
}

.lato-thin-italic
{
	font-family: "Lato", sans-serif;
	font-weight: 100;
	font-style: italic;
}

.lato-light-italic
{
	font-family: "Lato", sans-serif;
	font-weight: 300;
	font-style: italic;
}

.lato-regular-italic
{
	font-family: "Lato", sans-serif;
	font-weight: 400;
	font-style: italic;
}

.lato-bold-italic
{
	font-family: "Lato", sans-serif;
	font-weight: 700;
	font-style: italic;
}

.lato-black-italic
{
	font-family: "Lato", sans-serif;
	font-weight: 900;
	font-style: italic;
}

/* 
IMPROVED .skipnav
 */

.skipnav
{
	position: relative;
	list-style-type: none;
	z-index: 101;
	margin-top: -2.4rem;
}

.skipnav li { display: inline-block; }

.sr1,.sr2,.sr3,.sr4,.sr5
{
	background: var(--color-vlight-gray);
	height: 30px;
	left: 2px;
	padding: 8px;
	position: absolute;
	transform: translateY(-100%);
	transition: transform 0.3s;
}

.sr1:focus,.sr2:focus,.sr3:focus,.sr4:focus,.sr5:focus
{
	background: var(--color-vlight-gray);
	transform: translateY(0%);
	margin-top: 1.2rem;
}