::-webkit-scrollbar { 
	width: 16px;
}
::-webkit-scrollbar-track { 
	background-color: #333;
} 
::-webkit-scrollbar-thumb { 
	background-color: #424e69;
}
::-webkit-scrollbar-thumb:hover { 
	background-color: #8295d5;
}

@font-face { 
	font-family: 'Quadrit'; 
	src: url('../css/Quadrit.ttf'); 
}

* { 
	font-family: Quadrit, sans-serif;
	font-size: 20px;
	color: #fff;
}

html, body { 
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	width: 100%;
	height: 100%;
}
html  { 
	background-color: #000;
}
body { 
	position: absolute;
}


#score, #highscore  { 
	position: absolute;
	display: inline;
	top: 70px;
	margin: 0px;
	padding: 0px;
	width: 160px;
}
#highscore { 
	left: 180px;
}
#score h2, #score span, #highscore h2, #highscore span { 
	display: block;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 16px;
	height: 21px;
	margin: 0px;
	padding: 0px;
	text-align: right;
	padding-right: 15px;
}
#score span, #highscore span { 
	padding-right: 0px;
}
#highscore span { 
	padding-right: 40px;
}
#message { 
	position: absolute;
	display: inline;
	top: 413px;
	left: 180px;
	margin: 0px;
	padding: 0px;
	width: 210px;
	height: 30px;
	text-transform: uppercase;
	font-weight: normal;
	letter-spacing: 2px;
	font-size: 20px;
	color: #fff200;
	text-align: center;
}
#message.red { 
	color: red;
}

span.combo, span.fruits { 
	position: absolute;
	letter-spacing: 1.5px;
	font-size: 14px;
	color: #89dfff;
	font-weight: normal;
}

#panel, #home { 
	width: 550px;
	height: 690px;
	margin: auto;
	margin-top: 10px;
	left: 0px;
	right: 0px;
	position: absolute;
	padding: 5px 10px 10px 10px;
	background-color: #000;
}			
#board, #canvas-board, #canvas-paths, #canvas-fruits, #canvas-pacman, #canvas-bubbles, #canvas-ghost-blinky, #canvas-ghost-pinky, #canvas-ghost-inky, #canvas-ghost-clyde { 
	width: 550px;
	height: 550px;
	position: absolute;
}
#canvas-paths { 
	display: none;
}
#board {  
	position: relative;
}

#canvas-lifes, #canvas-level-fruits { 
	height: 30px;
	top: 670px;
	position: absolute;
	z-index: 111111;
}
#canvas-lifes { 
	width: 120px;
	left: 50px;
}
#canvas-level-fruits { 
	width: 265px;
	right: 50px;
}

#control { 
	position: absolute;
	margin: auto;
	left: 0px;
	right: 0px;
	bottom: -145px;
	width: 550px;
	height: 140px;
	background-color: #666;
	
	display: none;
}
#control-up, #control-down, #control-up-second, #control-down-second, #control-left, #control-right, #control-up-big, #control-down-big, #control-left-big, #control-right-big { 
	position: absolute;
	margin: auto;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 64px;
	cursor: pointer;
	width: 54px;
	height: 54px;
	padding: 5px;
}
#control-up { 
	top: 0px;
	left: 70px;
	background-image: url('../img/move-up.png');
}
#control-down { 
	bottom: 0px;
	right: 70px;
	background-image: url('../img/move-down.png');
}
#control-up-second { 
	top: 0px;
	right: 70px;
	background-image: url('../img/move-up.png');
}
#control-down-second{ 
	bottom: 0px;
	left: 70px;
	background-image: url('../img/move-down.png');
}
#control-left { 
	bottom: 0px;
	top: 0px;
	left: 0px;
	background-image: url('../img/move-left.png');
}
#control-right { 
	bottom: 0px;
	top: 0px;
	right: 0px;
	background-image: url('../img/move-right.png');
}

#control-up-big, #control-down-big, #control-left-big, #control-right-big { 
	position: absolute;
	opacity: 0.8;
	margin: auto;
	padding: 0px;
	display: none;
	background-size: 98px;
	z-index: 999999;
}
#control-up-big {
	bottom: -123px;
	left: 0px;
	right: 0px;
	width: 125px;
	height: 125px;
	background-image: url('../img/move-up-big.png');
}
#control-down-big {
	bottom: -253px;
	left: 0px;
	right: 0px;
	width: 125px;
	height: 125px;
	background-image: url('../img/move-down-big.png');
}
#control-left-big {
	left: 80px;
	bottom: -223px;
	width: 125px;
	height: 175px;
	background-image: url('../img/move-left-big.png');
}
#control-right-big {
	right: 80px;
	bottom: -223px;
	width: 125px;
	height: 175px;
	background-image: url('../img/move-right-big.png');
}



h1 { 
	margin: 0px 0px 74px 0px;
	padding: 0px;
	font-size: 24px;
	letter-spacing: 3px;
	color: #fff;
	text-transform: uppercase;
	font-style: normal;
}
h3 { 
	margin: 0px;
	padding: 0px;
	font-size: 20px;
	letter-spacing: 2px;
	color: #fff;
	text-transform: uppercase;
	font-style: normal;
}

.sound { 
	position: absolute;
}
.sound img { 
	height: 28px;
}
#home .sound { 
	bottom: 0px;
	right: 5px;
}
#panel .sound { 
	top: 77px;
	right: 5px;
}

.github { 
	position: absolute;
	bottom: 0px;
	left: 5px;
}

.putchu { 
	position: absolute;
	top: 450px;
	left: 130px;
	background-color: #4c6441;
	padding: 10px 25px 40px 95px;
	text-transform: uppercase;
}
.putchu img { 
	position: absolute; 
	bottom: -5px;
	left: 5px;
}
#panel .putchu { 
	top: 0px;
	right: 5px;	
	left: auto;
	font-size: 16px;
	padding: 10px 25px 30px 65px;
}

.help-button { 
	position: absolute;
	text-align: center;
	bottom: 8px;
	right: 55px;
	margin: auto;
	font-size: 14px;
	font-weight: bold;
	text-transform: lowercase;
	letter-spacing: 0.5px;
	cursor: pointer;
	color: #ffcc00;
	transition: color 1.5s;
}
.help-button.yo { 
	color: #333;
}
#panel .help-button { 
	top: -510px;
	height: 25px;
}

#help h2 { 
	margin: 0px 0px 10px 0px;
	color: #ffcc00;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 26px;
}
#help { 
	position: absolute;
	width: 420px;
	height: 265px;
	top: 90px;
	left: 0px;
	right: 0px;
	margin: auto;
	padding-top: 5px;
	text-align: center;
	z-index: 999999;
	background-color: #222;
	border: solid 1px #ffcc00;
	text-transform: uppercase;
	opacity: 0.9;
	display: none;
	cursor: pointer;
	background-image: url("https://www.sideffects.es/mini.png");
	 background-position: center; /* Center the image */
  background-repeat: no-repeat; 
}
#help  table  tr  td { 
	font-size: 16px;
	letter-spacing: 1px;
}
#help  table  tr  td:first-child { 
	color: #f4c030;
	font-weight: bold;
	text-align: right;
}
#help  table  tr  td:last-child { 
	text-align: left;
}

#sound { 
	position: absolute;
}

.ui-mobile {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}



@media screen and (min-height:1200px), screen and (min-device-height : 1200px) { 
	#panel, #home { 
		zoom: 135%;
	}
}

@media screen and (max-width:1024px), screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
	#home .help-button, #panel .help-button, #home .github, #sound, .sound { 
		display: none;
	}
	#panel, #home { 
		zoom: 75%;
	}
	#control-up-big, #control-down-big, #control-left-big, #control-right-big { 
		display: inline; 
	} 

}
@media screen and (max-height:640px), screen and (min-device-height : 480px) and (max-device-height : 640px) and (-webkit-device-pixel-ratio: 3) { 
	#panel, #home { 
		zoom: 60%;
	}
	#control-up-big, #control-down-big, #control-left-big, #control-right-big { 
		display: inline; 
	} 
	#home .help-button, #panel .help-button, #home .github, #sound, .sound { 
		display: none;
	}
	h1, #canvas-panel-title-pacman { 
		visibility: hidden;
	}
}
@media screen and (max-height:480px), screen and (min-device-height : 320px) and (max-device-height : 480px) { 
	#panel, #home { 
		zoom: 55%;
	}
	#control-up-big, #control-down-big, #control-left-big, #control-right-big { 
		display: inline; 
	} 
	h1, #canvas-panel-title-pacman, #control-up-second, #control-down-second, #home .help-button, #panel .help-button, #home .github, #sound, .sound { 
		display: none;
	}
	#score, #highscore { 
		top: 0px;
	}
	#panel { 
		padding-top: 50px;
	}
	#canvas-lifes, #canvas-level-fruits { 
		top: 607px;
	}
	#control {
	bottom: 50px;
	width: 550px;
	height: 55px;
	top: 0px;
	}
	#control-up, #control-down, #control-left, #control-right { 
		top: 0px;
		bottom: 0px;
		background-size: 48px;
		width: 3px;
		height: 48px;
		padding: 5px;
	}
	#message { 
		top: 347px;
	}
}










.sign {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  background-image: radial-gradient(
    ellipse 50% 35% at 50% 50%,
    #6b1839,
    transparent
  );
  transform: translate(-50%, -50%);
  letter-spacing: 2;
  left: 50%;
  top: 50%;
  font-family: "Clip";
  text-transform: uppercase;
  font-size: 6em;
  color: #ffe6ff;
  text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
    -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
    0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  animation: shine 2s forwards, flicker 3s infinite;
}

@keyframes blink {
  0%,
  22%,
  36%,
  75% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
  28%,
  33% {
    color: #ff65bd;
    text-shadow: none;
  }
  82%,
  97% {
    color: #ff2483;
    text-shadow: none;
  }
}

.flicker {
  animation: shine 2s forwards, blink 3s 2s infinite;
}

.fast-flicker {
  animation: shine 2s forwards, blink 10s 1s infinite;
}

@keyframes shine {
  0% {
    color: #6b1839;
    text-shadow: none;
  }
  100% {
    color: #ffe6ff;
    text-shadow: 0 0 0.6rem #ffe6ff, 0 0 1.5rem #ff65bd,
      -0.2rem 0.1rem 1rem #ff65bd, 0.2rem 0.1rem 1rem #ff65bd,
      0 -0.5rem 2rem #ff2483, 0 0.5rem 3rem #ff2483;
  }
}

@keyframes flicker {
  from {
    opacity: 1;
  }

  4% {
    opacity: 0.9;
  }

  6% {
    opacity: 0.85;
  }

  8% {
    opacity: 0.95;
  }

  10% {
    opacity: 0.9;
  }

  11% {
    opacity: 0.922;
  }

  12% {
    opacity: 0.9;
  }

  14% {
    opacity: 0.95;
  }

  16% {
    opacity: 0.98;
  }

  17% {
    opacity: 0.9;
  }

  19% {
    opacity: 0.93;
  }

  20% {
    opacity: 0.99;
  }

  24% {
    opacity: 1;
  }

  26% {
    opacity: 0.94;
  }

  28% {
    opacity: 0.98;
  }

  37% {
    opacity: 0.93;
  }

  38% {
    opacity: 0.5;
  }

  39% {
    opacity: 0.96;
  }

  42% {
    opacity: 1;
  }

  44% {
    opacity: 0.97;
  }

  46% {
    opacity: 0.94;
  }

  56% {
    opacity: 0.9;
  }

  58% {
    opacity: 0.9;
  }

  60% {
    opacity: 0.99;
  }

  68% {
    opacity: 1;
  }

  70% {
    opacity: 0.9;
  }

  72% {
    opacity: 0.95;
  }

  93% {
    opacity: 0.93;
  }

  95% {
    opacity: 0.95;
  }

  97% {
    opacity: 0.93;
  }

  to {
    opacity: 1;
  }
}




.neon {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  	font-family: sarcastic;

  font-size: 9em;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 60px 20px;
  text-shadow: 0px 1px 2px rgba(65, 54, 10, 1),
    0px -1px 2px rgba(65, 54, 10, 1), 1px 0px 2px rgba(255, 207, 0, 1),
    -1px 0px 2px rgba(65, 54, 10, 1), 1px 1px 2px rgba(255, 207, 0, 1),
    -1px -1px 2px rgba(65, 54, 10, 1), 1px -1px 2px rgba(255, 207, 0, 1),
    -1px 1px 2px rgba(65, 54, 10, 1), 0px 0px 10px rgba(255, 207, 0, 0.9),
    0px 0px 20px rgba(, 0.8), 0px 0px 30px rgba(111, 207, 0, 0.7),
    0px 0px 40px rgba(111, 207, 0, 0.6), 0px 0px 50px rgba(111, 207, 0, 0.5),
    0px 0px 60px rgba(111, 207, 0, 0.4), 0px 0px 70px rgba(111, 207, 0, 0.3);
  -webkit-animation: flickerAnimation 4s infinite;
  animation: flickerAnimation 4s infinite;
}
.neon2 {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  	font-family: sarcastic;

  font-size: 4em;
  color: rgb(0, 0, 0);
  text-align: center;
  padding: 20px 10px;
 text-shadow: 0px 1px 2px rgba(65, 54, 10, 1),
    0px -1px 2px rgba(65, 54, 10, 1), 1px 0px 2px rgba(255, 207, 0, 1),
    -1px 0px 2px rgba(65, 54, 10, 1), 1px 1px 2px rgba(255, 207, 0, 1),
    -1px -1px 2px rgba(65, 54, 10, 1), 1px -1px 2px rgba(255, 207, 0, 1),
    -1px 1px 2px rgba(65, 54, 10, 1), 0px 0px 10px rgba(255, 207, 0, 0.9),
    0px 0px 20px rgba(, 0.8), 0px 0px 30px rgba(111, 207, 0, 0.7),
    0px 0px 40px rgba(111, 207, 0, 0.6), 0px 0px 50px rgba(111, 207, 0, 0.5),
    0px 0px 60px rgba(111, 207, 0, 0.4), 0px 0px 70px rgba(111, 207, 0, 0.3);
  -webkit-animation: flickerAnimation 4s infinite;
  animation: flickerAnimation 4s infinite;
}
@-webkit-keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  31.8% {
    opacity: 0.9;
  }
  32% {
    opacity: 0;
  }
  32.2% {
    opacity: 0.9;
  }
  94.6% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  95.4% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

@keyframes flickerAnimation {
  0% {
    opacity: 1;
  }
  31.8% {
    opacity: 0.9;
  }
  32% {
    opacity: 0;
  }
  32.2% {
    opacity: 0.9;
  }
  94.6% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  95.4% {
    opacity: 0.9;
  }
  100% {
    opacity: 1;
  }
}

.parpadea {
  
  animation-name: parpadeo;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;

  -webkit-animation-name:parpadeo;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
}

@-moz-keyframes parpadeo{  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}

@-webkit-keyframes parpadeo {  
  0% { opacity: 1.0; }
  50% { opacity: 0.0; }
   100% { opacity: 1.0; }
}

@keyframes parpadeo {  
  0% { opacity: 1.0; }
   50% { opacity: 0.0; }
  100% { opacity: 1.0; }
}