/*
	Charles Smith - CSS Web Design
*/

body, header, nav, main, footer, img, h1, h2, h3, ul, aside, figure, figcaption, iframe, video, audio, object, embed {
	margin: 0;
	border: 0;
	padding: 0;

}

h1, h2 {
	color: black;
}

.buttoncolor {
	color: white;
}

.aligner {
	text-align: center;
}

.words {
	display: none;
}

.bible {
	display: block;
}

.row {
	margin-top: 2em;

}

.row h1, .row p {
	text-align: left;

}

footer { 
	margin-top: 1.5em;

}

footer p {
	display: inline-block;
	font-family: sans-serif, roboto;
	color: white;

}

footer a {
	display: inline-block;
	padding: 0 0.5em;
	margin: 0 0.5em;

}

iframe, figure img, embed, object {
	width: 80%;
	height: 400px;
	margin: 0 auto;
	display: block;
	
}

main h2 { 
	text-align: center;
	padding-bottom: 1em;

}

main p {
	text-align: center;
	font-size: 1.5em;

}

.welcome {
	position: absolute;
	top: 20%;
	padding: 2em,0em,2em,2em;
	color: white;
 	text-shadow: 2px 3px 2px black;
}

.display-1 {
	font-size: 2em;
 	color: white;
 	text-shadow: 2px 3px 2px black;
}

.bg-brown {
	background-color: #000066;
	
}

/* Media Query for Tablet Viewport */
@media (min-width: 768px) { 
    
    .welcome {
        left: 5%;
    }
	
	iframe, figure img, embed, object {
		height: 500px;
	}

}

/* Media Query for Desktop Viewport */
@media (min-width: 992px) { 
    
    .hero {
        background-position: left;
    }
}

/* Media Query for Navbar */
@media (min-width: 850px) { 
	.words {
		display: block;
	}

	.bible {
		display: none;
	}

}

/* Media Query Row Text Alignment */
@media (min-width: 576px) { 
	.row {
		margin-left: 0.75em;

	}

	.row h1 {
		text-align: center;

	}

}

/* Media Query Text change */
@media (min-width: 420px) { 
	.display-1 {
		font-size: 3em;
 	
	}

	.row h1 {
		text-align: center;

	}

}

object {
	height: 100px;
	text-align: center;
}

/* Media Query Object Size */
@media (min-width: 464px) { 
	object {
		text-align: center;
		height: 500px;
	}

}