<div id="wrapper">
  <blockquote>When Chuck Norris does a pushup,<br />he isn't lifting himself up,<br />he's pushing the Earth down.</blockquote>
  <div id="scene">
    <div class="mirror"></div>
    <div class="desk">
      <div class="item item-1"></div>
      <div class="item item-2"></div>
      <div class="item item-3"></div>
    </div>
    <div class="vase">
      <div class="stem stem-1"></div>
      <div class="stem stem-2"></div>
    </div>
    <div class="cabinet">
      <div class="shelf shelf-1">
        <div class="book book-1"></div>
        <div class="book book-2"></div>
        <div class="book book-3"></div>
        <div class="book book-4"></div>
      </div>
      <div class="shelf shelf-2">
        <div class="book book-1"></div>
        <div class="book book-2"></div>
        <div class="book book-3"></div>
        <div class="book book-4"></div>
        <div class="book book-5"></div>
      </div>
      <div class="drawer drawer-1"></div>
      <div class="drawer drawer-2"></div>
    </div>
  </div>
  <div id="chuck-norris">
    <div class="hat"></div>
    <div class="face"></div>
    <div class="eye"></div>
    <div class="hair"></div>
    <div class="beard"></div>
    <div class="shirt"></div>
    <div class="arm"></div>
    <div class="pants"></div>
    <div class="shoes"></div>
  </div>
</div>

$background: #9c6da4;
$scene: #905d9b;

$hat: #6a3d73;
$hat-dark: #4d2b58;
$face: #c2c8d8;
$hair: #6a3c75;
$eye: #482d4f;
$collar: #4f2b56;
$shirt: #603668;
$shirt-line: #864b92;
$sleeve: #6a3d73;
$belt: #4d2957;
$pants: #ba85cb;
$pants-line: #a661bc;
$shoes: #4e2c55;

$animation: 2s ease-in-out alternate infinite;
$animation-blink: 4s 1s linear infinite;

$pushup-angle: -7deg;

* {
  &,
  &:before,
  &:after {
    margin: 0;
    padding: 0;

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

html {
  height: 100%;
  font-size: 1px;
}

body {
  display: flex;
  background: $background;

  align-items: center;
  justify-content: center;

  min-height: 100%;

  > * {
    vertical-align: middle;
  }
}

#wrapper {
  position: relative;
  display: inline-block;

  width: 800rem;
  height: 415rem;

  margin: 100rem 0;
}

blockquote {
  position: absolute;

  top: -100rem;

  width: 100%;
  text-align: center;

  color: darken($background, 30%);
  font-size: 16rem;
  font-weight: bold;
  font-style: italic;
  line-height: 20rem;
  text-shadow: 0 1px 0 lighten($background, 8%);

  &:before {
    content: open-quote;
  }

  &:after {
    content: close-quote;
  }
}

#scene {
  position: relative;
  display: inline-block;

  width: 800rem;
  height: 415rem;

  border-bottom: solid 10rem $scene;

  animation: scene $animation;
  transform-origin: 660rem 415rem;

  .mirror {
    position: absolute;
    display: block;

    top: 0;
    left: 130rem;

    width: 180rem;
    height: 180rem;

    border: solid 22rem $scene;
    border-radius: 5rem;

    &:before,
    &:after {
      content: "";
      position: absolute;
      background: $scene;

      width: 2rem;

      transform: rotateZ(45deg);
      border-radius: 2rem;
    }

    &:before {
      top: 5rem;
      left: 35rem;

      height: 50rem;

      box-shadow: 95rem 10rem 0 0 $scene,
        105rem 5rem 0 0 $scene;
    }

    &:after {
      top: 15rem;
      left: 55rem;

      height: 100rem;

      box-shadow: 10rem 10rem 0 0 $scene;
    }
  }

  .desk {
    position: absolute;
    background: $scene;

    top: 260rem;
    left: 58rem;

    width: 330rem;
    height: 110rem;

    border: solid 20rem $scene;
    box-shadow: inset 0 0 0 4rem $background;

    &:before,
    &:after {
      content: "";
      position: absolute;
      background: $scene;
    }

    &:before {
      top: -42rem;
      left: -33rem;

      width: 356rem;
      height: 18rem;

      border-radius: 9rem;
    }

    &:after {
      top: 94rem;
      left: -9rem;

      width: 18rem;
      height: 28rem;

      border-radius: 0 0 9rem 9rem;
      box-shadow: 290rem 0 0 0 $scene;
    }

    .item {
      position: absolute;
      background: $scene;

      &.item-1 {
        top: -91rem;
        left: -10rem;

        width: 36rem;
        height: 45rem;

        &:before {
          content: "";
          position: absolute;
          background: $scene;

          top: -24rem;
          left: 10rem;

          width: 16rem;
          height: 20rem;
        }
      }

      &.item-2 {
        top: -66rem;
        left: 205rem;

        width: 36rem;
        height: 20rem;
      }

      &.item-3 {
        top: -91rem;
        left: 255rem;

        width: 34rem;
        height: 45rem;
      }
    }
  }

  .vase {
    position: absolute;
    background: $scene;

    top: 275rem;
    left: 420rem;

    width: 126rem;
    height: 126rem;

    border-top-left-radius: 63rem 50rem;
    border-top-right-radius: 63rem 50rem;
    border-bottom-left-radius: 40rem 76rem;
    border-bottom-right-radius: 40rem 76rem;

    &:before,
    &:after {
      content: "";
      position: absolute;
      background: $scene;
    }

    &:before {
      top: -8rem;
      left: 49rem;

      width: 28rem;
      height: 16rem;
    }

    &:after {
      top: -20rem;
      left: 43rem;

      width: 40rem;
      height: 10rem;

      border-radius: 5rem;
    }

    .stem {
      position: absolute;

      &:before {
        content: "";
        position: absolute;
        background: $scene;

        border-radius: 50%;
      }

      &.stem-1 {
        top: -210rem;
        left: 3rem;

        width: 60rem;
        height: 190rem;

        border-top: solid 2rem $scene;
        border-right: solid 4rem $scene;

        border-top-right-radius: 60rem 190rem;

        &:before {
          top: 10rem;
          left: 5rem;

          width: 8rem;
          height: 8rem;

          box-shadow: 10rem 16rem 0 2rem $scene,
            24rem -5rem 0 -1rem $scene,
            19rem 36rem 0 0 $scene,
            36rem 12rem 0 1rem $scene,
            24rem 56rem 0 1rem $scene,
            40rem 34rem 0 1rem $scene,
            29rem 74rem 0 -1rem $scene;
        }
      }

      &.stem-2 {
        top: -160rem;
        left: 64rem;

        width: 30rem;
        height: 140rem;

        border-top: solid 2rem $scene;
        border-left: solid 6rem $scene;

        border-top-left-radius: 30rem 140rem;

        &:before {
          top: 5rem;
          left: 0;

          width: 8rem;
          height: 8rem;

          box-shadow: 18rem 12rem 0 2rem $scene,
            -6rem 18rem 0 0 $scene,
            12rem 32rem 0 0 $scene,
            -8rem 36rem 0 -1rem $scene,
            8rem 48rem 0 0 $scene,
            8rem 68rem 0 2rem $scene,
            4rem 88rem 0 -1rem $scene;
        }
      }
    }
  }

  .cabinet {
    position: absolute;

    top: 0;
    left: 575rem;

    width: 188rem;
    height: 401rem;

    border: solid 12rem $scene;
    border-bottom: none;

    .book {
      position: absolute;
      background: $scene;
      transform-origin: bottom left;
    }

    .shelf {
      position: absolute;

      left: 0;

      width: 164rem;
      height: 88rem;

      border-bottom: solid 12rem $scene;

      &.shelf-1 {
        top: 0;

        .book-1 {
          top: 7rem;
          left: 14rem;

          width: 16rem;
          height: 65rem;
        }

        .book-2 {
          top: 7rem;
          left: 34rem;

          width: 23rem;
          height: 65rem;
        }

        .book-3 {
          top: 7rem;
          left: 94rem;

          width: 14rem;
          height: 65rem;

          transform: rotateZ(-30deg);
        }

        .book-4 {
          top: 7rem;
          left: 152rem;

          width: 12rem;
          height: 65rem;

          transform: rotateZ(-60deg);
        }
      }

      &.shelf-2 {
        top: 88rem;

        .book-1 {
          top: 7rem;
          left: 26rem;

          width: 8rem;
          height: 65rem;

          transform: rotateZ(-20deg);
        }

        .book-2 {
          top: 7rem;
          left: 38rem;

          width: 8rem;
          height: 65rem;

          transform: rotateZ(-20deg);
        }

        .book-3 {
          top: 32rem;
          left: 110rem;

          width: 14rem;
          height: 40rem;
        }

        .book-4 {
          top: 7rem;
          left: 128rem;

          width: 10rem;
          height: 65rem;
        }

        .book-5 {
          top: 7rem;
          left: 142rem;

          width: 15rem;
          height: 65rem;
        }
      }
    }

    .drawer {
      position: absolute;

      left: 0;

      width: 164rem;
      height: 88rem;

      border-bottom: solid 12rem $scene;

      &:before,
      &:after {
        content: "";
        position: absolute;
      }

      &:before {
        top: 11rem;
        left: 11rem;

        width: 142rem;
        height: 54rem;

        border: solid 2rem $scene;
      }

      &:after {
        background: $scene;

        top: 33rem;
        left: 60rem;

        width: 40rem;
        height: 10rem;
      }

      &.drawer-1 {
        top: 176rem;
      }

      &.drawer-2 {
        top: 264rem;
      }
    }
  }
}

#chuck-norris {
  position: absolute;
  z-index: 1;

  top: 240rem;
  left: 140rem;

  transform: rotateZ(6deg);

  .hat {
    position: absolute;
    background: $hat;

    width: 55rem;
    height: 100rem;

    border-top-left-radius: 55rem 25rem;
    border-bottom-left-radius: 55rem 30rem;

    &:before {
      content: "";
      position: absolute;
      background: $hat-dark;

      top: -38rem;
      left: 35rem;

      width: 55rem;
      height: 190rem;

      border-top-left-radius: 55rem 50rem;
      border-bottom-left-radius: 55rem 140rem;
    }
  }

  .face {
    position: absolute;

    top: 25rem;
    left: 90rem;

    width: 36rem;
    height: 92rem;

    border-style: solid;
    border-color: $face $face transparent transparent;
    border-width: 79rem 36rem 13rem 0;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }

    &:before {
      background: $face;

      top: -79rem;
      left: 36rem;

      width: 16rem;
      height: 92rem;

      border-bottom-right-radius: 14rem;
    }

    &:after {
      background: $face;

      top: -92rem;
      left: 8rem;

      width: 26rem;
      height: 13rem;

      border-radius: 13rem 13rem 0 0;
    }
  }

  .eye {
    position: absolute;
    background: $eye;

    top: 75rem;
    left: 100rem;

    width: 12rem;
    height: 12rem;

    border-radius: 12rem;
    animation: eye $animation-blink;
  }

  .hair {
    position: absolute;
    background: $hair;
    z-index: -1;

    top: -15rem;
    left: 90rem;

    width: 52rem;
    height: 40rem;

    border-top-right-radius: 12rem;
  }

  .beard {
    position: absolute;
    background: $hair;

    top: 2rem;
    left: 142rem;

    width: 75rem;
    height: 100rem;

    border-radius: 0 50rem 50rem 0;

    &:before,
    &:after {
      content: "";
      position: absolute;
      background: $face;
    }

    &:before {
      top: 35rem;
      left: 70rem;

      width: 17rem;
      height: 32rem;

      z-index: -1;
    }

    &:after {
      top: 66rem;
      left: 10rem;

      width: 14rem;
      height: 34rem;

      border-top-right-radius: 14rem;
    }
  }

  .shirt {
    position: absolute;
    background: $shirt;

    top: -5rem;
    left: 235rem;

    width: 47rem;
    height: 120rem;

    border-radius: 60rem 0 0 60rem;
    box-shadow: inset -6rem 0 0 0 $shirt,
      inset -8rem 0 0 0 $shirt-line,
      inset -12rem 0 0 0 $shirt,
      inset -14rem 0 0 0 $shirt-line,
      inset -18rem 0 0 0 $shirt,
      inset -20rem 0 0 0 $shirt-line;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }

    &:before {
      top: 0;
      left: 47rem;

      width: 88rem;
      height: 120rem;

      border-style: solid;
      border-color: transparent transparent transparent $shirt;
      border-width: 39rem 0 39rem 88rem;
    }

    &:after {
      background: $collar;
      z-index: -1;

      top: 36rem;
      left: -10rem;

      width: 15rem;
      height: 45rem;

      border-radius: 8rem 0 0 8rem;
    }
  }

  .arm {
    position: absolute;
    background: $sleeve;

    top: 30rem;
    left: 250rem;

    width: 75rem;
    height: 36rem;

    border-radius: 18rem;

    transform: rotateZ(10deg);
    transform-origin: left center;

    animation: arm-top $animation;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }

    &:before {
      background: $sleeve;

      top: 0;
      right: -10rem;

      width: 36rem;
      height: 90rem;

      border-top-left-radius: 18rem 50rem;
      border-top-right-radius: 18rem 50rem;
      border-bottom-left-radius: 18rem;
      border-bottom-right-radius: 18rem;

      transform: rotateZ(15deg);
      transform-origin: top center;

      box-shadow: 0 10rem 0 0 $face;

      animation: arm-bottom $animation;
    }

    &:after {
      background: $face;
      z-index: -1;

      right: 10rem;
      bottom: -60rem;

      width: 75rem;
      height: 20rem;

      border-top-left-radius: 40rem 16rem;
      border-bottom-right-radius: 10rem;

      transform: rotateZ(-15deg);
      transform-origin: right center;

      animation: hand $animation;
    }
  }

  .pants {
    position: absolute;
    background: $pants;

    top: 34rem;
    left: 370rem;

    width: 190rem;
    height: 41rem;

    border-left: solid 14rem $belt;
    border-right: solid 32rem $shoes;

    &:before {
      content: "";
      position: absolute;

      top: 20rem;
      left: 2rem;

      width: 140rem;
      height: 2rem;

      border-top: dashed 2rem $pants-line;
    }
  }

  .shoes {
    position: absolute;
    background: $shoes;

    top: 75rem;
    left: 490rem;

    width: 70rem;
    height: 35rem;

    border-top-left-radius: 40rem 33rem;

    transform: rotateZ(-6deg);
    transform-origin: top center;

    animation: shoes $animation;
  }
}

@keyframes scene {
  0% {
    transform: rotateZ(0);
  }

  100% {
    transform: rotateZ($pushup-angle);
  }
}

@keyframes eye {
  0% {
    transform: scale(1, 1);
  }

  3% {
    transform: scale(0.2, 1);
  }

  6% {
    transform: scale(1, 1);
  }

  9% {
    transform: scale(0.2, 1);
  }

  12% {
    transform: scale(1, 1);
  }
}

@keyframes arm-top {
  0% {
    transform: rotateZ(10deg);
  }

  100% {
    transform: rotateZ(45deg + $pushup-angle);
  }
}

@keyframes arm-bottom {
  0% {
    transform: rotateZ(15deg);
  }

  100% {
    transform: rotateZ(-5deg + $pushup-angle);
  }
}

@keyframes hand {
  0% {
    transform: rotateZ(-15deg);
  }

  100% {
    right: -28rem;
    bottom: -46rem;
    transform: rotateZ(-45deg + $pushup-angle);
  }
}

@keyframes shoes {
  0% {
    transform: rotateZ(-6deg);
  }

  100% {
    transform: rotateZ(-6deg + $pushup-angle);
  }
}

/* 
Chuck Norris's kickass pushups!
Made by Kevin Jannis (@kevinjannis)
View more at www.janniskev.in 

Inspired by this 9gag post: http://9gag.com/gag/aA1EB32
*/