@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/PressStart2Play.eot');
  src: url('fonts/PressStart2Play.eot?iefix') format('eot'),
       url('fonts/PressStart2Play.woff') format('woff'),
       url('fonts/PressStart2Play.ttf') format('truetype');
}

.pacman {
	color: white;
	font-family: 'Press Start 2P', cursive;
}
.pacman .button {
	background: #c80a0a;
    cursor: pointer;
    padding: 8px;
    vertical-align: middle;
}

#highscore-form { margin-top: 8px; }
#pacman {
	position: absolute;
	left: 53px;
	top: 134px;
	width: 307px;
}
.wrapper { 
	width: 100%; 
}
.game  { max-width: 307px; margin: auto; }
.wrapper { padding:0;}
#score { float: right; }
.score { width: 180px; }
.score, .lives, .level { display: inline-block; }
.controlSound { 
	background: url('img/audio-icon.png');
	width: 73px;
	height: 50px;
	position: relative;
	bottom: 5px;
	background-size: 100%;
	height: 25px;
	width: 36px;
	float: right;
}
#canvas-container { position: relative;}

#canvas-overlay-container {
	position: absolute;
	background: rgba(0,0,0,0.7);
	height: 100%; 
	width: 540px;
	max-width: 100%;
}
#canvas-overlay-content { 
	position: absolute; 
	top: 33%; 	
	left: 0; 
	margin-top: 0;
	max-width: 100%; 
	text-align: center;
	width: 540px;
	max-width: 100%;
	}
#canvas-overlay-content #title {
	text-transform: uppercase;
	font-size: 150%;
}
#myCanvas { border: none; display: block; background: rgb(0,0,0); width: 100%;  height: auto;}

.instrucciones-pacman {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	background: #262b33;
	border: 2px solid #333;
	color: white;
	padding: 0.5em 1em;
	white-space: nowrap;
	text-align: center;
	width: 24em;
	margin: 0 auto;
	position: relative;
	font-size: 10pt;
	top: 169px;
	left: -8px;
}
.instrucciones-pacman b { 
	color: white; 
}