@font-face {
	font-family: cambria;
	src: url("Fonts/cambria.ttc");
}
@font-face {
	font-family: bubble;
	src: url("Fonts/ARDELANEY.ttf");
}
@font-face {
	font-family: elephant;
	src: url("Fonts/ELEPHNT.TTF");
}
@font-face {
	font-family: elephant;
	src: url("Fonts/KUNSTLER.TTF");
}
@font-face {
	font-family: gamer;
	src: url("Fonts/pkmndp.ttf");
}
@keyframes blink {
	0% { background: yellow;}
	100% { background: white;}
}
html {
	background-color: black;
	transition: background-color 2s;
	font-family: gamer;
	-webkit-user-select: none;
	user-select: none;
	z-index: -4;
	overflow: hidden;
	cursor: none;
}
#gameFrame {
	display: block;
	margin: 40px auto;
	position: relative;
	z-index: -3;
	margin-bottom: 0.5%;;
}
.messageFrame {
	font-size: 50px;
	z-index: 0;
	position: absolute;
}
.tank, .wall, #explosionBox, .line {
	position: absolute;
}
.tank {
	z-index: 1;
}
.line {
	z-index: -10;
}
.wall {
	z-index: -1;
}
[background=yellow] {
	animation-name: blink;
	animation-duration: 0.25s;
	animation-iteration-count: infinite;
}
#explosionFrame {
	margin: auto;
	position: static;
	z-index: 0;
}
.sploded {
	z-index: -3 !important;
}
#score {
	color: white;
	font-size: 2cm;
	text-align: center;
	display: block;
	border-radius: 10px;
	background-color: black;
}
#p1, #p2 {
	margin: 0 9%;
	display: inline-flex;
}
.boostFrame {
	position: fixed;
	width: 50%;
	top: 0;
	bottom: 0;
	z-index: -6;
}
.boostFrame1 {
	left: 0;
}
.boostFrame2 {
	right: 0;
}
.boostFrame .loadingBar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
}
.bestwith {
	position: fixed;
	right: 0;
	top: 0;
	height: 25px;
	padding: 0 5px;
	background-color: grey;
	color: white;
	font-size: 20px;
}
.bestwith img {
	width: 20px;
}
.loadingScreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: grey;
	z-index: 3;
	font-family: monospace;
}
.loadingFrame {
	margin: auto;
	position: fixed;
	left: 47%;
	right: 47%;
	width: 6%;
	top: 35%;
	color: white;
	font-size: 30px;
	text-align: center;
}
footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2%;
	color: white;
	font-size: 15px;
	text-align: center;
}

@media screen and (max-height: 648px), screen and (max-width: 1155px) {
	body {
		zoom: 0.7;
	}
	footer {
		zoom: 1.5;
		height: 3%;
	}
}

@media screen and (max-height: 480px), screen and (max-width: 756px) {
	body {
		zoom: 0.45;
	}
	footer {
		zoom: 2;
		height: 5%;
	}
}

.bg-explosionSmoke1 {
    width: 60px; height: 60px;
    background: url('Graphics/css_sprites.png') -63px -0;
}
.bg-explosionSmoke2 {
    width: 57px; height: 56px;
    background: url('Graphics/css_sprites.png') -0 -63px;
}
.bg-explosionSmoke3 {
    width: 63px; height: 63px;
    background: url('Graphics/css_sprites.png') -0 -0;
}
.bg-explosionSmoke5 {
    width: 53px; height: 52px;
    background: url('Graphics/css_sprites.png') -57px -63px;
}
.bg-explosionSmoke4 {
    width: 46px; height: 45px;
    background: url('Graphics/css_sprites.png') -123px -0;
}