/* override browser default */

html, body {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

/* use viewport-relative units to cover page fully */

body {
	font-family: roc-grotesk-wide, sans-serif;
	font-weight: 500;
}

/* include border and padding in element width and height */

* {
	box-sizing: border-box;
}

a {
	color: black;
	text-decoration: none;
	transition: color .5s linear;
}

a:hover {
	text-decoration: underline;
	color: darkslategrey;
}
/* full-sized  container that fills up the page */

section {
	/* example padding, font-size, background, etc */
	font-size: 20px;
}

nav {
	padding: 1% 3%;
}

.nav-menu {
	display: inline-box;
	float: right;
	margin: 0;
}

.nav-menu li {
	list-style-type: none;
}

.grid {
	display: grid;
}

.full-height {
	height: 100vh;
}

.left-half {
	grid-column: 1;
	width: 50vw;
}

.right-half {
	grid-column: 2;
	width: 50vw;
}

article {
	position: relative;
	top: 50%;
	text-align: left;
	transform: translate(0, -50%);
	padding: 5rem;
}

.beans {
	height: 75vh;
	width: 100vw;
	background: url('../img/burly-coffee-hero-1.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
}

h1.coffee-headline {
	font-size: 4rem;
	font-weight: 700;
	color: lightgray;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
	line-height: 1;
}

.beans-copy {
	position: absolute;
	bottom: 15%;
	right: 25%;
}

.text-center {
	text-align: center;
}

.burly-1 {
	background: url('../img/burly-cafe-i.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.burly-2 {
	background: url('../img/burly-atlantic.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.merch {
	height: 100vh;
	width: 100vw;
	background: url('../img/burly-merch.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	position: relative;
}

.merch-copy {
	position: absolute;
	bottom: 15%;
	right: 25%;
}

.menu {
	position: relative;
	margin-top: 2rem;
	text-align: center;
	padding: 1rem;
	line-height: 3;
	border: 1px solid black;
}

a.btn {
	background: black;
	color: white;
	font-weight: 700;
	padding: 1rem;
	text-decoration: none;
	transition: background .5s linear;
}

a.btn:hover {
	color: white;
	background: gray;
}

.icons {
	margin: 2rem 0;
	font-size: 25px;
}

.icons a {
	padding: 1rem;
}

@media only screen and (max-width: 600px) {
	.beans {
		height: 50vh;
	}
	
	h1.coffee-headline {
		font-size: 3rem;
	}
	
	h2 {
		font-size: 1.25rem;
	}
	
	.beans-copy {
		bottom: 15%;
		right: 5%;
	}
	
	article {
		padding: 1rem;
	}
	.grid {
		display: block;

	}
	
	.full-height {
		height: auto;
	}
	
	.left-half {
		width: 100vw;
				height: 100vh;

	}
	
	.right-half {
		width: 100vw;
				height: 100vh;

	}
	
	.menu {
		padding: 0.5rem;
	}
	
	.merch {
		height: 50vh;
	}
	
	.merch-copy {
		bottom: 15%;
		right: 5%;
	}
}