.preloader {
  width: 100%;
  height: 100%;
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );

  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9999;
  &__container {
    margin: auto;
  }
  &__text {
    color: $primary;
  font-family: $heading-font;
  font-size: 40px;
  text-decoration: none;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.1em;
  float: left;
  animation-name: bounce_inTurnFadingTextG;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-direction: normal;
  @include md-screen {
    font-size: 60px;
  }
  @include xl-screen {
    font-size: 80px;
  }
  @include xxl-screen {
    font-size: 120px;
  }
  }
}


@keyframes bounce_inTurnFadingTextG {
  0% {
    color: $primary;
  }

  50% {
    color: $secondary;
  }

  100% {
    color: $alpha;
  }
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
