*,
*:before,
*:after {
  box-sizing: border-box;
}
$outline-color: transparentize(#111,0.5);
$skin-color: #c4a07c;
$top-color: #456576;
$shoe-color: #7e5537;
$jeans-color: #90c5da;
$duration: 2000ms;
html {
  overflow: hidden;
  font-size: 2em;
  background: white;
  font-family: sans-serif;
}

input[type="radio"] {
  position: absolute;
  left: -999em;
  top: 0;
  
  & + label {
    font-size: 0.5em;
    position: relative;
    border-radius: 0.2em;
    border: 2px solid black;
    padding: 0.25em 1em;
    margin: 0.25em;
    cursor: pointer;
      color: black;
      background: white;
    &:hover {
      color: white;
      background: black;
    }
    
    &:before {
      content: '';
      padding-right: 0.5em;
      font-family: FontAwesome;
    }
  }
  
  &:checked + label {
    &:before {
      content: '\f00c';
    }
  }
}

.man {
  font-size: 2.5vh;
  position: relative;
  height: 20em;
  width: 10em;
  margin: 0 auto;
  .body {
    height: 10em;
    width: 5em;
    position: absolute;
    top: 2em;
    left: 2.5em;
    transform-origin: 50% 50%;
  }
  .hip {
    position: absolute;
    bottom: -2em;
    left: 0;
    width: 3em;
    height: 3em;
    border-radius: 2em 1em 2em 1em;
    background: $jeans-color;
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      border: 1px solid $outline-color;
      border-top: 0;
      background: inherit;
    }
  }
  .stomach {
    position: absolute;
    z-index: 2;
    bottom: -1em;
    left: 1em;
    width: 3em;
    height: 4em;
    border-radius: 0 0 2em 2em;
    transform-origin: 100% 100%;
    background: $top-color;
    &:before {
      content: '';
      position: absolute;
      z-index: 2;
      bottom: -1px;
      left: 0;
      right: 0;
      height: 3em;
      border: 1px solid $outline-color;
      border-bottom: 0;
      border-top: 0;
      border-radius: 0 1em 1em 1em;
      background: inherit;
    }
  }
  .chest {
    position: absolute;
    z-index: 2;
    bottom: 2em;
    left: -0.5em;
    width: 4em;
    height: 4em;
    border-radius: 2em 3em 1em 2em;
    transform-origin: 100% 100%;
    animation: chest $duration linear infinite;
    background: $top-color;
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      border: 1px solid $outline-color;
      border-bottom: 0;
      background: inherit;
    }
  }
  .head {
    position: absolute;
    z-index: 4;
    top: -6em;
    left: 0.2em;
    right: -0.2em;
    height: 4em;
    border-radius: 3em;
    border: 1px solid $outline-color;
    transform-origin: 50% 100%;
    background: $skin-color;
    animation: head $duration/2 linear infinite alternate;
    &:before {
      content: '';
      position: absolute;
      z-index: 2;
      bottom: -0.5em;
      left: 0.35em;
      right: 1em;
      height: 0.75em;
      transform: rotate(10deg);
      border: 1px solid $outline-color;
      border-top: 0;
      border-bottom: 0;
      border-bottom-left-radius: 1em 0.5em;
      border-bottom-right-radius: 1em 0.5em;
      background: inherit;
    }

  }
  
  /* *
  ** LEGS */
  .leg {
    position: absolute;
    top: 2em;
    left: 0.5em;
    width: 2em;
    height: 5em;
    border: 1px solid $outline-color;
    border-bottom: 0;
    border-top: 0;
    border-radius: 1em;
    transform-origin: 50% 0;
    background: inherit;
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: -1em;
      left: 0;
      right: 0;
      height: 2em;
      border-radius: inherit;
      background: inherit;
    }
    &:nth-child(1) {
      z-index: -1;
      background: darken($jeans-color, 6%);
      .calve {
        background: darken($skin-color,6%);
    }
      .foot {
        background: darken($skin-color,6%);
    }
    }
    &:nth-child(2) {
      z-index: 1;
      background: lighten($jeans-color,1%);
      .calve {
        background: lighten($skin-color,1%);
    }
      .foot {
        background: lighten($skin-color,1%);
    }
    }
  }
  .calve {
    position: absolute;
    top: 100%;
    left: 0.15em;
    width: 1.5em;
    height: 5em;
    border-radius: 1em;
    border: 1px solid $outline-color;
    border-top: 0;
    transform-origin: 50% 0;
      background: $skin-color;
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: -1em;
      left: 0;
      right: 0;
      height: 2em;
      border-radius: inherit;
      border: 1px solid $outline-color;
      background: inherit;
    }
    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      right: 0;
      height: 2em;
      border-radius: inherit;
      background: inherit;
    }
  }
  .knee {
    position: absolute;
    z-index: 2;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 3em;
    border-radius: 1em;
    background: inherit;
    border-bottom: 1px solid $outline-color;
}
  .foot {
    position: absolute;
    top: 100%;
    left: -0.3em;
    width: 4em;
    height: 1em;
    border-radius: 1em;
    border: 1px solid $outline-color;
    background: $skin-color;
    transform-origin: 0 50%;
    &:before {
      content: '';
      position: absolute;
      z-index: 4;
      bottom: -1px;
      left: -1px;
      right: 0.5em;
      height: 1.5em;
      border: 1px solid $outline-color;
      border-right: 0;
      border-radius: 3em 5em 0 1em;
      background: inherit;
    }
    
    &:after {
      content: '';
      position: absolute;
      z-index: 4;
      bottom: 1em;
      left: 0.3em;
      width: 1.4em;
      height: 1em;
      border-radius: 1em;
      background: inherit;
    }
  }
  
  /* *
  ** ARMS */
  .arm {
    position: absolute;
    top: -0.5em; 
    left: 0.5em;
    width: 2em;
    height: 4em;
    border: 1px solid $outline-color;
    border-bottom: 0;
    border-top: 0;
    border-radius: 1em;
    transform-origin: 50% 0;
        background: lighten($skin-color,1%);
    &:before {
      content: '';
      position: absolute;
      z-index: 4;
      top: -0.85em;
      left: 0;
      right: 0;
      height: 2em;
      border-top: 1px solid $outline-color;
      border-left: 1px solid $outline-color;
      border-radius: inherit;
      background: inherit;
    }
    &._0 {
      z-index: 5;
    }
    &._1 {
      z-index: -5;
      background: darken($skin-color,5%);
      .underarm {
      }
    }
  }
  .elbow {
    position: absolute;
    z-index: 1;
    bottom: 1px;
    left: 1px;
    right: 1px;
    height: 2em;
    border-radius: 1em;
    background: inherit;
  }
  .underarm {
    position: absolute;
    top: 100%;
    left: 0;
    width: 1.5em;
    height: 4em;
    border-radius: 1em;
    border: 1px solid $outline-color;
    border-top: 0;
    transform-origin: 50% 0;
    background: inherit;
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      top: -0.8em;
      left: -1px;
      right: -1px;
      height: 1.5em;
      border-radius: inherit;
      transform: rotate(20deg);
      border-left: 1px solid $outline-color;
      background: inherit;
    }
    &:after {
      content: '';
      position: absolute;
      z-index: 1;
      top: -0.5em;
      left: 3px;
      right: -1px;
      height: 1em;
      border-right: 1px solid $outline-color;
      border-radius: inherit;
      background: inherit;
    }
  }
}
#kick:checked ~.man {

  .leg:nth-child(2) {
     animation: $duration kick-leg linear infinite;
   animation-delay: $duration/-2;
    .calve {
      animation: $duration kick-calve linear infinite;
    animation-delay: $duration/-2;
    }
  }
}


@keyframes kick-leg {
  20%,
  80% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-40deg);
  }
}
@keyframes kick-calve {
  20%,
  80% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(60deg);
  }
  50% {
    transform: rotate(10deg);
  }
}

#punch:checked ~.man {
  .arm {
    animation: $duration punch-arm linear infinite;
    .underarm {
      animation: $duration punch-underarm linear infinite;
    }
  }
  .arm._0 {
    animation-delay: $duration/2;
    .underarm {
      animation-delay: $duration/2;
    }
  }
}

@keyframes punch-arm {
  20%,
  80% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-80deg);
  }
}
@keyframes punch-underarm {
  20%,
  80% {
    transform: rotate(0);
  }
  40%,
  70% {
    transform: rotate(-50deg);
  }
  50% {
    transform: rotate(0deg);
  }
}



#march:checked ~.man {

  .leg:nth-child(2) {
   animation-delay: $duration/-2;
    .calve {
    animation-delay: $duration/-2;
    }
  }
  .leg {
     animation: $duration march-leg linear infinite;
    .calve {
      animation: $duration march-calve linear infinite;
    }
  }
  
    .arm._1 {
   animation-delay: $duration/-2;
    .underarm {
    animation-delay: $duration/-2;
    }
  }
  .arm {
     animation: $duration march-arm linear infinite;
    .underarm {
      animation: $duration march-underarm linear infinite;
    }
  }
}


@keyframes march-leg {
  20%,
  80% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-70deg);
  }
}
@keyframes march-calve {
  20%,
  80% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(120deg);
  }
}

@keyframes march-arm {
  0%,
  100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-40deg);
  }
}
@keyframes march-underarm {
  10%,
  90% {
    transform: rotate(0);
  }
  40%,
  70% {
    transform: rotate(-30deg);
  }
}
#run:checked ~.man {
  $duration: $duration/2;
  .leg:nth-child(2) {
   animation-delay: $duration/-2;
    .calve {
    animation-delay: $duration/-2;
    }
  }
  .leg {
     animation: $duration run-leg linear infinite;
    .calve {
      animation: $duration run-calve linear infinite;
    }
  }
  
    .arm._1 {
   animation-delay: $duration/-2;
    .underarm {
    animation-delay: $duration/-2;
    }
  }
  .arm {
     animation: $duration run-arm linear infinite;
    .underarm {
      animation: $duration run-underarm linear infinite;
    }
  }
  .body {
     animation: $duration run-body linear infinite;
     animation-delay: $duration/-2;

  }
}


@keyframes run-leg {
  0%,
  100% {
    transform: rotate(30deg);
  }
  20%,
  80% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-90deg);
  }
}
@keyframes run-calve {

  0%,
  100% {
    transform: rotate(40deg);
  }
  
  20%,
  80% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(120deg);
  }
}


@keyframes run-arm {
  0%,
  100% {
    transform: rotate(20deg);
  }
  50% {
    transform: rotate(-40deg);
  }
}
@keyframes run-underarm {
  10%,
  90% {
    transform: rotate(0);
  }
  40%,
  70% {
    transform: rotate(-60deg);
  }
}

@keyframes run-body {
  0%,
  50%,
  100% {
    transform: translate3d(0,-1em,0);
  }
  25%, 75% {
    transform: translate3d(0,0,0);
  }
}


#jump:checked ~.man {

  .leg:nth-child(2) {
   animation-delay: $duration/10;
    .calve {
    animation-delay: $duration/10;
    }
  }
  .leg {
     animation: $duration jump-leg linear infinite;
    .calve {
      animation: $duration jump-calve linear infinite;
    }
  }
  .arm._1 {
   animation-delay: $duration/10;
    .underarm {
    animation-delay: $duration/10;
    }
  }
  .arm {
     animation: $duration jump-arm linear infinite;
    .underarm {
      animation: $duration jump-underarm linear infinite;
    }
  }  
  .body {
     animation: $duration jump-body linear infinite;

  }
  
}


@keyframes jump-leg {
  20%,
  80% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-70deg);
  }
}

@keyframes jump-calve {
  20%,
  80% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  50% {
    transform: rotate(120deg);
  }
}
@keyframes jump-arm {
  20%,
  80% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-70deg);
  }
}

@keyframes jump-underarm {
  20%,
  80% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(-90deg);
  }
  50% {
    transform: rotate(-120deg);
  }
}

@keyframes jump-body {
  20%,
  80% {
    transform: translate3d(0,0,0);
  }
  50% {
    transform: translate3d(0,-3em,0);
  }
}