body {
  background-color: #242424;
  text-align: center;
}

svg {
  height: 20em;
  display: inline-block;
  margin: 6em;
  width: 30em;
  margin-top: 10vh;
}

circle {
  animation: blend 3s ease-in infinite reverse;
}

@keyframes blend {
  0% {
    transform: translate(0px, 800px);
  }
  100% {
    transform: translate(0px, -800px);
  }
}
.shimmy rect {
  animation: swoosh 3s linear infinite;
}

@keyframes swoosh {
  100% {
    transform: translate(200%, 0%);
  }
}
.animateme {
  stroke-width: 9px !important;
  stroke-linecap: round !important;
  stroke-dasharray: .5 26;
  animation: ants 4s linear infinite alternate;
}
.animateme:nth-child(2n) {
  animation-delay: -2s;
}
.animateme:nth-child(3n) {
  animation-delay: -3s;
}
.animateme:nth-child(4n) {
  animation-delay: -4s;
}

@keyframes ants {
  50% {
    stroke-dashoffset: 200;
  }
}
.earth {
  display: inline-block;
  animation: rotearth 9s linear infinite;
  border-radius: 50%;
  margin: 2em;
  width: 20em;
  height: 20em;
  background-color: #eee;
  background-image: url(../svg/map.svg);
  box-shadow: inset -3em -3em rgba(0, 0, 0, 0.1);
  background-position: -55% 50%;
}

@keyframes rotearth {
  100% {
    background-position: 153% 50%;
  }
}