/* ------------------ marquee start ------------------ */

.marquee,
.marquee-right {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: 100vw;
}

.marquee div,
.marquee-right div {
  width: 200px;
  height: 200px;
  margin-right: 64px;
}

.marquee div {
  animation: marquee 45s linear infinite;
}

.marquee-right div {
  animation: marquee-right 45s linear infinite;
}

@keyframes marquee {
  0%,
  100% {
    transform: translateX(1200%);
  }

  50% {
    transform: translateX(-1200%);
  }
}

@keyframes marquee-right {
  0%,
  100% {
    transform: translateX(-2200%);
  }

  50% {
    transform: translateX(1200%);
  }
}

/* ------------------ marquee end ------------------ */

/* ------------------ hourglass start ------------------ */

.fa-hourglass {
  animation: spin 3s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* ------------------ hourglass end ------------------ */

/* ------------------ floating start ------------------ */

.floating {
  position: absolute;
}

@keyframes float {
  0%,
  100% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(100px, 100px);
  }

  50% {
    transform: translate(200px, 0);
  }

  75% {
    transform: translate(100px, -100px);
  }
}

@keyframes random-delay {
  0%,
  100% {
    animation-duration: 2s;
  }
}

/* ------------------ floating end ------------------ */