/*
 * Styles for that sweet loading spinner with turtles
 */

#loading-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
}

.spinner-img {
  height: auto;
  width: 10px;
  z-index: 11;
  position: absolute;
}

.spinner {
  height: 50px;
  width:  50px;
  transform-origin: 60% 60%;
  animation-name: spin;
  animation-duration: 1.75s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  animation-delay: 0s;
  animation-play-state: running;
  z-index: 11;
}

.turtle1 {
  top: 29%;
  left: 29%;
}

.turtle2 {
  top: 20%;
  left: 50%;
}

.turtle3 {
  top: 29%;
  left: 71%;
}

.turtle4 {
  top:  50%;
  left: 80%;
}

.turtle5 {
  top:  71%;
  left: 71%;
}

.turtle6 {
  top:  80%;
  left: 50%;
}

.turtle7 {
  top:  71%;
  left: 29%;
}

.turtle8 {
  top: 50%;
  left: 20%;
}

@keyframes spin {
  from {
      transform: rotate(0deg);
  }
  to {
      transform: rotate(360deg);
  }
}