body {	
	margin: 0;
	font-family: "Century Gothic", Arial, sans-serif;
}


#container {
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	background-color: lightblue;
	padding: 0 20px 20px;
	

}

* {
	box-sizing: border-box;
} /* This will ensure all of the box measurements (padding, margin are included in the total width to avoid scrolling */

h1 {text-align: center;}
	
ul {
	list-style-type: none;
	color: purple;
	font-weight: normal;
	text-align: center;
	border-top: 2px solid purple;
	border-bottom: 2px solid purple;
	
	}

/*Browser defaults to stacking the text vertically, so here we are telling list items to line up horizontally */
li {display: inline-block;
	margin:0 20px;
	
	}

/* using "a" to tell the links what attrubutes they should or shouldn't have */
a {
	color: purple;
	text-decoration: none;
}


/* #Main is the helicopter parent of the wild box children and here they are told to stand in a nice orderly line, aligned at the top */
#main {
    text-align: center;
}



/* This is where I call out the entire box class for an attrubute that will remain the same for everything labelled box. I want them to align side by side and to be the same width */
.box {
	display: inline-block;
	width: 300px;    
	margin: 15px;
	vertical-align: top;
}



#leftbox {    	
		height: 200px;
		background-color: white;
		 border: 5px solid green;
		box-shadow: 5px 5px 10px  gray;
		padding: 10px;
}

#rightbox {
		height: 250px;
		background-color: magenta;
		border: 7px solid blue;
		border-radius: 15px;
	
}

#footer {
		max-width: 700px;
		margin:0 auto; 
}

/* This query tells the content to rearrange when the brower id resized smaller than 800px*/
@media screen and (max-width: 800px) {
	.box {
		display: block;
		margin: 15px auto;
		
	}

} /*End 800*/


/* This query tells the content to rearrange when the brower id resized smaller than 500px*/
@media screen and (max-width: 500px){
	
	#container {
		padding: 0 20px 20px  /*This keeps the text from touching the sides*/
	}

	.box {
		width: 100%;
		max-width: 300px;
	}
	
	li {
		display: block;
		margin: 0;
	}
	ul {
	width: 100%;
	text-align: center;
	padding-left: 0;
}
	li a {
    display: block;
    padding: 12px; /* This creates a larger clickable space around the list item links*/	
}
	
} /*End 500*/