@import url("https://fonts.googleapis.com/css?family=Orbitron");
body {
  background: #333;
}

* {
  transform-origin: 100%;
}

h1, h2, a {
  font-family: "Orbitron", sans-serif;
  color: white;
  text-align: center;
}

.container {
  position: relative;
  margin: auto;
  width: 37.5em;
  height: 31.25em;
  padding: 0 3.125em;
}

a {
  display: block;
  position: absolute;
  top: 28.7em;
  left: 13.5em;
  transform: rotate(9deg);
  text-decoration: none;
  color: #766f2a;
  font-weight: bold;
}
a:hover {
  color: #e94e1b;
}

#weight {
  display: block;
  position: absolute;
  width: 37.5em;
  height: 31.25em;
  padding: 0 3.125em;
}

#backsplash {
  -webkit-animation: splash 5s linear infinite;
          animation: splash 5s linear infinite;
}

#head-body {
  -webkit-animation: bounce 1s infinite;
          animation: bounce 1s infinite;
}

#eye1, #eye2 {
  -webkit-animation: eyemove 5s linear infinite;
          animation: eyemove 5s linear infinite;
}

#hand1 {
  -webkit-animation: hand1 2s linear infinite;
          animation: hand1 2s linear infinite;
}

#hand2 {
  -webkit-animation: hand2 2s linear infinite;
          animation: hand2 2s linear infinite;
}

#dot2, #dot1, #dot3, #dot4, #dot5, #dot6, #dot7, #dot8 {
  -webkit-animation: flash1 0.3s linear infinite;
          animation: flash1 0.3s linear infinite;
}

#dot1, #dot3, #dot5, #dot7 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

#shadow1, #shadow2, #shadow3, #shadow4, #shadow5 {
  -webkit-animation: flash2 2s linear infinite;
          animation: flash2 2s linear infinite;
}

#shadow1, #shadow5 {
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

#swirl1, #swirl2, #swirl3, #swirl4, #swirl5, #swirl6 {
  -webkit-animation: swirl 0.5s linear infinite;
          animation: swirl 0.5s linear infinite;
}

#swirl1 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s;
}

#swirl2 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

#swirl3, #swirl5 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}

#swirl4 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}

@-webkit-keyframes splash {
  90% {
    transform: scale(1.05);
    fill: rgba(255, 0, 0, 0.5);
  }
}

@keyframes splash {
  90% {
    transform: scale(1.05);
    fill: rgba(255, 0, 0, 0.5);
  }
}
@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.313em, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.125em, 0);
  }
  90% {
    transform: translate3d(0, -0.063em, 0);
  }
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.313em, 0);
  }
  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -0.125em, 0);
  }
  90% {
    transform: translate3d(0, -0.063em, 0);
  }
}
@-webkit-keyframes eyemove {
  90% {
    transform: scale(1.1) translate(0.2em, 0.6em);
  }
}
@keyframes eyemove {
  90% {
    transform: scale(1.1) translate(0.2em, 0.6em);
  }
}
@-webkit-keyframes hand1 {
  50% {
    transform: rotate(10deg);
  }
}
@keyframes hand1 {
  50% {
    transform: rotate(10deg);
  }
}
@-webkit-keyframes hand2 {
  50% {
    transform: rotate(-10deg);
  }
}
@keyframes hand2 {
  50% {
    transform: rotate(-10deg);
  }
}
@-webkit-keyframes flash1 {
  from, 50%, to {
    fill: rgba(0, 0, 0, 0.8);
  }
  25%, 75% {
    fill: rgba(255, 255, 255, 0.2);
  }
}
@keyframes flash1 {
  from, 50%, to {
    fill: rgba(0, 0, 0, 0.8);
  }
  25%, 75% {
    fill: rgba(255, 255, 255, 0.2);
  }
}
@-webkit-keyframes flash2 {
  from, 50%, to {
    fill: rgba(0, 0, 0, 0.5);
  }
  25%, 75% {
    fill: rgba(255, 255, 255, 0.5);
  }
}
@keyframes flash2 {
  from, 50%, to {
    fill: rgba(0, 0, 0, 0.5);
  }
  25%, 75% {
    fill: rgba(255, 255, 255, 0.5);
  }
}
@-webkit-keyframes swirl {
  to {
    transform: translate(-9.375em) rotate(360deg);
    fill: rgba(255, 255, 255, 0.1);
  }
}
@keyframes swirl {
  to {
    transform: translate(-9.375em) rotate(360deg);
    fill: rgba(255, 255, 255, 0.1);
  }
}