body {
  background: hsl(0, 0%, 95%);
}

main {
  display: flex;
}

div {
  display: inline-block;
}

.screen {
  height: 100vh;
  flex-grow: 1;
  display: flex;
  justify-content: space-around;
}

#divider {
  background: white;
  width: 1vh;
  height: 98vh;
  border-radius: 100vh;
}

.one .arm, .one .body, #one .healthbar {
  background: hsl(231, 69%, 55%);
}

.two .arm, .two .body, #two .healthbar {
  background: hsl(357, 99%, 65%);
}

.healthbar {
  height: 2vh;
  transition: all 0.25s ease;
  border-radius: 100vh;
}

.player {
  position: absolute;
  bottom: 0;
  transition: all 0.15s ease;
}

.player div {
  border-radius: 100vh;
  transition: all 0.15s ease;
}

.player.attack {
  transform: scale(0.85);
}

.arm {
  width: 8vh;
  height: 30vh;
}

.body {
  width: 24vh;
  height: 50vh;
}

.opponent {
  top: 0vh;
  transform: scaleX(-0.5) scaleY(0.5);
  z-index: -1;
}

.opponent.attack {
  top: 25vh;
  transform: scaleX(-0.75) scaleY(0.75);
}

/* Animations */
.duck {
  transform: translateY(10vh);
}

.nudgeDown {
  transform: translateY(5vh);
}

.opponent .nudgeDown {
  transform: translateY(-5vh);
}

.dodgeLeft {
  transform: translateX(-20vh);
}

.dodgeRight {
  transform: translateX(20vh);
}

.defendLeft {
  transform: translate(10vh, -30vh) rotate(45deg);
}

.defendRight {
  transform: translate(-10vh, -30vh) rotate(-45deg);
}

.jabLeft {
  transform: translate(5vh, -25vh) rotate(20deg);;
}

.opponent .jabLeft {
  transform: translate(5vh, -10vh) rotate(30deg);
}

.jabRight {
  transform: translate(-5vh, -25vh) rotate(-20deg);;
}

.opponent .jabRight {
  transform: translate(-5vh, -10vh) rotate(-30deg);
}

.uppercutLeft {
  transform: translate(5vh, -35vh) rotate(20deg);
}

.uppercutRight {
  transform: translate(-5vh, -35vh) rotate(-20deg);
}

.jump {
  transform: translateY(-10vh);
}

.shake {
  animation: shake 0.1s ease-in-out infinite alternate;
}

.knockout {
  animation: knockout 0.75s ease-in normal forwards;
}

.celebrateBody {
  animation: celebrateBody 0.25s ease-in-out infinite alternate;
}

.celebrateArm {
  animation: celebrateArm 0.25s ease-in-out 0.1s infinite alternate;
}

@keyframes shake {
 from {
   transform: rotate(5deg);
 }
 to {
   transform: rotate(-5deg);
 }
}

@keyframes knockout {
  to {
    transform: translateY(120vh);
    opacity: 0;
  }
}

@keyframes celebrateBody {
 from {
   transform: translateY(0vh);
 }
 to {
   transform: translateY(5vh);
 }
}

@keyframes celebrateArm {
 from {
   transform: translateY(-20vh);
 }
 to {
   transform: translateY(-25vh);
 }
}