@import "normalize.css";
@import "fonts.css";

:root{
	--light: #f1f1f1;
	--dark: #333;
	--maxwidth:800px;
}

html{
	height: 100%;
}

body{
    font-family: TitilliumWebRegular;
	font-size: 16px;
	line-height: 175%;
	color:var(--dark);
	background-color:var(--light);
	height: 100%;
}

.content {
	margin: 2em auto;
	padding:2em;
	max-width:var(--maxwidth);
}

.titlebar {
	position:fixed;
	top:0;
	width:100%;
	text-align: center;
	overflow:hidden;
	
	background-color:var(--dark);
	color:var(--light);
	
}

.navbar {
	position:fixed;
	bottom:0;
	width:100%;
	text-align: center;
	overflow:hidden;
	
	background-color:var(--dark);
	color:var(--light);
}

.navbar-content {
	margin: 0 auto;
	max-width:var(--maxwidth);
	height:4em;
	display:flex;
	justify-content:center;
}

.navbar a, .titlebar a {
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	background-color:var(--dark);
	color:var(--light);	
}

.navbar a:hover, .titlebar a:hover {
	color:var(--dark);
	background-color:var(--light);
}

.titlecontent{
	height:100%;
	display:flex;
	justify-content: center;
	align-items: center;
}