body {
	background: url("../images/background.jpg");
	background-size: cover;
	color: var(--white);
}

h2 {
	font-size: 2em;
}

a {
	color: var(--white);
}

.menu a {
	background-color: #B87C4C;
	padding: 8px 25px;
	border-radius: 2px;
	font-size: 1em;
	letter-spacing: 0.05em;
}

.btn {
	background: #B87C4C;
	color: var(--white);
	padding: .7em 4em;
	border-radius: 2px;
	letter-spacing: 0.05em;
}

.btn:hover,
.menu a:hover {
	background: var(--white);
	color: var(--black);
}

.footer {
	font-weight: 900;
	color: #B87C4C;
}

@media screen and (min-width: 500px ) {
	h1 { font-size: 1.2em; }
	h2 { font-size: 2.2em; }

	#hero {
		grid-column: 1 / span 10;
	}
}

@media screen and (min-width: 870px) {
	h2 { font-size: 2.6em; }
	h1 { font-size: 1.6em; }

	#hero {
		grid-column: 1/ span 8;
		margin-left: 7%;
	}

	#hero h2 {
		letter-spacing: 0.008em;
	}
}