html {
	height: 100%;
}

body {
	font-family: 'Roboto';
	background-color: #FDF5F9;
	color: #2C2725;
	min-height: 100%;
}

header {
	font-family: 'Montserrat';
	text-align: center;
	background-position: center;
}

/*positioning the grid and the rows was the most difficult.
I spent hours trying to remove negative space.*/
.grid-container {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-rows: auto;
	grid-gap: .5rem;
}

.hero {
	grid-row:  1/3;
}

#caption {
	color: #2C2527;
	text-align: center;
	font-family: 'Roboto';
	font-size: 60px;
	padding: 5rem;
}

h3 {
	text-align: center;
	font-family: 'Roboto';
	font-size: 20px;
	padding: 5rem;
}

article {
	text-align: center;
	padding: 5rem;
}


.fear {
	height: 15%;
}

footer {
	position: relative;
	background-color: #E8B5B2;
	text-align: center;
	padding: .5rem;
	margin: 1rem;
}