* { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

body { display: flex; }

.player {
	flex-grow: 1;
	float: left;
	margin: 15px;
}
#player1 {
	text-align: right;
}

.fighters {
	float:left;
	text-align: left;
}
#player2 .fighters {
	float: right;
}

.fighter {
	margin-bottom: 20px;
}
.fighter .name {
	font-weight: bold;
}
.fighter button {
	display: block;
	width: 100%;
	border: 1px solid #999;
	background: wheat;
	outline: none;
}
.fighter button:hover {
	border: 1px solid black;
}
.fighter button:active {
	position: relative;
	top: 1px;
}
.fighter button:disabled {
	background: darkred;
}

.power {
	padding: 10px;
	border: 1px solid black;
	display: inline-block;
}
.power h4 {
	margin-top: 0;
}

#main {
	text-align: center;
}

#playground {
	border: 1px solid black;
	background: #ccc;
	display: inline-block;
}
.box {
	display: inline-block;

	width: 40px;
	height: 40px;
	margin: 5px;
	border: 1px solid black;
	border-radius: 5px;

	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;

	transition: 0.5s ease-in-out;
 }
.highlight { border: 4px solid red; }
.box1 { background: orange; }
.box2 { background: red; }
.box3 { background: yellow; }
.box4 { background: blue; }
.box5 { background: green; }
.box6 { background: black; }
.box7 { background: purple; }
.box8 { background: white; }

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* translations to move things down */
.left1 { -webkit-transform: translate(-50px,0); -ms-transform: translate(0,50px); transform: translate(0,50px); }
.right1 { -webkit-transform: translate(50px,0); -ms-transform: translate(0,50px); transform: translate(0,50px); }
.up1 { -webkit-transform: translate(0,-50px); -ms-transform: translate(0,50px); transform: translate(0,50px); }
.down1 { -webkit-transform: translate(0,50px); -ms-transform: translate(0,50px); transform: translate(0,50px); }
.down2 { -webkit-transform: translate(0,100px); -ms-transform: translate(0,100px); transform: translate(0,100px); }
.down3 { -webkit-transform: translate(0,150px); -ms-transform: translate(0,150px); transform: translate(0,150px); }
.down4 { -webkit-transform: translate(0,200px); -ms-transform: translate(0,200px); transform: translate(0,200px); }
.down5 { -webkit-transform: translate(0,250px); -ms-transform: translate(0,250px); transform: translate(0,250px); }
.down6 { -webkit-transform: translate(0,300px); -ms-transform: translate(0,300px); transform: translate(0,300px); }
.down7 { -webkit-transform: translate(0,350px); -ms-transform: translate(0,350px); transform: translate(0,350px); }

/* bounce out animation */
@-webkit-keyframes bounceOut {
  0% { -webkit-transform: scale(1); transform: scale(1); }
  25% { -webkit-transform: scale(.95); transform: scale(.95); }
  50% { opacity: 1; -webkit-transform: scale(1.1); transform: scale(1.1); }
  100% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); }
}
@keyframes bounceOut {
  0% { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
  25% { -webkit-transform: scale(.95); -ms-transform: scale(.95); transform: scale(.95); }
  50% { opacity: 1; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
  100% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); }
}
.bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; }

/* slide in down animation */
@-webkit-keyframes slideInDown {
  0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); }
  100% { -webkit-transform: translateY(0); transform: translateY(0); }
}
@keyframes slideInDown {
  0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); }
  100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
.slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; }