*, *::before, *::after
{
	box-sizing: border-box;
}

html, body
{
	margin: 0;
	padding: 0;
	height: 100%;
}

body
{
	color: #dfdfdf;
	font-family: 'Kelson', sans-serif;
	font-size: 20px;
}

h1
{
	font-size: 40px;
	font-weight: 400;
	color: white;
}

p
{
	line-height: 30px;
}

a
{
	color: white;
	text-decoration: none;
	transition: all 0.3s ease;
}

.container
{
	margin: 0 auto;
	padding: 15px;
}

.container::before, .container::after
{
	content: " ";
	display: table;
}

.container::after
{
	clear: both;
}

#nav
{
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
}

#nav .logo
{
	display: inline-block;
	width: 80px;
}

#nav .logo svg
{
	fill: white;
}

#nav ul
{
	float: right;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	padding-top: 15px;
	padding-right: 30px;
	list-style: none;
}

#nav li
{
	margin-left: 25px;
}

@media (min-width: 480px)
{
	#nav li
	{
		float: left;
		line-height: 50px;
	}
}

#nav a
{
	color: #dfdfdf;
	transition: color 0.3s ease;
}

#nav a:hover
{
	color: white;
}

#page .container
{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 100px 15px;
	width: 100%;
	min-height: 100vh;
	text-align: center;
}