html, body {
	height: 100%;
}

body {
	background-color: #fff;
	color: #012;
	display: flex;
	flex-direction: column;
}

.container {
	max-width: 40rem;
}

a, a:hover, a:active {
	color: #c35;
}

a:visited {
	color: #934;
}

/* Header and Nav */

header {
	background-color: #234;
	padding-top: 1rem;
	padding-bottom: 0.5rem;
}

header::selection,
header *::selection {
	background-color: #89b;
}

h1 a:visited {
	color: #c35;
}

.nav, .nav a, .nav a:active, .nav a:visited {
	color: #dee6e9;
}

.nav a.current {
	color: #c35;
}

/* Main */

main {
	flex: 1 0 auto;
}

article {
	margin-top: 2rem;
}

.avatar {
	float: left;
	margin: 2.75rem 2rem 1rem 0;
	width: 192px;
	height: auto;
}

@media (max-width: 500px) {
	.avatar {
		float: none;
		margin: 0 10% 1rem 10%;
		display: block;
		width: 80%;
		height: auto;
	}
}

.img-col {
	text-align: center;
}

/* Footer */

footer {
	background-color: #345;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: 2rem;
	color: #dee6e9;
	text-align: center;
}