* {
  box-sizing: border-box;
}

/* luckiest-guy-regular - latin */
@font-face {
  font-family: 'Luckiest Guy';
  font-style: normal;
  font-weight: 400;
  src: local('Luckiest Guy Regular'), local('LuckiestGuy-Regular'),
       url('../fonts/luckiest-guy-v8-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../fonts/luckiest-guy-v8-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
  font-family: 'Luckiest Guy', sans-serif;
  text-align: center;
  letter-spacing: 0.07em;
  min-width: 320px;
}

/* START */

.start {
  padding-top: 5vh;
}

.start__subheadline {
  color: #666;
}

.start__text {
  color: #ccc;
}

.start__avatar {
  display: inline-block;
  vertical-align: middle;
}

.start__avatar:hover,
.start__avatar:focus {
  outline: none;
}

.start__avatar img {
  height: 200px;
  width: auto;
  margin: 0 5px;
  opacity: .9;
  transition: all .2s ease-in-out;

}

.start__avatar:hover img,
.start__avatar:focus img {
  transform: scale(1.05);
  opacity: 1;
}

/* FIGHT */

.fight__avatars {
  display: flex;
}

.fight__avatar {
  width: 50%;
  text-align: left;
}

.fight__avatar:last-child {
  text-align: right;
}

.fight__avatar img {
  height: 40px;
  width: auto;
}

.fight__healths {
  display: flex;
  padding-bottom: 10px;
}

.fight__health {
  width: 50%;
  padding: 2px;
  border: 1px solid #ccc;
}

.fight__health:first-child {
  margin-right: 5px;
}

.fight__health:last-child {
  margin-left: 5px;
}

.fight__health-bar {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: 5px 0;
  background: green;
  transition: all .3s ease-in-out;
}

.fight__health-value {
  position: relative;
  top: 2px;
  color: white;
}

.fight__stage {
  position: relative;
  padding-top: 50px;
  background: #eee;
  border-bottom: 3px solid #666;
  transition: all .5s;
}

.fight__direction {
  position: absolute;
  display: inline-block;
  transition: all .3s;
}

.fight__direction--defend {
  transform: rotate(180deg);
}

.fight__direction svg {
  width: 32px;
  height: auto;
}

.fight__direction svg path {
  fill: #999;
}

.fight__result {
  position: absolute;
  left: 0;
  right: 0;
  font-size: 50px;
}

.fight__characters {
  overflow: hidden;
  padding-top: 100px;
}

.fight__character {
  display: block;
  width: 50%;
  float: left;
}

.fight__character img {
  height: 180px;
  width: auto;
  transform: rotate(0deg);
  transform-origin: bottom;
  transition: all .5s;
}

.fight__character img.move-up {
  animation: moveUp .5s;
}

.fight__character img.move-down {
  animation: moveDown .5s;
}

.fight__character img.move-right {
  animation: moveRight .5s;
}

.fight__character img.move-left {
  animation: moveLeft .5s;
}

.fight__character:first-child img.has-lost {
  transform: rotate(-90deg);
}

.fight__character:last-child img.has-lost {
  transform: rotate(90deg);
}

.fight__character:first-child {
  text-align: right;
}

.fight__character:last-child {
  text-align: left;
}

.fight__menu {
  padding: 20px;
  line-height: 1.4;
  color: #ccc;
}

.fight__menu a {
  display: inline-block;
  padding: 5px;
  color: #666;
  text-decoration: none;
}

.fight__menu a:hover,
.fight__menu a:focus {
  color: #000;
}

@keyframes moveUp {
  0% { transform: translateY(0); }
  50% { transform: translateY(-30%); }
  100% { transform: translateY(0); }
}

@keyframes moveDown {
  0% { transform: translateY(0); }
  50% { transform: translateY(30%); }
  100% { transform: translateY(0); }
}

@keyframes moveRight {
  0% { transform: translateX(0); }
  50% { transform: translateX(10%); }
  100% { transform: translateX(0); }
}

@keyframes moveLeft {
  0% { transform: translateX(0); }
  50% { transform: translateX(-10%); }
  100% { transform: translateX(0); }
}