.custom-loader {
  z-index: 100;
  margin-top: 50vh;
  margin-left: 50%;
  transition: 0.2s ease;
  --d: 22px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  box-shadow:
    calc(1 * var(--d)) calc(0 * var(--d)) 0 0,
    calc(0.707 * var(--d)) calc(0.707 * var(--d)) 0 1px,
    calc(0 * var(--d)) calc(1 * var(--d)) 0 2px,
    calc(-0.707 * var(--d)) calc(0.707 * var(--d)) 0 3px,
    calc(-1 * var(--d)) calc(0 * var(--d)) 0 4px,
    calc(-0.707 * var(--d)) calc(-0.707 * var(--d)) 0 5px,
    calc(0 * var(--d)) calc(-1 * var(--d)) 0 6px;
  animation: s7 1s infinite steps(8);
}

.custom-loader--home {
  color: #ffffff;
}

.custom-loader--about {
  color: #b7ce5e;
}

@keyframes s7 {
  100% {
    transform: rotate(1turn);
  }
}

/*  */

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  animation: fadeOut 0.8s cubic-bezier(0.55, 0, 0.1, 1);
  animation-delay: 1.5s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-30vw);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}