body{ 
	font-family: Helvetica, sans-serif; 
	background-color:black;
}
#tetris{ 
	margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; 
}
#stats{ 
	display: inline-block; vertical-align: top; 
}
#canvas{ 
	display: inline-block; vertical-align: top; background: url(texture.png); box-shadow: 10px 10px 10px #999; border: 2px solid #333; 
}
#menu{ 
	display: inline-block; vertical-align: top; position: relative; 
}
#menu p{ 
	margin: 0.5em 0; text-align: center; 
}
#menu p a{
	text-decoration: none; color: black; 
}
#upcoming{ 
	display: block; margin: 0 auto; background-color: #E0E0E0; 
}
#score{ 
	color: red; font-weight: bold; vertical-align: middle; 
}
#rows{ 
	color: blue; font-weight: bold; vertical-align: middle; 
}
#stats{ 
	position: absolute; bottom: 0em; right: 1em; 
}

@media screen and (min-width:   0px) and (min-height:   0px){ 
	#tetris { font-size: 0.75em; width: 250px; } 
	#menu { width: 100px; height: 200px; } 
	#upcoming { width:  50px; height:  50px; } 
	#canvas { width: 100px; height: 200px; } 
}
@media screen and (min-width: 400px) and (min-height: 400px){ 
	#tetris { font-size: 1.00em; width: 350px; } 
	#menu { width: 150px; height: 300px; } 
	#upcoming { width:  75px; height:  75px; } 
	#canvas { width: 150px; height: 300px; } 
}
@media screen and (min-width: 500px) and (min-height: 500px){ 
	#tetris { font-size: 1.25em; width: 450px; } 
	#menu { width: 200px; height: 400px; } 
	#upcoming { width: 100px; height: 100px; } 
	#canvas { width: 200px; height: 400px; } 
}
@media screen and (min-width: 600px) and (min-height: 600px){ 
	#tetris { font-size: 1.50em; width: 550px; } 
	#menu { width: 250px; height: 500px; } 
	#upcoming { width: 125px; height: 125px; } 
	#canvas { width: 250px; height: 500px; } 
}
@media screen and (min-width: 700px) and (min-height: 700px){ 
	#tetris { font-size: 1.75em; width: 650px; } 
	#menu { width: 300px; height: 600px; } 
	#upcoming { width: 150px; height: 150px; } 
	#canvas { width: 300px; height: 600px; } 
}
@media screen and (min-width: 800px) and (min-height: 800px){ 
	#tetris { font-size: 2.00em; width: 750px; } 
	#menu { width: 350px; height: 700px; } 
	#upcoming { width: 175px; height: 175px; } 
	#canvas { width: 350px; height: 700px; } 
}
@media screen and (min-width: 900px) and (min-height: 900px){ 
	#tetris { font-size: 2.25em; width: 850px; } 
	#menu { width: 400px; height: 800px; } 
	#upcoming { width: 200px; height: 200px; } 
	#canvas { width: 400px; height: 800px; } 
}