/*
 * 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);
  }
}