:root
{
	--hue: 150;
}

html
{
	background-color: hsl(0, 0%, 12.5%);
	color: hsl(0, 0%, 100%);
	font-family: sans-serif;
}

header
{
	background-color: hsl(0, 0%, 25%);
	/*
	border-bottom: 2px solid #888;
	padding-bottom: 16px;
	 */
	margin-bottom: 16px;
}

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

nav > ul > li
{
	display: inline-block;
	margin: 8px;
	padding: 8px;
}

nav > ul > li:not(.active)
{
	display: none;
}

nav a
{
	padding: 8px;
	text-decoration: none;
	color: hsl(var(--hue), 0%, 87.5%);
}

nav a:hover
{
	color: hsl(var(--hue), 0%, 100%);
	border-bottom: 2px solid hsl(0, 0%, 100%);
	transition: 1s ease color;
}

a
{
	text-decoration: none;
	color: hsl(var(--hue), 50%, 50%);
}

a:hover
{
	color: hsl(var(--hue), 50%, 75%);
}

input,select,textarea
{
	padding: 4px;
}

button
{
	padding: 8px;
	text-transform: uppercase;
	cursor: pointer;
}

input,select,textarea,button
{
	background-color: hsl(0, 0%, 0%);
	color: hsl(0, 0%, 100%);
	border: 1px solid hsl(0, 0%, 75%);
	margin: 4px;
	border-radius: 2px;
}