:root {
	/**
	* These colors are copied from Ethan Schoonover's Solarized color scheme
	* See: https://ethanschoonover.com/solarized/
	*/
	--base03: #002b36;
	--base02: #073642;
	--base01: #586e75;
	--base00: #657b83;
	--base0: #839496;
	--base1: #93a1a1;
	--base2: #eee8d5;
	--base3: #fdf6e3;
	--yellow: #b58900;
	--orange: #cb4b16;
	--red: #dc322f;
	--magenta: #d33682;
	--violet: #6c71c4;
	--blue: #268bd2;
	--cyan: #2aa198;
	--green: #859900;
}

html {
	--optional-emphasized-content: var(--base1);
	--primary-content: var(--base0);
	--secondary-content: var(--base01);
	--background-highlights: var(--base02);
	--background: var(--base03);
}

@media (prefers-color-scheme: light) {
	html {
		--optional-emphasized-content: var(--base01);
		--primary-content: var(--base00);
		--secondary-content: var(--base1);
		--background-highlights: var(--base2);
		--background: var(--base3);
	}
}


html {
	font-size: 21px;
}

body {
	margin: 0 0 0 0;
	display: flex;
	flex-direction: row;
	width: 100%;
	font-family: Georgia, 'Times New Roman', Times, serif;
	background-color: var(--background);
	color: var(--primary-content);
	line-height: 140%;
}

h1 {
	color: var(--cyan);
	text-transform: uppercase;
	font-family: Verdana, sans-serif;
	font-size: 0.8rem;
	font-weight: normal;
}

h2 {
	color: var(--base1);
	font-family: Verdana, sans-serif;
	font-size: 2rem;
	font-weight: normal;
	line-height: 100%;
}

h3 {
	margin-top: 3em;
	margin-bottom: 1em;
	color: var(--secondary-content);
	text-transform: uppercase;
	font-family: Verdana, sans-serif;
	font-size: 0.8rem;
	font-weight: normal;
}

p {
	margin-bottom: 40px;
}

a {
	color: var(--blue);
	text-decoration: underline;
	transition: color 250ms
}

a:hover {
	color: var(--violet);
	transition: color 250ms
}

em {
	color: var(--yellow);
}

nav ol {
	padding-inline-start: 0;
}

nav li {
	list-style-type: none;
}

body > header, body > main {
	display: block;
	flex: 1 1;
	text-wrap: wrap;
	min-width: 50%;
}

body > header {
	position: sticky;
	top: 0;
	display: block;
	min-height: 100vh;
	align-self: flex-start;
	-webkit-box-flex: 0;
	background-size: cover;
	object-fit: cover;
	flex: 0 1 auto;
	background-position: 50% 50%;
	background-image: url('../images/me.jpg');
}

footer {
	margin-top: 240px;
	color: var(--secondary-content);
}

body > main > div {
	padding: 10% 10% 0 10%;
	max-width: 800px;
}

@media screen and (orientation: portrait), (max-width: 650px) {
	body {
		display: block;
	}

	body > header {
		position: relative;
		min-height: 50vh;
		background-size: cover;
		background-repeat: no-repeat;
	}
}