* {
  position: relative; }

body {
  background-color: lime; }

#controls {
  text-align: center; }

#room {
  width: 800px;
  height: 400px;
  margin: 20px auto;
  border-bottom: 10px solid #999;
  background-color: #000; }
  #room #decor {
    width: 90%;
    height: 100%;
    margin: 0 auto; }
    #room #decor .wall {
      float: left;
      background-color: #97A4A9;
      box-shadow: inset 0 5px 20px #000; }
      #room #decor .wall#back-wall {
        width: 85%;
        height: 75%; }
      #room #decor .wall#front-wall {
        width: 15%;
        height: 100%;
        background-color: #DFE6DF;
        box-shadow: none;
        float: right; }
    #room #decor #knob {
      background-color: #343233;
      width: 10px;
      height: 5px;
      border-radius: 0px 3px 3px 0px;
      box-shadow: 2px 2px 5px #333;
      position: absolute;
      left: 0px;
      top: 200px; }
    #room #decor #screen {
      background-color: #A2242A;
      width: 60%;
      height: 100%;
      margin: 0 auto;
      border-bottom: 5px solid #fff;
      z-index: 1; }
    #room #decor #ladder {
      width: 20%;
      height: 100%;
      left: 5px; }
      #room #decor #ladder .rail,
      #room #decor #ladder .rung {
        background-color: #65362D;
        position: absolute;
        left: 0;
        bottom: -5px; }
      #room #decor #ladder .rail {
        width: 5px;
        height: 101.5%; }
        #room #decor #ladder .rail.right {
          left: 100%;
          right: 0; }
      #room #decor #ladder .rung {
        width: 100%;
        height: 4px; }
        #room #decor #ladder .rung.one {
          top: 20px; }
        #room #decor #ladder .rung.two {
          top: 60px; }
        #room #decor #ladder .rung.three {
          top: 105px; }
        #room #decor #ladder .rung.four {
          top: 150px; }
        #room #decor #ladder .rung.five {
          top: 200px; }
        #room #decor #ladder .rung.six {
          top: 250px; }
        #room #decor #ladder .rung.seven {
          top: 300px; }
    #room #decor #floor {
      float: left;
      width: 85%;
      height: 25%;
      background-color: #967D31; }
  #room #dancers {
    position: absolute;
    top: 45px; }
    #room #dancers .dancer {
      position: absolute;
      left: 275px;
      z-index: 2; }
      #room #dancers .dancer.right {
        left: 425px; }
      #room #dancers .dancer .head {
        left: 22px;
        top: 3px;
        z-index: 3; }
        #room #dancers .dancer .head .hat {
          background-color: #FDF16B;
          width: 30px;
          height: 25px;
          border-radius: 10px 10px 0 0; }
        #room #dancers .dancer .head .face {
          background-color: #E27F68;
          width: 30px;
          height: 28px;
          border-radius: 0 0 50px 50px; }
          #room #dancers .dancer .head .face .glasses {
            background-color: black;
            width: 28px;
            height: 12px;
            border-radius: 2px 2px 10px 10px;
            left: 1px; }
      #room #dancers .dancer .torso {
        background-color: #9C5B3D;
        width: 70px;
        height: 150px;
        top: -3px; }
      #room #dancers .dancer .arm {
        position: absolute;
        top: 50px; }
        #room #dancers .dancer .arm .bicep {
          background-color: #9C5B3D;
          width: 23px;
          height: 55px;
          border-radius: 50px 0 0 0; }
        #room #dancers .dancer .arm .forearm {
          background-color: #9C5B3D;
          width: 20px;
          height: 50px; }
        #room #dancers .dancer .arm .hand {
          background-color: #999;
          width: 15px;
          height: 25px;
          left: 3px;
          bottom: -50px; }
        #room #dancers .dancer .arm.left {
          left: -23px; }
        #room #dancers .dancer .arm.right {
          right: -23px; }
          #room #dancers .dancer .arm.right .bicep {
            border-radius: 0 50px 0 0; }
          #room #dancers .dancer .arm.right .forearm {
            left: 3px; }
          #room #dancers .dancer .arm.right .hand {
            background-color: #E27F68;
            left: 5px; }
      #room #dancers .dancer .leg {
        position: absolute;
        top: 200px; }
        #room #dancers .dancer .leg .thigh {
          background-color: #9C5B3D;
          width: 30px;
          height: 35px; }
        #room #dancers .dancer .leg .calf {
          background-color: #9C5B3D;
          width: 30px;
          height: 65px; }
        #room #dancers .dancer .leg .foot {
          background-color: #D62418;
          width: 19px;
          height: 20px;
          left: 6px;
          top: 65px;
          border-top: 4px solid #fff; }
        #room #dancers .dancer .leg.left {
          left: 0; }
        #room #dancers .dancer .leg.right {
          right: 0; }

/* dance moves */
.marquee {
  -moz-animation: marquee 4s infinite linear; }

.bop-head .head {
  -moz-animation: headbop 600ms infinite linear; }

.bend-arms .forearm {
  top: -25px; }
.bend-arms .left > .forearm {
  -moz-animation: armbend-left 600ms infinite linear; }
.bend-arms .right > .forearm {
  transform: rotateX(180deg);
  -moz-animation: armbend-right 600ms infinite linear; }

.bend-legs .dancer {
  -moz-animation: body-rock 600ms infinite linear; }
.bend-legs .thigh {
  height: 60px !important; }
.bend-legs .calf {
  top: -30px; }
.bend-legs .left > .calf {
  -moz-animation: legbend-left 600ms infinite linear; }
.bend-legs .right > .calf {
  transform: rotateX(-90deg);
  -moz-animation: legbend-right 600ms infinite linear; }

.fun #screen {
  background: url("../assets/cat.gif") bottom center; }

@-moz-keyframes marquee {
  0% {
    left: 0; }
  25% {
    left: 130px; }
  50% {
    left: 0; }
  75% {
    left: -130px; }
  100% {
    left: 0; } }
@-moz-keyframes headbop {
  25% {
    transform-origin: 0 50%;
    transform: rotate(-10deg); }
  50% {
    transform: rotate(0deg); }
  75% {
    transform-origin: 50% 0;
    transform: rotate(10deg); } }
@-moz-keyframes armbend-left {
  0% {
    transform: rotateX(0deg); }
  50% {
    transform: rotateX(180deg); } }
@-moz-keyframes armbend-right {
  0% {
    transform: rotateX(180deg); }
  50% {
    transform: rotateX(0deg); } }
@-moz-keyframes body-rock {
  25% {
    transform-origin: 0 50%;
    transform: rotate(1deg); }
  50% {
    transform: rotate(0deg); }
  75% {
    transform-origin: 50% 0;
    transform: rotate(-1deg); } }
@-moz-keyframes legbend-left {
  0% {
    transform: rotateX(0deg); }
  50% {
    transform: rotateX(-90deg); } }
@-moz-keyframes legbend-right {
  0% {
    transform: rotateX(-90deg); }
  50% {
    transform: rotateX(0deg); } }

/*# sourceMappingURL=bomp.css.map */