body{
	background:black;
	font-family:Helvetica, Arial, sans-serif;
}
h1{
	text-align:center;
}
#all{
width:90%;
height:auto;
background:#fff;
margin-left:auto;
margin-right:auto;	
}
img{
	height:50%;
	width:20%;
}
#head{
	height:60px;
	font-size:1.5em;
	color:#fff;
	border-bottom: 2px solid #333;
	padding:1em;
	text-align:center;
}
#head a:link{
	color:#fff;
	text-decoration:none;
	font-weight:800;
}
#head a:visited{
	color:red;
	text-decoration:underline;
}
#head a:hover{
	color:gray;
	text-decoration:underline;
}
#head a:active{
	color:pink;
	text-decoration:underline;
}
#head a:focus{
	color:gray;
	text-decoration:underline;
}
#content{
	width:100%;
	height:600px;
	background:yellow;
	color:black;
	float:left;
	box-sizing:border-box;
	border: 2px solid red;
}
#balls{
	width:50%;
	height:400px;
	background:green;
	color:black;
	float:left;
	box-sizing:border-box;
	border: 2px solid red;
}
#other-gear{
	width:50%;
	height:400px;
	background:blue;
	color:#fff;
	float:right;
	box-sizing:border-box;
	border: 2px solid red;
}
#footer{
	clear:both;
	width:100%;
	height:50px;
	background:#fff;
	color:black;
	box-sizing:border-box;
	text-align:center;
}
@media only screen and (min-width:450px) and (max-width:700px){
	#head{
	font-size:1.25em;	
	}
	body{
	margin:0px;	
	}
	#all{
		margin:95%;
	}
	#content{
		height:400px;
		font-size:1.1em;
	}
	#balls{
		clear:both;
		height:300px;
		width:100%;
		float:none;
		font-size:1.1em;
	}
		#other-gear{
		clear:both;
		float:none;
		height:300px;
		width:100%;
		font-size:1.1em;
	}
}