/* {animation-play-state: paused !important;}
/**/

.layer,
svg.defs-only {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  opacity: 0.8;
}

html,
body {
  height: 100%;
  background: #224;
  margin: 0;
  overflow: hidden;
}

.flicker-layer {
  background-color: whitesmoke;
  opacity: 0.1;
  animation: flicker-fade 11s infinite alternate cubic-bezier(0.3, -0.2, 0.8, 1.2)
}

@keyframes flicker-fade {

  0%,
  30%,
  75% {
    opacity: 0.1
  }

  10%,
  50%,
  90% {
    opacity: 0.2
  }
}

/* .snow.layer {
  height: 200%;
  top: -50%;
} */

.snow-group {
  pointer-events: none;
}

.snow {
  background-image:
    radial-gradient(2.5px, snow, transparent),
    radial-gradient(4px, aliceBlue, transparent),
    radial-gradient(3px, whitesmoke, transparent);

  background-size: 90px 120px, 80px 130px, 75px 100px;
  animation-duration: inherit;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.snow:first-of-type {
  background-position: -70px 20px, 50px 70px, 90px 50px;
  animation-name: fall-left, fade-out;
}

.snow:nth-of-type(2) {
  background-position: 50px 70px, 90px 50px, -70px 20px;
  animation-name: fall-right, fade-out;
  animation-delay: -5s;
}

.snow:nth-of-type(3) {
  background-position: 90px 50px, -70px 20px, 50px 70px;
  animation-name: fall-straight, fade-out;
  animation-delay: -3s;
}

@keyframes fade-out {

  0%,
  100% {
    opacity: 0
  }

  8%,
  92% {
    opacity: 1
  }
}

@keyframes fall-straight {
  from {
    transform: translateY(-50%)
  }

  to {
    transform: translateY(50%)
  }
}

@keyframes fall-left {
  from {
    transform: rotate(-7.5deg);
    transform-origin: -200vh 50%;
  }

  to {
    transform: rotate(7.5deg);
    transform-origin: -200vh 50%;
  }
}

@keyframes fall-right {
  from {
    transform: rotate(7.5deg);
    transform-origin: 200vh 50%;
  }

  to {
    transform: rotate(-7.5deg);
    transform-origin: 200vh 50%;
  }
}

.layer.back {
  animation-duration: 17s;
}

.layer.mid {
  transform: scale(1.1) translate(5%, -7%);
  animation-duration: 15s;
}

.layer.front {
  transform: scale(1) translate(-5%, 5%);
  animation-duration: 13s;
}