* {
	margin: 0;
	padding: 0;
}
html {
	background: black url(../assets/images/bg.jpg) left bottom fixed no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow: hidden;
}
html, body {
	width: 100%;
	height: 100%;
}
.container {
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
}
#play-button-container,
#pause-button-container {
	width: 416px;
	height: 640px;
	border: 2px solid white;
	border-radius: 10px;
	background: rgba(0,204,255,.8);
	z-index: 1;
}
#pause-button-container {
	display: none;
	background: rgba(0,0,0,.3);
}
button#play-button,
button#pause-button {
	width: 200px;
	height: 80px;
	border: 2px solid white;
	border-radius: 10px;
	font-size: 30px;
	background: rgb(147,255,36);
	color: rgb(40,40,40);
}
button#pause-button {
	background: rgb(147,255,36,.8);
	z-index: 1;
}
button#play-button:hover,
button#pause-button:hover {
	background: rgb(0,204,255);
	color: white;
	cursor: pointer;
}
canvas {
	display: block;
	position: absolute;
	background: rgba(20,20,20,.8);
  	border: 2px solid white;
  	border-radius: 10px;
}
#level {
	top: 20px;
	left: 20px;
	border-color: rgb(0,204,255);
}
#timer {
	top: 150px;
	left: 20px;
	border-color: rgb(147,255,36);
}
#next-shape {
	bottom: 20px;
	left: 20px;
	border-color: rgb(147,255,36);
}
#top-score {
	top: 20px;
	right: 20px;
	border-color: rgb(147,255,36);
}
#score {
	top: 150px;
	right: 20px;
	border-color: rgb(0,204,255);
}
.centered {
	position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.transition {
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
	transition: all 0.5s;
}

/* Smaller devices (iPhone, less than 768px) */
@media (max-width: 900px) {
	canvas:not(#board) { left: 3%; right: auto; }
	#board, #play-button-container, #pause-button-container { right: 3%; left: auto; }
	#level { top: 312px; }
	#timer { top: 67px; }
	#next-shape { top: 557px; }
	#high-score { top: 434px; }
	#score { top: 190px; }
}
@media (min-width: 700px) and (max-width: 900px) {
	.container { width: 700px; }
}