.background-pattern {
  position: fixed;
  inset: 0;
  background-image: url("../background.png");
  background-size: 200% 100%;
  background-position: 0 0;
  background-repeat: repeat-x;
  animation: slideBackgroundSmoothly 120s linear infinite;
}

.background-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2),
    rgba(0, 0, 0, 0.1)
  );
  pointer-events: none;
}

.background-vignette {
  position: fixed;
  inset: 0;
  background: radial-gradient(
    circle at center,
    transparent 0%,
    rgba(0, 0, 0, 0.1) 100%
  );
  pointer-events: none;
}

@keyframes slideBackgroundSmoothly {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: -100% 0;
  }
  25.01% {
    background-position: 100% 0;
  }
  50% {
    background-position: 0 0;
  }
  75% {
    background-position: -100% 0;
  }
  75.01% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}