*{box-sizing: border-box;}

header {color: #ffffff;
	background-color: #000000;
	text-align: center;
	padding: 1px;}
	
header a {text-decoration: none;}

header a:link {color: #ffffff;}

header a:visited {color: #ffffff;}
	
header a:hover {color: #dedede;}


nav {text-align: center;}

nav a:link {color: #ededed;}

nav a:visited {color: #ededed;}
	
nav a:hover {color: #ffffff;}

nav a {text-decoration: none;
	color: #ffffff;}

nav li {margin: 0em 2em 0em 0em;}

nav ul {display: inline-block;
	list-style-type: none;}
	
	

body {background-color: #000000;
	font-family: Arial, helvetica, sans-serif;}

#wrapper {margin: auto;
	background-color: #3b3b3b;
	width: 100%;}
	
#homehero {background-image: url(sunsetscott.jpg);
	height: 200px;
	background-size: 100% 100%;
	background-repeat: no-repeat;}
	
.content {display: flex;
	flex-flow: column;}
	
.bodytext {padding: 0em 2em 2em 2em;}

#about {padding: 2em;}

#waterfall {background-image: url(waterfall.png);
	height: 200px;
	background-size: 100%, 100%;
	background-repeat: no-repeat;}
	
#work {padding: 2em;}

#football {background-image: url(football.png);
	height: 200px;
	background-size: 100% 100%;
	background-repeat: no-repeat;}
	
#creative {padding: 2em;}

#computer {background-image: url(editcomputer.png);
	height: 200px;
	background-size: 100% 100%;
	background-repeat: no-repeat;}
	
.imgfloat {float: right;
padding: 1.5em;
height: auto;
width: 100%;}



#videogrid {display: flex;
	flex-wrap: wrap;
	justify-content: center;}

.intro {color: #ffffff;
	margin: 0px;}

.button {color: #fa5a32;
	text-align: center;
	margin: 0px;
	border: 2px solid #fa5a32;
	border-radius: .5em;}

.lead {color: #ffffff;
	text-align: center;
	margin: 0px;
	padding: 1em;}
	



a {text-decoration: none}

p {color: #ededed;
	font-size: .9em;}

dl {width: 100%;
margin: auto;
background-color: #706f6f;
padding: 1em;
border-radius: 1em;
font-size: .9em;}

dt {color: #fa5a32;
border: 0em;
padding: 0em;}

dd {color: #ededed;}

ul {color: #ededed;}

ol {color: #ededed;}
	
.highlight {color: #fa5a32;}


	
iframe {align: center;
	border: none}
	
table {border-collapse: collapse;
	font-size: .2em;
	color: #ededed;
	padding: .5px;
	background-color: #575757;
	margin: auto;}

caption {font-size: 2em;}

th, td {padding: 5px;}

.altrow {background-color: #706f6f;}



form {display: grid;
    grid-template-rows: auto;
    grid-template-columns: 5em 1fr;
    grid-gap: 1em; gap: 1em;
    width: 100%; min-width: 20em;
	border-radius: 15px;
	background-color: #706f6f;
    font-family: Arial, helvetica, sans-serif;
    padding: 2em;
	border-radius: 15px;}
	   
input[type="submit"] {grid-column: 2/3; width: 9em;}


hr {color: #575717;
background-color: #575157;}



footer a {text-decoration: none;
	color: #ededed;
	font-size: .5em;
	font-style: italic;}

footer a:link {color: #ededed;}

footer a:visited {color: #ededed;}
	
footer a:hover {color: #ffffff;}
	
footer {background-color: #2e2e2e;
	text-align: center;}
	
	
	
	
	
	
	
@media (min-width: 650px) {
	nav li {margin: 0em 1em 0em 1em;}

	nav ul {display: flex;
		flex-flow: row, no-wrap;
		list-style-type: none;
		justify-content: center;}
	
	#wrapper {margin: auto;
		width: 90%;}
	
	#homehero {background-image: url(sunsetscott.jpg);
		height: 400px;
		background-size: 100% 100%;
		background-repeat: no-repeat;}
		
	.content {display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr 1fr;}
	
	.bodytext {padding: 0em 2em 2em 2em;}

	#about {grid-row: 1/3; grid-column: 1/2;
		padding: 2em;}

	#waterfall {background-image: url(waterfall.png);
		background-size: 100%, 100%;
		background-repeat: no-repeat;
		grid-row: 1/3; grid-column: 2/3;}
	
	#work {grid-row: 3/5; grid-column: 2/3;
		padding: 2em;}

	#football {background-image: url(football.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		grid-row: 3/5; grid-column: 1/2;}
	
	#creative {grid-row: 5/7; grid-column: 1/2;
		padding: 2em;}

	#computer {background-image: url(editcomputer.png);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		grid-row: 5/7; grid-column: 2/3;}
	
	.imgfloat {float: right;
		padding: 1.5em;
		height: auto;
		width: 45%;}

	#videogrid {display: flex;
		flex-wrap: wrap;
		justify-content: center;}

	table {font-size: .7em;}

	form {grid-template-columns: 10em 1fr;}
	   
	input[type="submit"] {grid-column: 2/3; width: 9em;}
}
	



@media (min-width: 1024px) {
	nav li {margin: 0em 2em 0em 2em;}

	#wrapper {margin: auto;
		width: 80%;}

	table {font-size: 1em;}
}