#preloader {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  padding: 0px;
  margin: 0px;
  width: 100vw;
  height: 100vh;
  z-index: 999999;
  visibility: visible;
  transition: visibility 0s linear 0.0s, opacity ease-in-out 0.5s, background-color ease-in-out 0.5s;
  background: linear-gradient(145deg, #f0f0f0, #b6babb);
}

@media (prefers-color-scheme: dark) {
  #preloader {
    background: linear-gradient(145deg, #60676b, #363a3f);
  }

  #preloader .infinity-path {
    stroke: #b1b1b1;
  }
}

#preloader.force-white {
  background: linear-gradient(145deg, #f0f0f0, #b6babb) !important;
}

#preloader.force-dark {
  background: linear-gradient(145deg, #60676b, #363a3f);
}

#preloader .color-logo {
  opacity: 0;
  transition: opacity ease-in-out 1s;
}

.preloader-transparent #preloader {
  background-color: rgba(57,61,72,0.8);
}

.preloader-hidden #preloader {
  /*opacity: 0;*/
  /*visibility: hidden;*/
  animation: hide-preloader 2s linear forwards;
  /*transition: visibility 0s linear 1.5s, opacity ease-in-out 1.5s;*/
}

.preloader-hidden #preloader .color-logo {
  animation: scaleUp 2s ease-in-out forwards;
}

.preloader-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.preloader-container svg {
  width: 100%;
  height: 100%;
  max-width: 300px;
}

.infinity-path {
  stroke-dasharray: 1800;
  stroke-dashoffset: 0;
  animation: draw-infinity 3s linear infinite, pulseStroke 1.5s ease-in-out infinite;
  transition: opacity ease-in-out 0.5s;
}

@keyframes draw-infinity {
  0% {
    stroke-dashoffset: 1800;
  }
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -1800;
  }
}

@keyframes hide-preloader {
  0% {
    opacity: 1;
    visibility: visible;
  }
  50% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

@keyframes pulseStroke {
  0%, 100% {
    stroke-opacity: 0.6;
    stroke-width: 5;
  }
  50% {
    stroke-opacity: 0.4;
    stroke-width: 3;
  }
}

@keyframes scaleUp {
  0% {
    opacity: 0;
    scale: 1;
    transform: translate(0,0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    scale: 1.2;
    transform: translate(-10%,-10%);
  }
}

#preloader.force-dark .infinity-path {
  stroke: #b1b1b1;
}

#preloader.force-white .infinity-path {
  stroke: #363a3f;
}

.preloader-hidden .preloader-container .infinity-path {
  opacity: 0;
}