@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/ymjmmilzdpvbhqql_sc3x9yhf25-t1nygy6bowgz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body,html,h1, h2{ padding: 0; margin: 0; }
body {
  background: #333;
}

* {
  transform-origin: 100%;
}

h1, h2, a {
  font-family: "Orbitron", sans-serif;
  color: white;
  text-align: center;
}
h1{
  padding-top: 2em;
  margin-bottom: .5em;
}
.container {
  position: relative;
  margin: auto;
  width: 37.5em;
  height: 31.25em;
  padding: 0 3.125em;
}

a {
  display: block;
  position: absolute;
  top: 28em;
  left: 16.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);
  }
}