/* Container
/*---------------------------------------------*/
.container {
	padding: 0 10px;
}

/* Header
/*---------------------------------------------*/
header {
	background: var(--header-background);
	color: var(--header-text);
	text-align: center;
	padding: 25px 0;
	margin-bottom: 30px;
}
header a,
footer a { 
	color: #eee; 
}
header a,
footer a,
header a:hover { 
	text-decoration: none;
}
header a:hover,
footer a:hover { 
	color: var(--header-text);
}
header h1 { 
	font-weight: bold;
	margin: 0; 
}
header h1 a {
	color: var(--header-text);
}
header ul {
	list-style: none;
	margin: 20px 0 0 0;
	padding: 0;
}
header ul li { 
	display: inline; 
	margin: 0 5px;
}
header ul a {
	font-weight: bold;
}

/* Footer
/*---------------------------------------------*/
footer {
	background: var(--footer-background);
	color: var(--footer-text);
	padding: 60px 0;
	margin-top: 80px;
}

/* For larger screens
/*---------------------------------------------*/
@media (min-width: 550px) {
	header {
		padding: 60px 0;
		margin-bottom: 80px;
	}
	header h1 {
		float: left;
	}
	header ul {
		float: right;
	}
}