<form class="demo-content">
  <input id="mole-title-toggle" class="toggle mole-title-toggle" type="checkbox" checked="checked" />
  <div class="mole-title">
    <p class="mole-title-chunks">
      <span class="mole-title-far-left">Wha</span>
      <span class="mole-title-center-left">c-</span>
      <span class="mole-title-center">A</span>
      <span class="mole-title-center-right">-M</span>
      <span class="mole-title-far-right">ole</span>
    </p>
    <label class="button mole-start-button" for="mole-title-toggle">Play</label>
  </div>
  <div class="mole-game">
    <input id="mole-hole-far-left-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-far-left" for="mole-hole-far-left-toggle"></label>
    <div class="mole-hole mole-hole-far-left"></div>
    <input id="mole-hole-center-left-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-center-left" for="mole-hole-center-left-toggle"></label>
    <div class="mole-hole mole-hole-center-left"></div>
    <input id="mole-hole-center-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-center" for="mole-hole-center-toggle"></label>
    <div class="mole-hole mole-hole-center"></div>
    <input id="mole-hole-center-right-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-center-right" for="mole-hole-center-right-toggle"></label>
    <div class="mole-hole mole-hole-center-right"></div>
    <input id="mole-hole-far-right-toggle" class="toggle mole-hole-toggle" type="checkbox" />
    <label class="mole-hole mole-hole-far-right" for="mole-hole-far-right-toggle"></label>
    <div class="mole-hole mole-hole-far-right"></div>
    <input id="mole-mole-0-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-0" for="mole-mole-0-toggle"></label>
    <input id="mole-mole-1-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-1" for="mole-mole-1-toggle"></label>
    <input id="mole-mole-2-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-2" for="mole-mole-2-toggle"></label>
    <input id="mole-mole-3-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-3" for="mole-mole-3-toggle"></label>
    <input id="mole-mole-4-toggle" class="toggle mole-mole-toggle" type="checkbox" />
    <label class="mole-mole mole-mole-4" for="mole-mole-4-toggle"></label>
    <p class="mole-score">current score</p>
    <label class="button button-small mole-help-button" for="mole-help-toggle">pause/help</label>
    <input id="mole-help-toggle" class="toggle mole-help-toggle" type="checkbox" />
    <div class="mole-modal mole-help-modal">
      <p>Five moles and five holes. Click on the moles to hit them as they pop out. Be careful though&mdash;if you hit a hole when a mole isn't there, you damage the hole!</p>
      <input class="button mole-restart-button" type="reset" value="Restart" />
      <label class="button" for="mole-help-toggle">Continue</label>
    </div>
    <div class="mole-modal mole-win-modal">
      <p>Congratulations, shepherd! You got all of them. Those pesky moles won't be hurting your precious flock anymore.</p>
      <input class="button mole-restart-button" type="reset" value="Restart" />
    </div>
    <div class="mole-modal mole-loss-modal">
      <p>Oh no, all the holes are damaged! How will we ever catch those pesky moles now? Let's try that again.</p>
      <input class="button mole-restart-button" type="reset" value="Restart" />
    </div>
  </div>
</form>
.mole-modal {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  padding: 0.5em 3em;
  background-color: rgba(0, 0, 0, 0.7);
  font-size: 0.9em;
}
.mole-modal p {
  margin: 0 0 0.5em 0;
}
.mole-title-chunks {
  position: relative;
  top: -8em;
  z-index: 1;
  margin: 0;
  padding: 0.3em 0;
  color: #546269;
  font-size: 1.5em;
  text-shadow:
      -1px -1px 0 #22282a,
      1px -1px 0 #22282a,
      -1px 1px 0 #22282a,
      1px 1px 0 #22282a;
  letter-spacing: 0.2em;
  word-spacing: -0.4em;
  transition: top 400ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mole-title-toggle:checked + .mole-title .mole-title-chunks {
  top: 0;
  transition: none;
}
.mole-title-far-left, .mole-title-center-left {
  display: inline-block;
  transform-origin: bottom right;
}
.mole-title-center-right, .mole-title-far-right {
  display: inline-block;
  transform-origin: bottom left;
}
.mole-title-far-left {
  transform: rotate(-20deg) translate(0.2em, 0.1em);
}
.mole-title-center-left {
  transform: rotate(-10deg) translate(0.1em, -0.1em);
}
.mole-title-center-right {
  transform: rotate(10deg) translate(-0.2em, 0);
}
.mole-title-far-right {
  transform: rotate(20deg) translate(-0.3em, 0.3em);
}
.mole-start-button {
  position: relative;
  bottom: -8em;
  transition: bottom 400ms cubic-bezier(0.36, 0, 0.66, -0.56);
}
.mole-title-toggle:checked + .mole-title .mole-start-button {
  bottom: 0;
  transition: none;
}
.mole-game {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 1;
  transition: opacity 400ms 400ms;
}
.mole-title-toggle:checked + .mole-title + .mole-game {
  top: -8em;
  opacity: 0;
  transition: none;
}
.mole-hole, .mole-mole {
  display: block;
  position: absolute;
  cursor: crosshair;
}
.mole-hole {
  width: 4.4em;
  height: 2.7em;
  border: 0.3em solid #30383b;
  border-bottom-width: 0;
  border-radius: 50%;
  background-color: #22282a;
}
.mole-hole + .mole-hole {
  display: none;
  z-index: 1;
  border-color: #444f55;
  background-color: #30383b;
  cursor: not-allowed;
}
.mole-hole-toggle:checked + .mole-hole {
  display: none;
}
.mole-hole-toggle:checked + .mole-hole + .mole-hole {
  display: block;
}
.mole-hole::before, .mole-hole::after, .mole-mole::before, .mole-mole::after,
.mole-mole:active::before, .mole-mole:active::after {
  content: '';
  display: block;
  position: absolute;
  border-radius: 0.5em;
  transform: rotate(-30deg);
}
.mole-hole::before, .mole-mole:active::before {
  top: -8em;
  left: 4.5em;
  width: 1em;
  height: 4em;
  background-color: #30383b;
  transform-origin: bottom right;
}
.mole-hole::after, .mole-mole:active::after {
  top: -8em;
  left: 3em;
  width: 4em;
  height: 2em;
  background-color: #444f55;
  transform-origin: 2.5em 5.5em;
}
.mole-hole:active::before, .mole-hole:active::after,
.mole-mole:active::before, .mole-mole:active::after {
  animation-name: hammer;
  animation-duration: 200ms;
}
.mole-hole:active::before, .mole-mole:active::before {
  top: -0.5em;
}
.mole-hole:active::after, .mole-mole:active::after {
  top: -2em;
}
.mole-hole + .mole-hole::before, .mole-hole + .mole-hole::after {
  display: block;
  left: -0.3em;
  width: 5.83em;
  height: 0.3em;
  background-color: #22282a;
}
.mole-hole + .mole-hole::before {
  top: -0.3em;
  transform: rotate(28deg);
  transform-origin: top left;
  animation-name: none;
}
.mole-hole + .mole-hole::after {
  top: auto;
  bottom: 0;
  transform: rotate(-28deg);
  transform-origin: bottom left;
  animation-name: none;
}
.mole-hole-far-left, .mole-hole-center, .mole-hole-far-right {
  top: 2.5em;
}
.mole-hole-center-left, .mole-hole-center-right {
  top: 1em;
}
.mole-hole-far-left {
  left: 5em;
}
.mole-hole-center-left {
  left: 11em;
}
.mole-hole-center {
  left: 17em;
}
.mole-hole-center-right {
  left: 23em;
}
.mole-hole-far-right {
  left: 29em;
}
.mole-mole:active {
  animation-play-state: paused;
}
.mole-mole {
  top: -8em;
  left: 0;
  width: 5em;
  height: 3em;
  animation-name: mole;
  animation-duration: 300s;
  animation-iteration-count: infinite;
  animation-timing-function: step-end;
}
.mole-mole.mole-mole-1 {
  animation-delay: -60s;
}
.mole-mole.mole-mole-2 {
  animation-delay: -120s;
}
.mole-mole.mole-mole-3 {
  animation-delay: -180s;
}
.mole-mole.mole-mole-4 {
  animation-delay: -240s;
}
.mole-mole-toggle:checked + .mole-mole {
  display: none;
}
.mole-mole::before, .mole-mole::after {
  transform: none;
}
.mole-mole::before {
  top: 0.25em;
  left: 1.25em;
  width: 2.5em;
  height: 2.5em;
  border-radius: 1em 1em 0.5em 0.5em;
  background-color: #30383b;
}
.mole-mole::after {
  content: '..';
  top: 0.5em;
  left: 1.75em;
  width: 1.5em;
  height: 1em;
  border-radius: 0.5em;
  background-color: #444f55;
  font-weight: bold;
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~
.mole-hole-toggle:checked ~ .mole-loss-modal {
  display: block;
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~
.mole-mole-toggle:checked ~ .mole-win-modal {
  display: block;
}
.mole-score {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  margin: 0;
  color: #30383b;
  text-align: left;
  font-weight: bold;
  font-size: 0.9em;
  line-height: 1;
}
.mole-score::after {
  content: '000';
  display: block;
  font-size: 2em;
  letter-spacing: 0.1em;
}
.mole-mole-toggle:checked ~ .mole-score::after {
  content: '+10';
}
.mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 05';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+20';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 10';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+30';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '000';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 15';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+40';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+25';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+10';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 20';
}
.mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+50';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+35';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+20';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 10';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-score::after {
  content: '\2212 25';
}
.mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+45';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+30';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '000';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+40';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+25';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+10';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '\2212 05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+35';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+20';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+05';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+30';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+15';
}
.mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-hole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-mole-toggle:checked ~ .mole-score::after {
  content: '+25';
}
.mole-help-button {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
}
.mole-help-toggle:checked + .mole-help-modal {
  display: block;
}
body {
  margin: 0;
  background-color: #161819;
  color: #617078;
  text-align: center;
  font: 20px/1.5 'Titillium Web', sans-serif;
}
.button {
  display: inline-block;
  border: 0.1em solid #444f55;
  border-radius: 0.3em;
  padding: 0.5em;
  background-color: #617078;
  color: #3d484c;
  text-decoration: none;
  font-size: 1em;
  line-height: 1;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.button-small {
  padding: 0.3em;
  font-size: 0.9em;
}
.button:hover {
  background-color: #6f828b;
}
.button:active,
.timer-analog-toggle:checked ~ .timer-controls .timer-analog,
.timer-digital-toggle:checked ~ .timer-controls .timer-digital {
  background-color: #546269;
}
.toggle {
  display: none;
}
.demo-content {
  position: relative;
  width: 39em;
  height: 7em;
  overflow: hidden;
  background-color: #546269;
}
@keyframes hammer {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(-45deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}
@keyframes mole {
  1.11% {
    top: 1em;
    left: 23em;
  }
  1.34% {
    top: -8em;
  }
  2.36% {
    top: 2.5em;
    left: 17em;
  }
  2.60% {
    top: -8em;
  }
  3.75% {
    top: 2.5em;
    left: 17em;
  }
  3.90% {
    top: -8em;
  }
  4.84% {
    top: 2.5em;
    left: 29em;
  }
  5.00% {
    top: -8em;
  }
  5.72% {
    top: 2.5em;
    left: 5em;
  }
  5.91% {
    top: -8em;
  }
  6.62% {
    top: 2.5em;
    left: 5em;
  }
  6.84% {
    top: -8em;
  }
  7.76% {
    top: 1em;
    left: 23em;
  }
  7.96% {
    top: -8em;
  }
  9.00% {
    top: 2.5em;
    left: 17em;
  }
  9.12% {
    top: -8em;
  }
  10.07% {
    top: 2.5em;
    left: 29em;
  }
  10.21% {
    top: -8em;
  }
  11.07% {
    top: 2.5em;
    left: 29em;
  }
  11.24% {
    top: -8em;
  }
  12.44% {
    top: 1em;
    left: 23em;
  }
  12.64% {
    top: -8em;
  }
  13.78% {
    top: 2.5em;
    left: 17em;
  }
  13.98% {
    top: -8em;
  }
  14.76% {
    top: 2.5em;
    left: 17em;
  }
  14.90% {
    top: -8em;
  }
  15.73% {
    top: 2.5em;
    left: 29em;
  }
  15.96% {
    top: -8em;
  }
  16.56% {
    top: 2.5em;
    left: 5em;
  }
  16.78% {
    top: -8em;
  }
  17.39% {
    top: 1em;
    left: 11em;
  }
  17.52% {
    top: -8em;
  }
  18.29% {
    top: 1em;
    left: 11em;
  }
  18.51% {
    top: -8em;
  }
  19.50% {
    top: 2.5em;
    left: 5em;
  }
  19.70% {
    top: -8em;
  }
  21.05% {
    top: 1em;
    left: 11em;
  }
  21.24% {
    top: -8em;
  }
  22.15% {
    top: 2.5em;
    left: 5em;
  }
  22.38% {
    top: -8em;
  }
  23.27% {
    top: 1em;
    left: 23em;
  }
  23.47% {
    top: -8em;
  }
  24.45% {
    top: 1em;
    left: 23em;
  }
  24.58% {
    top: -8em;
  }
  25.78% {
    top: 1em;
    left: 23em;
  }
  25.94% {
    top: -8em;
  }
  26.65% {
    top: 2.5em;
    left: 29em;
  }
  26.85% {
    top: -8em;
  }
  27.76% {
    top: 2.5em;
    left: 17em;
  }
  27.89% {
    top: -8em;
  }
  28.85% {
    top: 2.5em;
    left: 5em;
  }
  29.06% {
    top: -8em;
  }
  30.02% {
    top: 1em;
    left: 23em;
  }
  30.23% {
    top: -8em;
  }
  30.89% {
    top: 2.5em;
    left: 17em;
  }
  31.05% {
    top: -8em;
  }
  31.76% {
    top: 2.5em;
    left: 5em;
  }
  31.98% {
    top: -8em;
  }
  32.67% {
    top: 2.5em;
    left: 17em;
  }
  32.84% {
    top: -8em;
  }
  33.83% {
    top: 2.5em;
    left: 29em;
  }
  34.07% {
    top: -8em;
  }
  35.16% {
    top: 2.5em;
    left: 5em;
  }
  35.33% {
    top: -8em;
  }
  35.96% {
    top: 2.5em;
    left: 5em;
  }
  36.14% {
    top: -8em;
  }
  36.93% {
    top: 1em;
    left: 11em;
  }
  37.05% {
    top: -8em;
  }
  38.24% {
    top: 2.5em;
    left: 5em;
  }
  38.39% {
    top: -8em;
  }
  39.07% {
    top: 2.5em;
    left: 5em;
  }
  39.22% {
    top: -8em;
  }
  40.85% {
    top: 2.5em;
    left: 17em;
  }
  41.09% {
    top: -8em;
  }
  42.17% {
    top: 2.5em;
    left: 17em;
  }
  42.34% {
    top: -8em;
  }
  43.13% {
    top: 2.5em;
    left: 5em;
  }
  43.34% {
    top: -8em;
  }
  44.41% {
    top: 1em;
    left: 11em;
  }
  44.63% {
    top: -8em;
  }
  45.52% {
    top: 2.5em;
    left: 29em;
  }
  45.71% {
    top: -8em;
  }
  46.48% {
    top: 1em;
    left: 11em;
  }
  46.71% {
    top: -8em;
  }
  47.81% {
    top: 2.5em;
    left: 29em;
  }
  47.94% {
    top: -8em;
  }
  48.69% {
    top: 1em;
    left: 23em;
  }
  48.91% {
    top: -8em;
  }
  49.85% {
    top: 2.5em;
    left: 17em;
  }
  50.07% {
    top: -8em;
  }
  51.15% {
    top: 2.5em;
    left: 5em;
  }
  51.28% {
    top: -8em;
  }
  52.43% {
    top: 2.5em;
    left: 17em;
  }
  52.56% {
    top: -8em;
  }
  53.57% {
    top: 2.5em;
    left: 5em;
  }
  53.75% {
    top: -8em;
  }
  54.56% {
    top: 2.5em;
    left: 5em;
  }
  54.68% {
    top: -8em;
  }
  55.40% {
    top: 1em;
    left: 23em;
  }
  55.53% {
    top: -8em;
  }
  56.55% {
    top: 1em;
    left: 23em;
  }
  56.69% {
    top: -8em;
  }
  57.37% {
    top: 2.5em;
    left: 29em;
  }
  57.56% {
    top: -8em;
  }
  58.75% {
    top: 1em;
    left: 11em;
  }
  58.90% {
    top: -8em;
  }
  59.51% {
    top: 1em;
    left: 23em;
  }
  59.71% {
    top: -8em;
  }
  60.76% {
    top: 2.5em;
    left: 5em;
  }
  60.89% {
    top: -8em;
  }
  61.55% {
    top: 2.5em;
    left: 29em;
  }
  61.78% {
    top: -8em;
  }
  62.56% {
    top: 1em;
    left: 23em;
  }
  62.69% {
    top: -8em;
  }
  63.84% {
    top: 2.5em;
    left: 5em;
  }
  63.98% {
    top: -8em;
  }
  64.73% {
    top: 1em;
    left: 23em;
  }
  64.91% {
    top: -8em;
  }
  66.07% {
    top: 2.5em;
    left: 17em;
  }
  66.24% {
    top: -8em;
  }
  66.90% {
    top: 1em;
    left: 11em;
  }
  67.12% {
    top: -8em;
  }
  67.97% {
    top: 2.5em;
    left: 5em;
  }
  68.18% {
    top: -8em;
  }
  68.88% {
    top: 1em;
    left: 11em;
  }
  69.00% {
    top: -8em;
  }
  69.98% {
    top: 1em;
    left: 11em;
  }
  70.13% {
    top: -8em;
  }
  70.74% {
    top: 2.5em;
    left: 17em;
  }
  70.87% {
    top: -8em;
  }
  71.51% {
    top: 2.5em;
    left: 29em;
  }
  71.65% {
    top: -8em;
  }
  72.66% {
    top: 2.5em;
    left: 29em;
  }
  72.89% {
    top: -8em;
  }
  73.58% {
    top: 1em;
    left: 11em;
  }
  73.73% {
    top: -8em;
  }
  74.90% {
    top: 1em;
    left: 11em;
  }
  75.10% {
    top: -8em;
  }
  75.71% {
    top: 1em;
    left: 23em;
  }
  75.90% {
    top: -8em;
  }
  76.86% {
    top: 1em;
    left: 23em;
  }
  77.02% {
    top: -8em;
  }
  78.07% {
    top: 1em;
    left: 23em;
  }
  78.27% {
    top: -8em;
  }
  79.14% {
    top: 2.5em;
    left: 17em;
  }
  79.33% {
    top: -8em;
  }
  79.95% {
    top: 1em;
    left: 11em;
  }
  80.91% {
    top: 2.5em;
    left: 29em;
  }
  81.10% {
    top: -8em;
  }
  82.29% {
    top: 1em;
    left: 11em;
  }
  82.45% {
    top: -8em;
  }
  83.57% {
    top: 2.5em;
    left: 29em;
  }
  83.75% {
    top: -8em;
  }
  84.55% {
    top: 2.5em;
    left: 17em;
  }
  84.77% {
    top: -8em;
  }
  85.79% {
    top: 1em;
    left: 11em;
  }
  85.95% {
    top: -8em;
  }
  86.92% {
    top: 2.5em;
    left: 29em;
  }
  87.14% {
    top: -8em;
  }
  87.90% {
    top: 2.5em;
    left: 17em;
  }
  88.12% {
    top: -8em;
  }
  88.95% {
    top: 2.5em;
    left: 29em;
  }
  89.14% {
    top: -8em;
  }
  89.97% {
    top: 2.5em;
    left: 5em;
  }
  90.10% {
    top: -8em;
  }
  91.26% {
    top: 1em;
    left: 11em;
  }
  91.41% {
    top: -8em;
  }
  92.29% {
    top: 1em;
    left: 11em;
  }
  92.45% {
    top: -8em;
  }
  93.06% {
    top: 2.5em;
    left: 5em;
  }
  93.24% {
    top: -8em;
  }
  93.88% {
    top: 2.5em;
    left: 5em;
  }
  94.02% {
    top: -8em;
  }
  95.07% {
    top: 2.5em;
    left: 29em;
  }
  95.29% {
    top: -8em;
  }
  96.29% {
    top: 1em;
    left: 23em;
  }
  96.42% {
    top: -8em;
  }
  97.51% {
    top: 2.5em;
    left: 17em;
  }
  97.74% {
    top: -8em;
  }
  98.40% {
    top: 2.5em;
    left: 29em;
  }
  98.61% {
    top: -8em;
  }
  99.28% {
    top: 2.5em;
    left: 29em;
  }
  99.51% {
    top: -8em;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.