* { 
	tap-highlight-color:rgba(0,0,0,0); 
	-webkit-tap-highlight-color:rgba(0,0,0,0); 
}

div.sloppy-game-container {
	position:relative;
	padding: 0px;
	margin: 0px;
	width: 640px;
	height: 360px;
	background-color: blue;
	overflow-x: hidden;
	overflow-y: hidden;
	background-size: contain;
	background-repeat: repeat-x;
	background-image: url('images/background2.png'); /* The Game World Background */
	cursor: pointer;
	touch-action: manipulation;
}

div.sloppy-fullscreen-btn {
	position: absolute;
	width: 32px;
	height: 32px;
	z-index: 510;
	top: 15px;
	right: 15px;
	opacity: 0.7;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-image: url('images/expand.png');
}

div.sloppy-fullscreen-btn-active {
	background-image: url('images/compress.png');
}

div.sloppy-title {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-image: url('images/title-screen2.png');
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 500;
}

div.sloppy-title-animating {
	animation: titleSlide 0.5s forwards;
}


div.sloppy-title-button {
	position: absolute;
	left: 257px;
	top: 200px;
	width: 126px;
	height: 29px;
	background-image: url('images/title-button-off.png');
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 510;
}

div.sloppy-title-button:hover {
	background-image: url('images/title-button-on.png');
}

@keyframes titleSlide {
  0%   { top: 0%; }
  100% { top: 100%; }
}

div.sloppy-gameover {
	display:none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 500;
	background-image: url('images/game-over-screen.png');
}

div.sloppy-gameover-animating-in {
	animation: gameoverSlideIn 0.5s forwards;
}

div.sloppy-gameover-animating-out {
	animation: gameoverSlideOut 0.5s forwards;
}

@keyframes gameoverSlideIn {
  0%   { top: -100%; }
  100% { top: 0%; }
}

@keyframes gameoverSlideOut {
  0%   { top: 0%; }
  100% { top: 100%; }
}

div.sloppy-gamveover-score {
	position: absolute;
	top: 135px;
	height: auto;
	width: 100%;
	text-align: center;
	font-family: 'Press Start 2P', cursive;
	color: white;
	font-size: 32px;
	text-shadow: 2px 2px #000000;
	pointer-events: none;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}

div.sloppy-play-again-btn {
	position: absolute;
	left: 257px;
	top: 200px;
	width: 133px;
	height: 29px;
	background-image: url('images/play-again-off.png');
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 510;
}

div.sloppy-play-again-btn:hover {
	background-image: url('images/play-again-on.png');
}

p.sloppy-score-text {
	z-index: 200;
	position: absolute;
	letter-spacing: 1px;
	top: 5px;
	left: 5px;
	padding: 0px;
	margin: 0px;
	text-align: left;
	font-family: 'Press Start 2P', cursive;
	color: white;
	font-size: 14px;
	text-shadow: 2px 2px #000000;
}

div.sloppy-player {
	position: absolute;
	z-index: 100;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: contain;
  	/* background-image: url('images/player.png'); */
  	animation: sloppyPlayerAnim 0.2s infinite;
}

@keyframes sloppyPlayerAnim {
  0%   { background-image: url('images/player.png'); }
  100% { background-image: url('images/player-flap.png'); }
}

div.sloppy-pipe {
	position: absolute;
	z-index: 90;
	background-color: transparent;
	pointer-events:none;
}

div.sloppy-pipe-up {
	background-size: contain, contain;
	background-image: url('images/pipe-bottom.png'), url('images/pipe-middle.png'); /* The Upward Pipe and Middle Pipe Sections */
	background-position: center bottom, center top;
	background-repeat: no-repeat, repeat-y;
}

div.sloppy-pipe-down {
	background-size: contain, contain;
	background-image: url('images/pipe-top.png'), url('images/pipe-middle.png'); /* The Downward Pipe and Middle Pipe Sections */
	background-position: center top, center top;
	background-repeat: no-repeat, repeat-y;
}

div.sloppy-floor {
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 42px;
	background-repeat: repeat-x;
	background-position: center;
	background-size: contain;
	background-image: url('images/background-bottom.png'); /* The Background Floor */
}