body {
	background-color: #000;
	user-select: none;
	text-align: center;
}

p {
	color: #fff;
	padding: 0.5rem 1rem ;
	font-size: 30px;
}

.control {
	display: none;
	text-align: center;
	background-color: #333;
	border-radius: 20px 20px 0 0;
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
}

#left, #right, #up, #down {
	text-align: center;
	color: #fff;
	background-color: #f10000;
	border: 1px solid #000;
	border-radius: 50%;
	margin: 0.4rem 1rem 0.9rem;
	font-size: 30px;
}

.info, .lose, .win, .btnStart, .btnReset {
  background-color: #000;
  border: 4px solid #0000ff;
  margin: 1rem;
  color: #fff;
}

.info, .lose, .win {
  padding: 3rem 1rem;
  margin: 1rem 1rem;
}

.info p, .lose p, .win p {
  margin: 1rem 0;
}

.btnStart, .btnReset {
  padding: 1rem 1rem;
}

.btnStart:hover, .btnStart:acitve, .btnReset:hover, .btnReset:acitve {
  background-color: #0000ff;
}

li {
  padding-bottom: 4rem;
}

.lose img {
  width: 40%;
}

.win img {
  width: 60%;
}

img {
  width: 50%;
  padding-bottom: 2rem;
}

h1 {
  padding: 2rem 0 1rem;
  font-size: 50px;
}

.status {
  display: flex;
  margin: 0 3rem;
}

#time {
  position: fixed;
  right: 3rem;
  text-align: right;
}

.game, .lose, .win {
  display: none;
}

.btn_left {
	padding: 0 0.2rem;
	box-shadow: -2px 3px 0 #880000, -3px 4px 0 #000;
}

.btn_right {
	padding: 0 0.2rem;
	box-shadow: 2px 3px 0 #880000, 3px 4px 0 #000;
}

.btn_up,
.btn_down {
	padding: 0 0.7rem;
	box-shadow: 0 3px 0 #880000, 0 4px 0 #000;
}

.btn_up:active,
.btn_down:active {
	box-shadow: inset 0 4px 0 #222;
}

.btn_left:active {
	box-shadow: inset -3px 4px 0 #222;
}

.btn_right:active {
	box-shadow: inset 3px 4px 0 #222;
}

@media (min-width: 240px) and (max-width: 768px) {
	canvas {
		height: 38rem;
		width: 24.7rem;
	}

	p {
		font-size: 16px;
	}

	.control {
		display: block;
	}
	
	h1 {
	  font-size: 22px;
	}
	
	.status {
	  margin: 0 0;
	}
	
	#time {
	  right: 0;
	}
}