html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }
img { max-width: 100%; border: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* Remove gaps between elements */
nav ul, nav ol { list-style-type: none; padding: 0; margin: 0; } /* Remove bullets from lists in nav */
textarea { resize: vertical; }
.clearfix:after { content: ""; display: table; clear: both; }

/* ==========================================================================
   PROJECT STYLES
   ========================================================================== */
html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Rokkitt', serif;
}
p {
	margin-top: 0;
}
header {
	color: #fff;
	background: 
		linear-gradient( rgba(0,0,0, .4), rgba(0,0,0, .4) ),
		url(../img/dd_hero.png) center;
	background-size: cover;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 60px 0 20px;
}
h1 {
	font-family: 'Vast Shadow';
	font-weight: normal;
	text-transform: uppercase;
	font-size: 21vw;
	line-height: 1;
	margin: auto;
	text-align: center;
}
h2 {
	font-family: 'Vast Shadow';
	font-weight: normal;
	font-size: 1.8rem;
	color: #4d78a4;
	text-transform: uppercase;
	margin: 0;
}
.scroll-down {
	color: #fff;
	background: url(../img/down-arrow-circle.svg) no-repeat; 
	display: block;
	width: 40px;
	height: 40px;
	text-indent: -9999px;
	opacity: .6;
}
main {
	font-size: 1.4rem;
	line-height: 1.6;
	max-width: 40em;
	margin: auto;
	padding: 1em;
}
@media (min-width: 600px) {
	header h1 {
		font-size: 9vw;
	}
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* High Resolution Styles */
@media print, (-webkit-min-device-pixel-ratio: 1.25),
	          (min-resolution: 1.25dppx),
	          (min-resolution: 120dpi) {
	/* Styles for high resolution devices go here */
}