.fogwrapper {
  height: 100vh;
  height: 100lvh;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  -webkit-filter: blur(4px) grayscale(0.2) saturate(1.2) sepia(0.2);
  filter: blur(4px) grayscale(0.2) saturate(1.2) sepia(0.2);
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 65%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 1) 65%
  );
}

#foglayer_01,
#foglayer_02,
#foglayer_03 {
  height: 100%;
  position: absolute;
  width: 100%;
  background-repeat: repeat-x;
  background-size: 1500px auto;
  background-position: 0 bottom;
}

#foglayer_01 {
  background-image: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog1.png");
  -webkit-animation:
    foglayer_01_opacity 10s linear infinite,
    foglayer_moveme_seamless 24s linear infinite;
  animation:
    foglayer_01_opacity 10s linear infinite,
    foglayer_moveme_seamless 24s linear infinite;
}

#foglayer_02 {
  background-image: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png");
  -webkit-animation:
    foglayer_02_opacity 21s linear infinite,
    foglayer_moveme_seamless 55s linear infinite;
  animation:
    foglayer_02_opacity 21s linear infinite,
    foglayer_moveme_seamless 90s linear infinite;
}

#foglayer_03 {
  background-image: url("https://raw.githubusercontent.com/danielstuart14/CSS_FOG_ANIMATION/master/fog2.png");
  -webkit-animation:
    foglayer_03_opacity 21s linear infinite,
    foglayer_moveme_seamless 32s linear infinite;
  animation:
    foglayer_03_opacity 21s linear infinite,
    foglayer_moveme_seamless 45s linear infinite;
}

/* ---------- Keyframe Opacity ---------- */
@keyframes foglayer_01_opacity {
  0% {
    opacity: 0.55;
  }
  22% {
    opacity: 0.88;
  }
  40% {
    opacity: 0.65;
  }
  58% {
    opacity: 0.78;
  }
  80% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.55;
  }
}

@keyframes foglayer_02_opacity {
  0% {
    opacity: 0.95;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.85;
  }
  100% {
    opacity: 0.95;
  }
}

@keyframes foglayer_03_opacity {
  0% {
    opacity: 0.98;
  }
  27% {
    opacity: 0.55;
  }
  52% {
    opacity: 0.85;
  }
  68% {
    opacity: 0.65;
  }
  100% {
    opacity: 0.98;
  }
}

@keyframes foglayer_moveme_seamless {
  0% {
    background-position: 0px bottom;
  }
  100% {
    background-position: -1500px bottom;
  }
}