.preloader-container {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  animation: wave 2s linear infinite;
}
.wave-dark {
  animation-direction: reverse;
}
.water:first-of-type {
  transform: translate(-100%, 0);
}
@keyframes wave {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0%, 0);
  }
}
.moon {
  animation: moonspin 4s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes moonspin {
  0% {
    transform: rotate(-30deg);
  }
  50% {
    transform: rotate(30deg);
  }
  100% {
    transform: rotate(-30deg);
  }
}