.noise-container {
  z-index: 9;
  position: fixed;
  width: 100vw;
  height: 100vh;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.noise {
  /*https://www.noisetexturegenerator.com/*/
  background: transparent url("../assets/noisy-texture-100x100.png") repeat;
  width: 150vw;
  min-width: 150vw;
  height: 150vw;
  min-height: 150vw;
  position: relative;
  will-change: transform;
  transform-style: preserve-3d;
  animation: backgroundNoise 0.8s infinite linear;
}

@keyframes backgroundNoise {
  0% {
    transform: translate3d(0%, 0%, 0);
  }
  16% {
    transform: translate3d(-11%, -9%, 0);
  }
  33% {
    transform: translate3d(-8%, -1%, 0);
  }
  50% {
    transform: translate3d(-2%, -12%, 0);
  }
  66% {
    transform: translate3d(-13%, -7%, 0);
  }
  83% {
    transform: translate3d(-8%, -1%, 0);
  }
  100% {
    transform: translate3d(0%, 0%, 0);
  }
}