* {
	font-family: sans-serif;
	line-height: 1.4;
}

html, body {
    height: 100%;
    overflow-x: hidden;
	display: flex;
	flex-direction: column;
    margin: 0;
}

#root {
    flex: 1;
    display: flex;
	flex-direction: column;
}

.center {
	text-align: center;
}

li {
	padding: 0.4em;
}

/* ------------------- */

.code {
	font-size: 0.5em;
	vertical-align: middle;
	padding: 0.5em;
}


#header {
	text-align: center;
	padding: 8em 0;
	margin: auto;
	width: 75%;
}

#header #title {
	font-size: 3em;
	font-weight: bolder;
}

#header #subtitle {
	padding: 1em;
	font-size: .9em;
	letter-spacing: .3em;
}

main {
	font-size: 1.2em;
}

main a {
	color: #7D321A;
	text-decoration: none;
}

main a:hover {
	color: #DE6B1E;
}

/* @media only screen and (max-width: 930px) {
	#header #title {
		font-size: 1.8em;
	}

	#header #subtitle {
		font-size: .6em;
		letter-spacing: .3em;
	}

	main {
		margin: 0 2rem;
	}

	html {
		font-size: 0.9em;
	}
}

@media only screen and (max-width: 450px) {
	#header #title {
		font-size: 1.4em;
	}

	#header #subtitle {
		font-size: .6em;
		letter-spacing: .2em;
	}

	html {
		font-size: 0.7em;
	}
} */

footer {
	flex-shrink: 0;
	padding: 1em;
	background-color: #333;
}

footer a {
	color: #b6b6b6;
	text-decoration: none;
}

footer a:hover {
	color: #ffff;
}

article {
	margin: 1.5em 0em 1.5em 1.5em;
}

article h4 {
	margin: 0.5em 0em 0.5em 0em;
}