.flake {
  position: absolute;
  border-radius: 50%;
  -webkit-transform: translateY(0) rotateX(0) rotateY(0);
  transform: translateY(0) rotateX(0) rotateY(0);
  background-size: 100%;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 30%, #ffffff 50%, #ffffff 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(90deg, rgba(255, 255, 255, 0) 30%, #ffffff 50%, #ffffff 60%, rgba(255, 255, 255, 0) 60%), linear-gradient(45deg, rgba(255, 255, 255, 0) 33%, #ffffff 53%, #ffffff 57%, rgba(255, 255, 255, 0) 65%), linear-gradient(135deg, rgba(255, 255, 255, 0) 33%, #ffffff 53%, #ffffff 57%, rgba(255, 255, 255, 0) 65%);
}

.flake:nth-child(1) {
  width: 12px;
  height: 12px;
  top: -504px;
  left: 19%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 20s flakes linear infinite;
  animation: 20s flakes linear infinite;
}

.flake:nth-child(2) {
  width: 11px;
  height: 11px;
  top: -669px;
  left: 141%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 16s flakes linear infinite;
  animation: 16s flakes linear infinite;
}

.flake:nth-child(3) {
  width: 13px;
  height: 13px;
  top: -505px;
  left: 66%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(4) {
  width: 10px;
  height: 10px;
  top: -432px;
  left: 118%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(5) {
  width: 16px;
  height: 16px;
  top: -82px;
  left: 81%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 21s flakes linear infinite;
  animation: 21s flakes linear infinite;
}

.flake:nth-child(6) {
  width: 12px;
  height: 12px;
  top: -589px;
  left: 37%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 20s flakes linear infinite;
  animation: 20s flakes linear infinite;
}

.flake:nth-child(7) {
  width: 15px;
  height: 15px;
  top: -458px;
  left: 106%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 7s flakes linear infinite;
  animation: 7s flakes linear infinite;
}

.flake:nth-child(8) {
  width: 11px;
  height: 11px;
  top: -445px;
  left: 36%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(9) {
  width: 10px;
  height: 10px;
  top: -384px;
  left: 34%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 25s flakes linear infinite;
  animation: 25s flakes linear infinite;
}

.flake:nth-child(10) {
  width: 9px;
  height: 9px;
  top: -190px;
  left: 9%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 15s flakes linear infinite;
  animation: 15s flakes linear infinite;
}

.flake:nth-child(11) {
  width: 14px;
  height: 14px;
  top: -179px;
  left: 19%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 7s flakes linear infinite;
  animation: 7s flakes linear infinite;
}

.flake:nth-child(12) {
  width: 16px;
  height: 16px;
  top: -376px;
  left: 3%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 20s flakes linear infinite;
  animation: 20s flakes linear infinite;
}

.flake:nth-child(13) {
  width: 8px;
  height: 8px;
  top: -114px;
  left: 84%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(14) {
  width: 15px;
  height: 15px;
  top: -7px;
  left: 31%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 12s flakes linear infinite;
  animation: 12s flakes linear infinite;
}

.flake:nth-child(15) {
  width: 6px;
  height: 6px;
  top: -264px;
  left: 62%;
  opacity: 0.96;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 16s flakes linear infinite;
  animation: 16s flakes linear infinite;
}

.flake:nth-child(16) {
  width: 12px;
  height: 12px;
  top: -283px;
  left: 41%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 22s flakes linear infinite;
  animation: 22s flakes linear infinite;
}

.flake:nth-child(17) {
  width: 18px;
  height: 18px;
  top: -598px;
  left: 70%;
  opacity: 0.72;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 17s flakes linear infinite;
  animation: 17s flakes linear infinite;
}

.flake:nth-child(18) {
  width: 6px;
  height: 6px;
  top: -262px;
  left: 73%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 14s flakes linear infinite;
  animation: 14s flakes linear infinite;
}

.flake:nth-child(19) {
  width: 17px;
  height: 17px;
  top: -321px;
  left: 132%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 8s flakes linear infinite;
  animation: 8s flakes linear infinite;
}

.flake:nth-child(20) {
  width: 17px;
  height: 17px;
  top: -206px;
  left: 99%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 12s flakes linear infinite;
  animation: 12s flakes linear infinite;
}

.flake:nth-child(21) {
  width: 16px;
  height: 16px;
  top: -196px;
  left: 68%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 7s flakes linear infinite;
  animation: 7s flakes linear infinite;
}

.flake:nth-child(22) {
  width: 7px;
  height: 7px;
  top: -690px;
  left: 21%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 9s flakes linear infinite;
  animation: 9s flakes linear infinite;
}

.flake:nth-child(23) {
  width: 7px;
  height: 7px;
  top: -293px;
  left: 82%;
  opacity: 0.65;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 6s flakes linear infinite;
  animation: 6s flakes linear infinite;
}

.flake:nth-child(24) {
  width: 8px;
  height: 8px;
  top: -636px;
  left: 100%;
  opacity: 0.54;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 15s flakes linear infinite;
  animation: 15s flakes linear infinite;
}

.flake:nth-child(25) {
  width: 14px;
  height: 14px;
  top: -449px;
  left: 46%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 10s flakes linear infinite;
  animation: 10s flakes linear infinite;
}

.flake:nth-child(26) {
  width: 6px;
  height: 6px;
  top: -15px;
  left: 20%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 21s flakes linear infinite;
  animation: 21s flakes linear infinite;
}

.flake:nth-child(27) {
  width: 10px;
  height: 10px;
  top: -557px;
  left: 145%;
  opacity: 0.57;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 12s flakes linear infinite;
  animation: 12s flakes linear infinite;
}

.flake:nth-child(28) {
  width: 10px;
  height: 10px;
  top: -544px;
  left: 127%;
  opacity: 0.93;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 13s flakes linear infinite;
  animation: 13s flakes linear infinite;
}

.flake:nth-child(29) {
  width: 12px;
  height: 12px;
  top: -291px;
  left: 66%;
  opacity: 0.92;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 11s flakes linear infinite;
  animation: 11s flakes linear infinite;
}

.flake:nth-child(30) {
  width: 11px;
  height: 11px;
  top: -475px;
  left: 116%;
  opacity: 0.64;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 14s flakes linear infinite;
  animation: 14s flakes linear infinite;
}

.flake:nth-child(31) {
  width: 16px;
  height: 16px;
  top: -678px;
  left: 122%;
  opacity: 0.53;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 12s flakes linear infinite;
  animation: 12s flakes linear infinite;
}

.flake:nth-child(32) {
  width: 9px;
  height: 9px;
  top: -265px;
  left: 59%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 18s flakes linear infinite;
  animation: 18s flakes linear infinite;
}

.flake:nth-child(33) {
  width: 9px;
  height: 9px;
  top: -409px;
  left: 129%;
  opacity: 0.63;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 23s flakes linear infinite;
  animation: 23s flakes linear infinite;
}

.flake:nth-child(34) {
  width: 16px;
  height: 16px;
  top: -3px;
  left: 89%;
  opacity: 0.68;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 8s flakes linear infinite;
  animation: 8s flakes linear infinite;
}

.flake:nth-child(35) {
  width: 7px;
  height: 7px;
  top: -26px;
  left: 139%;
  opacity: 0.65;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 22s flakes linear infinite;
  animation: 22s flakes linear infinite;
}

.flake:nth-child(36) {
  width: 10px;
  height: 10px;
  top: -318px;
  left: 73%;
  opacity: 0.57;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 9s flakes linear infinite;
  animation: 9s flakes linear infinite;
}

.flake:nth-child(37) {
  width: 6px;
  height: 6px;
  top: -114px;
  left: 141%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 18s flakes linear infinite;
  animation: 18s flakes linear infinite;
}

.flake:nth-child(38) {
  width: 6px;
  height: 6px;
  top: -606px;
  left: 54%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 14s flakes linear infinite;
  animation: 14s flakes linear infinite;
}

.flake:nth-child(39) {
  width: 15px;
  height: 15px;
  top: -71px;
  left: 79%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(40) {
  width: 9px;
  height: 9px;
  top: -138px;
  left: 85%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 9s flakes linear infinite;
  animation: 9s flakes linear infinite;
}

.flake:nth-child(41) {
  width: 18px;
  height: 18px;
  top: -474px;
  left: 47%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 8s flakes linear infinite;
  animation: 8s flakes linear infinite;
}

.flake:nth-child(42) {
  width: 14px;
  height: 14px;
  top: -613px;
  left: 71%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(43) {
  width: 14px;
  height: 14px;
  top: -314px;
  left: 88%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 13s flakes linear infinite;
  animation: 13s flakes linear infinite;
}

.flake:nth-child(44) {
  width: 15px;
  height: 15px;
  top: -202px;
  left: 36%;
  opacity:1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 21s flakes linear infinite;
  animation: 21s flakes linear infinite;
}

.flake:nth-child(45) {
  width: 8px;
  height: 8px;
  top: -85px;
  left: 105%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 22s flakes linear infinite;
  animation: 22s flakes linear infinite;
}

.flake:nth-child(46) {
  width: 6px;
  height: 6px;
  top: -79px;
  left: 124%;
  opacity: 0.94;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 8s flakes linear infinite;
  animation: 8s flakes linear infinite;
}

.flake:nth-child(47) {
  width: 8px;
  height: 8px;
  top: -54px;
  left: 6%;
  opacity:1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 25s flakes linear infinite;
  animation: 25s flakes linear infinite;
}

.flake:nth-child(48) {
  width: 15px;
  height: 15px;
  top: -131px;
  left: 61%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 9s flakes linear infinite;
  animation: 9s flakes linear infinite;
}

.flake:nth-child(49) {
  width: 6px;
  height: 6px;
  top: -132px;
  left: 138%;
  opacity: 0.83;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 13s flakes linear infinite;
  animation: 13s flakes linear infinite;
}

.flake:nth-child(50) {
  width: 14px;
  height: 14px;
  top: -532px;
  left: 108%;
  opacity: 0.73;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 24s flakes linear infinite;
  animation: 24s flakes linear infinite;
}

.flake:nth-child(51) {
  width: 13px;
  height: 13px;
  top: -689px;
  left: 136%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 17s flakes linear infinite;
  animation: 17s flakes linear infinite;
}

.flake:nth-child(52) {
  width: 12px;
  height: 12px;
  top: -531px;
  left: 122%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 10s flakes linear infinite;
  animation: 10s flakes linear infinite;
}

.flake:nth-child(53) {
  width: 12px;
  height: 12px;
  top: -290px;
  left: 18%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 12s flakes linear infinite;
  animation: 12s flakes linear infinite;
}

.flake:nth-child(54) {
  width: 18px;
  height: 18px;
  top: -618px;
  left: 139%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 18s flakes linear infinite;
  animation: 18s flakes linear infinite;
}

.flake:nth-child(55) {
  width: 9px;
  height: 9px;
  top: -303px;
  left: 119%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 19s flakes linear infinite;
  animation: 19s flakes linear infinite;
}

.flake:nth-child(56) {
  width: 17px;
  height: 17px;
  top: -197px;
  left: 18%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 11s flakes linear infinite;
  animation: 11s flakes linear infinite;
}

.flake:nth-child(57) {
  width: 18px;
  height: 18px;
  top: -603px;
  left: 57%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 21s flakes linear infinite;
  animation: 21s flakes linear infinite;
}

.flake:nth-child(58) {
  width: 17px;
  height: 17px;
  top: -506px;
  left: 97%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 17s flakes linear infinite;
  animation: 17s flakes linear infinite;
}

.flake:nth-child(59) {
  width: 14px;
  height: 14px;
  top: -697px;
  left: 104%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 6s flakes linear infinite;
  animation: 6s flakes linear infinite;
}

.flake:nth-child(60) {
  width: 18px;
  height: 18px;
  top: -273px;
  left: 26%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 12s flakes linear infinite;
  animation: 12s flakes linear infinite;
}

.flake:nth-child(61) {
  width: 14px;
  height: 14px;
  top: -516px;
  left: 42%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 20s flakes linear infinite;
  animation: 20s flakes linear infinite;
}

.flake:nth-child(62) {
  width: 16px;
  height: 16px;
  top: -314px;
  left: 103%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 13s flakes linear infinite;
  animation: 13s flakes linear infinite;
}

.flake:nth-child(63) {
  width: 11px;
  height: 11px;
  top: -618px;
  left: 40%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 13s flakes linear infinite;
  animation: 13s flakes linear infinite;
}

.flake:nth-child(64) {
  width: 18px;
  height: 18px;
  top: -52px;
  left: 133%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 16s flakes linear infinite;
  animation: 16s flakes linear infinite;
}

.flake:nth-child(65) {
  width: 14px;
  height: 14px;
  top: -423px;
  left: 96%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 14s flakes linear infinite;
  animation: 14s flakes linear infinite;
}

.flake:nth-child(66) {
  width: 14px;
  height: 14px;
  top: -698px;
  left: 63%;
  opacity: 0.96;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 16s flakes linear infinite;
  animation: 16s flakes linear infinite;
}

.flake:nth-child(67) {
  width: 16px;
  height: 16px;
  top: -241px;
  left: 113%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 17s flakes linear infinite;
  animation: 17s flakes linear infinite;
}

.flake:nth-child(68) {
  width: 6px;
  height: 6px;
  top: -600px;
  left: 85%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 20s flakes linear infinite;
  animation: 20s flakes linear infinite;
}

.flake:nth-child(69) {
  width: 6px;
  height: 6px;
  top: -143px;
  left: 48%;
  opacity: 1;
  -webkit-filter: blur(4px);
          filter: blur(4px);
  -webkit-animation: 23s flakes linear infinite;
  animation: 23s flakes linear infinite;
}

.flake:nth-child(70) {
  width: 6px;
  height: 6px;
  top: -458px;
  left: 2%;
  opacity: 1;
  -webkit-filter: blur(3px);
          filter: blur(3px);
  -webkit-animation: 11s flakes linear infinite;
  animation: 11s flakes linear infinite;
}

@-webkit-keyframes flakes {
  100% {
    -webkit-transform: translateY(1000px) rotateX(13deg) rotateY(44deg);
    transform: translateY(1000px) rotateX(13deg) rotateY(44deg);
    opacity: 0;
  }
}

@keyframes flakes {
  100% {
    -webkit-transform: translateY(1000px) rotateX(13deg) rotateY(44deg);
    transform: translateY(1000px) rotateX(13deg) rotateY(44deg);
    opacity: 0;
  }
}