header {
	padding: 2%;
	color: white; 
	text-align: left;
	height:25em;
	width: 99%;
}
nav {
	height:3em;
	padding: 2em;
	width:99%;
}
body {background-color: black}


img {
 	max-width: 100%;   
  	height: auto;
}

p {
	color:#A9A9A9; 
	font: 15px "Courier New"; 
	font-weight: 500;
	text-align: left;
}

p.little {
	color: lightgray;
	font: 14px "Helvetica";
	font-weight: 300;
	text-align: left;
	line-height: 1.5em;
}

p.techno {
	color: lightgray;
	font: 10px "Courier New";
	font-weight: 200;
	text-align: left;
	line-height: 1em;
}
p.top {
	color: white;
	font: 14px "Helvetica";
	font-weight: 300;
	text-align: left;
}

p.bottom {
	color: greenyellow;
	font: 14px "cursive;";
	font-weight: 200;
	text-align: center;
}

p.big {
	color: white;
	font: 15px "Courier New"; 
	font-weight: 500;
	text-align: left;
}

p.bold {
	color: violet;
	font: 15px "Courier New"; 
	font-weight: 700;
	text-align: left;
}

p.indent { 
	margin-left: 40px}

p.scroll {color: mistyrose;
	font: 18px "Garamond"; 
	font-weight: 500;
	text-align: left;}

h1 {   
	color: #b3b530; 
	text-shadow: 1px 1px #A9A9A9; 
	text-align: left;
	font-stretch: expanded; 
	font: 32px "Courier New";
} 

h2 {
	text-shadow: 1px 1px #A9A9A9;
	color: grey; 
	font: 24px "Courier New";
	text-align: left;
}

h3 {
	color:black;
	font: 17px "Arial";
	background-color: #FFFFFF;
	outline: pink;
	text-align: left;
	padding: 5px;
}

h4 {text-shadow: 1px 1px #A9A9A9;
	color: pink;
	font: 24px "Impact"; 
	font-family: sans-serif;
	text-align: left;
	font-style: italic;
}
h5 {font: 24px "Impact";


ul {
	color:#A9A9A9; 
	font-size: 18px;
	font-weight:269;
	text-align: left;
	line-height: 1.5em;
}

footer {
	text-align: center;
	width: 96%;
	padding: 1em;
	height: 10em;
}

footer.fixed {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

div { 
	float: left;
	width: 96%;
	height: 30em;
	padding: 5%;
	margin: 1%;
	font-size: 19px;
	background-color: black;
}   

div.quad {
	float: right;
	width: 35%;
	height: 19em;
	background-color: black;
	padding: 5%;
	margin: 1%;
}

div.tall {
	float: left;
	width: 92%;
	height: 48em;
	background-color: orange;
	padding: 5%;
	margin: 1%;
}

article {
	float: left;
	width: 89%;
	height: 19em;
	background-color: black;
	padding: 5%;
	margin: 1%;
}

article.quad {
	float: left;
	width: 42%;
	padding: 2.5%;
	background-color: black;
	height: 16em;
	padding: 1%;
	margin: 1%;
}

article.tall {
	float: left;
	width: 96%;
	padding: 1%;
	margin: 1%;
	background-color: violet;
	height: 35em;
}
/*if you want to assign elements to many objects use a class, for one use an id*/

audio {
    filter: sepia(10%) saturate(100%) grayscale(1) contrast(99%) invert(12%);
    width: 250px;
    height: 25px; 
    padding: 5px;
}

#videofloat {           /* controls fixed element at bottom of screen*/
	float:right;
	width: 25%;
	height: auto;
	padding-bottom: 5%;
	background-color: #333333;
	background-size: contain;
	position: fixed;
	right: 5px;
	bottom: 5px;
} 


#center {
	float: center;
	display: block;
  	margin-left: auto;
  	margin-right: auto;
}
 
div.navbutton {
	text-align: center;
	display: block;
	float: left;
	width: 94%;
	height: 8em;
	padding: 1%;
	margin: 2.5%;
	background-color: black;
	}

header{
	width:96%;
	padding:1%;
	margin: auto;
	margin-top:1em;
	height: 5em;
}
#quad {
	float: left;
	width: 42%;
	padding: 2.5%;
	background-color: black;
	height: 16em;
	padding: 1%;
	margin: 1%;
}

/* row two and three */
div.row{
	width:96%;
	padding:1%;
	height:21em;
	margin:1%;
}

/* This code is outside of a media query.
   That means it is the default that will be applied everywhere,
   Until/unless overwritten by a media query.
   Always write the lowest resolution first, then build up to higher resolutions */

	article.rowTwoBox{
		display: block;
		float: left;
		width: 96%;
		padding:1%;
		margin: 1%;	
		height: 32em;
	}
	
	/* Recall: If you pass 100% width, the next box will be moved to the next row.
	   Thus, even though we are trying to put multiple boxes in a single div 'row',
	   They are automatically being reformated to stack on top of one another */

	/* row 3 contents */
	article.rowThreeBox, {
		display: block;
		float: left;
		width: 96%;
		padding:1%;
		margin: 1%;
		height: 35em;
	} 

	article.FlexibleBox{
		display: block;
		float: left;
		width: 96%;
		padding:1%;
		margin: 2%;
		height: 60em;
	} 
  



/* ****************************************************** */
/* HOMEWORK: 'Middle' resolution                          */
/* Add another media query/layout layout here.            */
/* Try adding a picture and some text to the html as well */
/* ****************************************************** */
@media only screen and (max-width: 500px) {           /*MEDIA QUERIES START HERE*/

#videofloat {    /*hides video section at smallest resolution*/
		display: none;
	}
}

@media screen and (min-width: 600px){

	article.rowTwoBox {
		display: block;
		float: left;
		width:46%;
		padding:1%;
		margin: 2.5%;	
		height: 40em;
	}
	article.FlexibleBox {
		height: 55em;
	}
	
	/* Recall: If you pass 100% width, the next box will be moved to the next row.
	   Thus, even though we are trying to put multiple boxes in a single div 'row',
	   They are automatically being reformated to stack on top of one another */

	/* row 3 contents */
	
}

/* highest resolution
   Feel free to change the min-width values */
@media screen and (min-width: 800px){
    /* Row 2 contents */

	article.rowTwoBox{
		display: block;
		float: left;
		width:29.3%;
		padding:1%;
		margin: 2,5%;	
		height: 18em;
	}

	/* row 3 contents */
	article.rowThreeBox {height: 16em}


	article.FlexibleBox{
		display: block;
		float: left;
		width:46%;
		padding:1%;
		margin: 2.5%;
		height: 50em;
	} 
}