*
{
	box-sizing: border-box
}
footer
{
	background-color: #474e5c;
	color: #eee;
	display: grid;
	grid-template-columns: 1fr 1fr;
	padding: 2rem clamp(1em, 10vw, 7rem);
}
footer .contact-info
{
	justify-self: center;
}
footer .contact-info > p
{
	display: flex;
	line-height: 1.6;
}
footer .contact-info svg
{
	fill: #eee;
	margin-right: 1rem;
	width: 1.2rem;
}
footer .footer-links
{
	justify-self: center;
	line-height: 1.6;
}
footer a, footer a:visited
{
	color: #eee;
}
footer > p
{
	grid-column: 1 / 4;
	justify-self: center;
	padding: 1rem;
}
h1, h2, h3, h4, h5, h6
{
	font-family: "Raleway", sans-serif;
}
header
{
	display: grid;
	grid-template-columns: 1fr 1.5fr; /* two columns */
	grid-template-rows: auto; /* one row */
}
main
{
	margin: 0 auto;
	max-width: 80rem;
}
nav
{
	align-self: center;
	grid-column: 2 / 3; /* spans second column */
	grid-row: 1 / 2; /* spans first row */
	text-align: right;
}
nav > a, nav > a:visited
{
	color: #333;
	padding: 0.6rem 1rem;
	text-decoration: none;
}
nav > a:hover
{
	background-color: #2bbed8;
	color: #eee;
}
nav > .login, nav > .login:visited
{
	color: #eee;
	margin: 0 1rem;
}
#logo
{
	font-size: 2rem;
	grid-column: 1 / 2; /* spans first column */
	grid-row: 1 / 2; /* spans first row */
}
@media (max-width: 46rem)
{
	header
	{
		grid-template-columns: 1fr; /* one column */
		grid-template-rows: auto auto; /* two rows */
	}
	nav
	{
		grid-column: 1 / 2; /* spans first column */
		grid-row: 2 / 3; /* spans second row */
		line-height: 2.4;
		margin-bottom: 0.5rem;
		text-align: left;
	}
	#logo
	{
		grid-column: 1 / 2; /* spans first column */
		grid-row: 1 / 2; /* spans first row */
	}
}
@media (max-width: 30rem)
{
	footer .contact-info
	{
		grid-column: 1 / 3;
		margin-top: 1rem;
	}
	footer .footer-links
	{
		grid-column: 1 / 3;
	}
}