body, html {
  min-height: 100%;
}

body {
  background: url(leoni.jpg) center center;
  background-size: cover;
}

.snow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.snow__layer {
  position: absolute;
  left: -100px;
  right: -100px;
  -webkit-animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
          animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
  -webkit-perspective: 100px;
          perspective: 100px;
  -webkit-transform: translateX(-50px);
      -ms-transform: translateX(-50px);
          transform: translateX(-50px);
}

.snow__fall {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2000px;
  background: url(snow-light.png);
  -webkit-animation: fall 13s linear infinite;
          animation: fall 13s linear infinite;
}

.snow__layer:nth-child(1) {
  -webkit-animation-duration: 35s;
          animation-duration: 35s;
}

.snow__layer:nth-child(1) .snow__fall {
  background: url(snow-blur.png);
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  -webkit-animation-name: fallblur;
          animation-name: fallblur;
  width: 4000px;
  left: -2000px;
}

.snow__layer:nth-child(2) {
  -webkit-animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
          animation: wind 5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite alternate;
}

.snow__layer:nth-child(2) .snow__fall {
  background: url(/css/snow-medium.png);
  -webkit-animation-duration: 25s;
          animation-duration: 25s;
}

.snow__fall:nth-child(3) {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  background-size: 250px;
}

.snow__fall:nth-child(2) {
  -webkit-animation-duration: 20s;
          animation-duration: 20s;
  background-size: 500px;
}

.snow__layer:nth-child(4) .snow__fall {
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
  -webkit-animation-name: falllight;
          animation-name: falllight;
}

@-webkit-keyframes fall {
  from {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
  }
}

@keyframes fall {
  from {
    -webkit-transform: translateY(-1000px);
            transform: translateY(-1000px);
  }
}

@-webkit-keyframes falllight {
  from {
    -webkit-transform: translateY(-1000px) translateZ(50px);
            transform: translateY(-1000px) translateZ(50px);
  }
}

@keyframes falllight {
  from {
    -webkit-transform: translateY(-1000px) translateZ(50px);
            transform: translateY(-1000px) translateZ(50px);
  }
}

@-webkit-keyframes fallblur {
  from {
    -webkit-transform: translateY(-1000px) translateZ(25px);
            transform: translateY(-1000px) translateZ(25px);
  }
}

@keyframes fallblur {
  from {
    -webkit-transform: translateY(-1000px) translateZ(25px);
            transform: translateY(-1000px) translateZ(25px);
  }
}

@-webkit-keyframes wind {
  to {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}

@keyframes wind {
  to {
    -webkit-transform: translateX(50px);
            transform: translateX(50px);
  }
}