:root {
	--menu-button-size: calc(2em + 14px);
}

@media (max-width: 1200px) {
	body {
		background-position: 80% 0;
	}
}

@media (max-width: 840px) {
	header h1, #home {
		left: 0;
		padding: 0;
		width: 100%;
		text-align: center;
	}
	#home div {
		left: 0;
		top: 180px;
		width: 100%;
	}
}

@media (max-width: 750px) {
	#nav-button {
		height: 48px;
		background-position: 8px;
	}
	header {
		height: 48px;
	}
	nav {
		top: 48px;
	}
	header h1 {
		font-size: 22pt;
		margin-top: .2em;
	}
	#home {
		top: -50px;
		padding: 20px;
		background-color: rgba(0, 0, 0, .5);
	}
    #home h1 {
        font-size: 2.625rem;
    }
    #home h2 {
        font-size: 18pt;
    }
	#home div {
		height: 160px;
		top: 160px;
	}
	nav {
		width: 100%;
	}
}

@media (max-width: 1080px) {
	main {
		border-left: none;
		padding: 0;
	}
	#content {
		padding: 20px 8px;
	}
	footer > section {
		padding: 30px 8px;
	}
}

/* footer */
@media (max-width: 1330px) {
	footer {
		text-align: left;
	}
}