: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;
}

#overlay
{
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.75);
	z-index: 2;
}

#overlay_content
{
	position: absolute;
	top: 50%;
	left: 50%;
	
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	
	padding: 32px;
	
	background-color: hsl(0, 0%, 12.5%);
	color: hsl(0, 0%, 100%);
}

#overlay:not(.overlay_active)
{
	display: none;
}

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;
}