html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	box-sizing: border-box;
	position: relative;
	background-color: black;

}

/*colors*/

.red{
	color: red;
}

.black{
	color: black;
}

/*game arena*/

.arena{
	width: 900px;
	height: 600px;
	position: absolute;
	/*border: 1px solid red;*/
	left: calc(100% / 2 - 450px);
	bottom: 50px;
	box-sizing: border-box;
	/*background-image: url(img/arena/china.png);*/
	background-image: url(img/arena/techno-city.png);
	background-size: cover;

}

#textLine{
	width: 100%;
	height: 25%;
	position: absolute;
	left: 0;
	bottom: 50%;
	z-index: 100;
	color: red;
	font-family: fantasy;
	font-size: 50pt;
	letter-spacing: 10pt;
	text-align: center;
	filter: drop-shadow(0px 4px 10px black);
}

#life1{
	width: 40%;
	height: 15px;
	position: absolute;
	top: 15px;
	left: 0;
	/*border: 1px solid red;*/
	box-sizing: border-box;
	background-color: #e3c048;
	border: 4px solid #791e1e;
    border-radius: 10px;   
    padding-top: 7px;
    color: red;
    font-family: fantasy;
    font-size: 25pt;
    text-align: left;
}

#life2{
	width: 40%;
	height: 15px;
	position: absolute;
	top: 15px;
	right: 0;
	/*border: 1px solid blue;*/
	box-sizing: border-box;
	background-color: #e3c048;
	border: 4px solid #791e1e;
    border-radius: 10px;
    padding-top: 7px;
    color: red;
    font-family: fantasy;
    font-size: 25pt;
    text-align: right;
}

#winContainer1{
	width: 100px;
	height: 50px;
	position: absolute;
	top: 26px;
	left: 77px;
	color: red;
	font-family: fantasy;
	font-size: 25pt;
	text-align: left;
}

#winContainer2{
	width: 100px;
	height: 50px;
	position: absolute;
	top: 26px;
	right: 77px;
	color: red;
	font-family: fantasy;
	font-size: 25pt;
	text-align: right;
}

#time{
	width: 20%;
	height: 50px;
	position: absolute;
	top: 0;
	left: calc(100% /2 - 10%);
	/*border: 1px solid blue;*/
	box-sizing: border-box;
	text-align: center;
	color: red;
	font-family: fantasy;
	font-size: 30pt;
	background-color: brown;
    border: 4px solid #791e1e;
    border-radius: 0 0 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*common parts*/

.head{
	width: 50px;
	height: 50px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;	*/
	background-image: url(img/head.png);
	background-size: cover;
	transform-origin: 25px 50px;
	z-index: 10;
}

.torse{
	width: 75px;
	height: 100px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;	*/
	background-image: url(img/torse.png);
	background-size: cover;
	transform-origin: 37px 90px;
	z-index: 2;
}

.left-arm{
	width: 75px;
	height: 50px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 0 25px;
	background-image: url(img/arm.png);
	background-size: cover;	
	z-index: 3;	
}

.right-arm{
	width: 75px;
	height: 50px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 0 25px;
	background-image: url(img/arm.png);
	background-size: cover;	
}

.left-hand{
	width: 75px;
	height: 50px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 0 25px;
	background-image: url(img/hand.png);
	background-size: cover;
	z-index: 5;

}

.right-hand{
	width: 75px;
	height: 50px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 0 25px;
	background-image: url(img/hand.png);
	background-size: cover;
	z-index: 5;
}

.left-neck{
	width: 50px;
	height: 75px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 25px 0;
	background-image: url(img/neck.png);
	background-size: cover;

}

.right-neck{
	width: 50px;
	height: 75px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 25px 0;
	background-image: url(img/neck.png);
	background-size: cover;

}

.left-foot{
	width: 50px;
	height: 75px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 25px 0;
	background-image: url(img/foot.png);
	background-size: cover;
	
}

.right-foot{
	width: 50px;
	height: 75px;
	position: absolute;
	/*border: 1px solid;*/
	box-sizing: border-box;
	/*transition: all 0.5s ease;*/
	transform-origin: 25px 0;
	background-image: url(img/foot.png);
	background-size: cover;
	
}


/*player1*/

#player1{
	width: 150px;
	height: 300px;
	position: absolute;
	left: 100px;
	bottom: 0;
	/*border: 1px solid red;*/
	box-sizing: border-box;
	/*transition: all 0.2s ease;*/
	background-image: url(img/shadow.png);
    background-repeat: no-repeat;
    background-position-y: bottom;
    transition-property: bottom;
  	transition-duration: 0.2s;
}

/*player2*/

#player2{
	width: 150px;
	height: 300px;
	position: absolute;
	left: 650px;
	bottom: 0;
	/*border: 1px solid blue;*/
	box-sizing: border-box;
	/*transition: all 0.2s ease;*/
	background-image: url(img/shadow.png);
    background-repeat: no-repeat;
    background-position-y: bottom;
    transition-property: bottom;
  	transition-duration: 0.2s;


	transform: rotateY(180deg);
	filter: hue-rotate(222deg);
}