:root {
	--main-col-1: #5373ac;
	--main-col-2: #a85f16;
	--main-col-3: #cf8c55;
	--main-col-4: #d8dc73;
	--main-col-5: #eece9d;
	--main-col-6: #736a50;
	--col-shadow: #444;

	--col-body: var(--main-col-5);
	--col-body-background: var(--main-col-4);
	--col-a: var(--main-col-4);
	--col-h2: var(--main-col-3);
	--col-h2-over: var(--main-col-6);
	--col-h3: var(--main-col-5);
	--col-h3-over: var(--main-col-6);
	--col-content-background: var(--main-col-2);
	--col-header: var(--main-col-4);
	--col-header-background: var(--main-col-1);
	--col-header-h1: var(--main-col-4);
	--col-header-a-hover: var(--main-col-3);
	--col-header-a-target: var(--main-col-3);
	--col-landing-background: var(--main-col-1);
	--col-footer: var(--main-col-4);
	--col-footer-background: var(--main-col-1);
	--col-footer-a-hover: var(--main-col-3);

	--col-a: #eece9d;
	--col-b: #eece9d;
	--col-c: #eece9d;
	--col-d: #eece9d;
	--col-e: #eece9d;
	--col-f: #eece9d;
	--col-g: #eece9d;
	--col-h: #eece9d;
	--col-i: #eece9d;
	--col-j: #eece9d;
}

body {
	color: var(--col-body);
	background-color: var(--col-body-background);
	margin: 0;
	font-family: Lato, Arial, sans-serif;
	overflow-x: hidden;
}

h2,
h3 {
	text-shadow: 1px 1px 1px var(--col-shadow);

	:hover {
		text-shadow: 0 0 10px var(--col-shadow);
	}
}

h2 {
	color: var(--col-h2);
}

h3 {
	color: var(--col-h3);
}

a {
	color: var(--color-a);
	text-decoration: none;
}

img,
object {
	box-shadow: 0 0 2px var(--col-shadow);
}

a img:hover {
	box-shadow: 0 0 10px var(--col-shadow);
}

li {
	margin: 1em;
}

object:focus {
	outline: none;
}

#header {
	color: var(--col-header);
	text-shadow: 1px 1px 2px var(--col-shadow);
	background-color: var(--col-header-background);
	height: var(--header-height);

	a:hover {
		color: var(--col-header-a-hover);
	}
}

#header h1 {
	/* width = 8rem */
	color: var(--col-header-h1);
	font-size: 2rem;
	margin: auto 0.75rem;

	a {
		vertical-align: middle;
	}

	@media (width >=650px) {
		float: left;
	}

	@media (width < 650px) {
		text-align: center;
	}
}

footer {
	background-color: var(--col-footer-background);
	color: var(--col-footer);
	text-shadow: 1px 1px 2px var(--col-shadow);
	font-size: 0.8rem;
	padding: 1em 2em;
	text-align: right;

	a {
		color: inherit;
		display: inline-block;
		margin: 0 2em;
		font-weight: bold;
	}

	a:hover {
		color: var(--col-footer-a-hover);
	}
}

#content {
	background-color: var(--col-content-background);
	box-shadow: 1px 1px 10px var(--col-shadow);
	max-width: 800px;

	@media (width >=1400px) {
		max-width: 1000px;
	}

	margin: auto;
	padding: 1em;

	p {
		text-align: justify;
	}

	a {
		color: var(--col-a);
	}

	h2,
	h3 {
		scroll-margin-top: calc(1em + var(--header-height));
		margin-top: 2em;
		clear: left;

		a {
			color: inherit;
		}

		a:hover {
			color: inherit;
		}
	}
}