div+css逼真悬浮风向的下雨动画代码

代码语言:html

所属分类:动画

代码描述:div+css逼真悬浮风向的下雨动画代码,鼠标悬浮罗盘改变风向。

代码标签: div css 悬浮 风向 下雨 动画 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
@charset "UTF-8";
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 91deg;
}
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #07131c, #305472);
}
body:before, body:after {
  content: "CLICK & HOLD TO CREATE LIGHTNING";
  font-family: Arial, Helvetica, serif;
  font-size: 12px;
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 18px;
  color: #fff4;
  z-index: -1;
}
body:before {
  content: "HOVER SCREEN TO CHANGE WIND SPEED";
  top: 18px;
}
body:active:after {
  color: #fff0;
  transition: all 0.5s ease 0s;
}

.rain {
  position: absolute;
  width: 120vw;
  height: 100vh;
  cursor: pointer;
  z-index: 0;
  left: -10vw;
}
.rain .left, .rain .right {
  width: 20vw;
  height: 100vh;
  left: 10vw;
  position: absolute;
  box-sizing: border-box;
  z-index: 2;
}
.rain .left:hover ~ .drop {
  --angle: 105deg;
}
.rain .left:hover ~ .right:after {
  transform: rotate(22deg);
  transition: all 0.5s ease 0s;
}
.rain .right {
  left: initial;
  right: 10vw;
}
.rain .right:after {
  content: "△\a▼";
  position: fixed;
  text-indent: 1px;
  left: calc(50% - 30px);
  top: 45px;
  color: #fff8;
  font-size: 20px;
  border: 2px dashed #fff3;
  border-radius: 100%;
  width: 60px;
  height: 60px;
  box-sizing: border-box;
  padding: 13px 18px;
  text-align: center;
  line-height: 15px;
  transition: all 0.5s ease 0s;
  white-space: pre-wrap;
}
.rain .right:hover:after {
  transform: rotate(-22deg);
  transition: all 0.5s ease 0s;
}
.rain .right:hover ~ .drop {
  --angle: 75deg;
}
.rain .right.center {
  right: 30vw;
}
.rain .right.center:after {
  display: none;
}
.rain .right.center:hover ~ .drop {
  --angle: 85deg;
}
.rain .right.center:hover ~ .right:after {
  transform: rotate(-12deg);
  transition: all 0.5s ease 0s;
}
.rain .left.center {
  left: 30vw;
}
.rain .left.center:hover ~ .drop {
  --angle: 95deg;
}
.rain .left.center:hover ~ .right:after {
  transform: rotate(12deg);
  transition: all 0.5s ease 0s;
}
.rain:active {
  cursor: none;
  animation: lightning 0.1s linear 0s 2, lightning 0.15s ease-out 0.25s 1;
}

@keyframes lightning {
  50% {
    background: radial-gradient(circle at calc(50% - 10vw) -20%, #fff4, #fff0 20%), linear-gradient(180deg, #fff9, #fff3);
  }
}
.drop {
  border: 0.25vmin solid transparent;
  border-bottom-color: #abc2e9;
  position: absolute;
  top: -5vmin;
  --angle: 91deg;
}
.drop:nth-child(1) {
  opacity: 0.54;
  left: 29.7vw;
  border-left-width: 0.1vmin;
  animation: fall-1 1.65s -11.5s ease-in infinite;
}
@keyframes fall-1 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(2) {
  opacity: 0.1;
  left: 42.2vw;
  border-left-width: 5.1vmin;
  animation: fall-2 1.35s -7.5s ease-in infinite;
}
@keyframes fall-2 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(3) {
  opacity: 0.08;
  left: 108.4vw;
  border-left-width: 7vmin;
  animation: fall-3 0.75s -2.5s ease-in infinite;
}
@keyframes fall-3 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(4) {
  opacity: 0.06;
  left: 82.3vw;
  border-left-width: 7.2vmin;
  animation: fall-4 1.8s -5s ease-in infinite;
}
@keyframes fall-4 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(5) {
  opacity: 0.85;
  left: 77.8vw;
  border-left-width: 3.2vmin;
  animation: fall-5 1.35s -3s ease-in infinite;
}
@keyframes fall-5 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(6) {
  opacity: 0.39;
  left: 35.8vw;
  border-left-width: 5.3vmin;
  animation: fall-6 0.6s -2s ease-in infinite;
}
@keyframes fall-6 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(7) {
  opacity: 0.15;
  left: 2.9vw;
  border-left-width: 2vmin;
  animation: fall-7 1.35s -10s ease-in infinite;
}
@keyframes fall-7 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(8) {
  opacity: 0.16;
  left: 54.1vw;
  border-left-width: 6vmin;
  animation: fall-8 0.6s -8s ease-in infinite;
}
@keyframes fall-8 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(9) {
  opacity: 0.89;
  left: 16.7vw;
  border-left-width: 7.7vmin;
  animation: fall-9 0.75s -12.5s ease-in infinite;
}
@keyframes fall-9 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(10) {
  opacity: 0.1;
  left: 48vw;
  border-left-width: 5.1vmin;
  animation: fall-10 0.75s -4.5s ease-in infinite;
}
@keyframes fall-10 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(11) {
  opacity: 0.1;
  left: 31.1vw;
  border-left-width: 8vmin;
  animation: fall-11 1.5s -2s ease-in infinite;
}
@keyframes fall-11 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(12) {
  opacity: 0.52;
  left: 94.7vw;
  border-left-width: 5.2vmin;
  animation: fall-12 1.5s -0.5s ease-in infinite;
}
@keyframes fall-12 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(13) {
  opacity: 0.86;
  left: 55vw;
  border-left-width: 3.5vmin;
  animation: fall-13 1.8s -1s ease-in infinite;
}
@keyframes fall-13 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(14) {
  opacity: 0.76;
  left: 62.8vw;
  border-left-width: 4.8vmin;
  animation: fall-14 1.8s -2.5s ease-in infinite;
}
@keyframes fall-14 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(15) {
  opacity: 0.62;
  left: 56.5vw;
  border-left-width: 0.1vmin;
  animation: fall-15 0.15s -5s ease-in infinite;
}
@keyframes fall-15 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(16) {
  opacity: 0.25;
  left: 61.7vw;
  border-left-width: 6.1vmin;
  animation: fall-16 2.25s -7s ease-in infinite;
}
@keyframes fall-16 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(17) {
  opacity: 0.79;
  left: 27.4vw;
  border-left-width: 4vmin;
  animation: fall-17 1.5s -11.5s ease-in infinite;
}
@keyframes fall-17 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(18) {
  opacity: 0.11;
  left: 47.5vw;
  border-left-width: 4.6vmin;
  animation: fall-18 1.8s -5.5s ease-in infinite;
}
@keyframes fall-18 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(19) {
  opacity: 0.86;
  left: 110.5vw;
  border-left-width: 2.7vmin;
  animation: fall-19 1.35s -7.5s ease-in infinite;
}
@keyframes fall-19 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(20) {
  opacity: 0.28;
  left: 54.6vw;
  border-left-width: 5vmin;
  animation: fall-20 0.6s -10s ease-in infinite;
}
@keyframes fall-20 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(21) {
  opacity: 0.74;
  left: 26.7vw;
  border-left-width: 1.3vmin;
  animation: fall-21 1.5s -7.5s ease-in infinite;
}
@keyframes fall-21 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(22) {
  opacity: 0.47;
  left: 87.6vw;
  border-left-width: 2.2vmin;
  animation: fall-22 0.6s -3s ease-in infinite;
}
@keyframes fall-22 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(23) {
  opacity: 0.87;
  left: 0.5vw;
  border-left-width: 3.9vmin;
  animation: fall-23 1.65s -2.5s ease-in infinite;
}
@keyframes fall-23 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(24) {
  opacity: 0.22;
  left: 37.6vw;
  border-left-width: 1.2vmin;
  animation: fall-24 1.95s -5.5s ease-in infinite;
}
@keyframes fall-24 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(25) {
  opacity: 0.68;
  left: 21.9vw;
  border-left-width: 0.4vmin;
  animation: fall-25 0.3s -11.5s ease-in infinite;
}
@keyframes fall-25 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(26) {
  opacity: 0.43;
  left: 6.5vw;
  border-left-width: 2.4vmin;
  animation: fall-26 0.75s -5.5s ease-in infinite;
}
@keyframes fall-26 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(27) {
  opacity: 0.06;
  left: 51.9vw;
  border-left-width: 4vmin;
  animation: fall-27 1.65s -10.5s ease-in infinite;
}
@keyframes fall-27 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(28) {
  opacity: 0.6;
  left: 96.1vw;
  border-left-width: 0.2vmin;
  animation: fall-28 2.1s -11s ease-in infinite;
}
@keyframes fall-28 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(29) {
  opacity: 0.44;
  left: 51.5vw;
  border-left-width: 2.9vmin;
  animation: fall-29 1.35s -4s ease-in infinite;
}
@keyframes fall-29 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(30) {
  opacity: 0.11;
  left: 97vw;
  border-left-width: 5.3vmin;
  animation: fall-30 0.3s -4s ease-in infinite;
}
@keyframes fall-30 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(31) {
  opacity: 0.34;
  left: 80.8vw;
  border-left-width: 4vmin;
  animation: fall-31 1.2s -8s ease-in infinite;
}
@keyframes fall-31 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(32) {
  opacity: 0.13;
  left: 80vw;
  border-left-width: 5.5vmin;
  animation: fall-32 0.9s -9.5s ease-in infinite;
}
@keyframes fall-32 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(33) {
  opacity: 0.74;
  left: 99.7vw;
  border-left-width: 5.4vmin;
  animation: fall-33 1.35s -6.5s ease-in infinite;
}
@keyframes fall-33 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(34) {
  opacity: 0.77;
  left: 98.8vw;
  border-left-width: 5.6vmin;
  animation: fall-34 1.2s -6s ease-in infinite;
}
@keyframes fall-34 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(35) {
  opacity: 0.8;
  left: 114.3vw;
  border-left-width: 1.3vmin;
  animation: fall-35 0.75s -9.5s ease-in infinite;
}
@keyframes fall-35 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(36) {
  opacity: 0.82;
  left: 82.8vw;
  border-left-width: 5.4vmin;
  animation: fall-36 0.9s -9.5s ease-in infinite;
}
@keyframes fall-36 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(37) {
  opacity: 0.16;
  left: 75.7vw;
  border-left-width: 6.9vmin;
  animation: fall-37 2.25s -2s ease-in infinite;
}
@keyframes fall-37 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(38) {
  opacity: 0.37;
  left: 42.2vw;
  border-left-width: 2.8vmin;
  animation: fall-38 1.05s -6.5s ease-in infinite;
}
@keyframes fall-38 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(39) {
  opacity: 0.85;
  left: 105.2vw;
  border-left-width: 6vmin;
  animation: fall-39 0.6s -3s ease-in infinite;
}
@keyframes fall-39 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(40) {
  opacity: 0.77;
  left: 90vw;
  border-left-width: 4.9vmin;
  animation: fall-40 0.6s -0.5s ease-in infinite;
}
@keyframes fall-40 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(41) {
  opacity: 0.14;
  left: 56.1vw;
  border-left-width: 1.3vmin;
  animation: fall-41 1.35s -2s ease-in infinite;
}
@keyframes fall-41 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(42) {
  opacity: 0.22;
  left: 88.9vw;
  border-left-width: 1.8vmin;
  animation: fall-42 1.35s -4.5s ease-in infinite;
}
@keyframes fall-42 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(43) {
  opacity: 0.73;
  left: 37.1vw;
  border-left-width: 7.7vmin;
  animation: fall-43 1.5s -8s ease-in infinite;
}
@keyframes fall-43 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(44) {
  opacity: 0.16;
  left: 12.1vw;
  border-left-width: 5.6vmin;
  animation: fall-44 0.9s -2s ease-in infinite;
}
@keyframes fall-44 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(45) {
  opacity: 0.84;
  left: 36.1vw;
  border-left-width: 5.9vmin;
  animation: fall-45 0.45s -2.5s ease-in infinite;
}
@keyframes fall-45 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(46) {
  opacity: 0.27;
  left: 110.3vw;
  border-left-width: 6.7vmin;
  animation: fall-46 0.45s -6.5s ease-in infinite;
}
@keyframes fall-46 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(47) {
  opacity: 0.67;
  left: 63vw;
  border-left-width: 3.2vmin;
  animation: fall-47 0.6s -6s ease-in infinite;
}
@keyframes fall-47 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(48) {
  opacity: 0.21;
  left: 72.2vw;
  border-left-width: 2.2vmin;
  animation: fall-48 1.65s -9.5s ease-in infinite;
}
@keyframes fall-48 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(49) {
  opacity: 0.51;
  left: 18.8vw;
  border-left-width: 7.2vmin;
  animation: fall-49 1.05s -3s ease-in infinite;
}
@keyframes fall-49 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(50) {
  opacity: 0.65;
  left: 113.5vw;
  border-left-width: 0.9vmin;
  animation: fall-50 2.1s -11s ease-in infinite;
}
@keyframes fall-50 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(51) {
  opacity: 0.68;
  left: 97.3vw;
  border-left-width: 7.2vmin;
  animation: fall-51 2.1s -2.5s ease-in infinite;
}
@keyframes fall-51 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(52) {
  opacity: 0.8;
  left: 75.2vw;
  border-left-width: 3.9vmin;
  animation: fall-52 0.75s -11s ease-in infinite;
}
@keyframes fall-52 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(53) {
  opacity: 0.5;
  left: 114vw;
  border-left-width: 2.2vmin;
  animation: fall-53 1.8s -4.5s ease-in infinite;
}
@keyframes fall-53 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(54) {
  opacity: 0.02;
  left: 56.8vw;
  border-left-width: 0.3vmin;
  animation: fall-54 1.5s -4.5s ease-in infinite;
}
@keyframes fall-54 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(55) {
  opacity: 0.6;
  left: 6.8vw;
  border-left-width: 0.5vmin;
  animation: fall-55 2.1s -7s ease-in infinite;
}
@keyframes fall-55 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(56) {
  opacity: 0.63;
  left: 117.5vw;
  border-left-width: 7.9vmin;
  animation: fall-56 1.35s -1s ease-in infinite;
}
@keyframes fall-56 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(57) {
  opacity: 0.1;
  left: 62.5vw;
  border-left-width: 6.4vmin;
  animation: fall-57 0.75s -12s ease-in infinite;
}
@keyframes fall-57 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(58) {
  opacity: 0.53;
  left: 71.7vw;
  border-left-width: 3.9vmin;
  animation: fall-58 0.75s -6.5s ease-in infinite;
}
@keyframes fall-58 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(59) {
  opacity: 0.85;
  left: 69.7vw;
  border-left-width: 2.1vmin;
  animation: fall-59 0.3s -12s ease-in infinite;
}
@keyframes fall-59 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(60) {
  opacity: 0.03;
  left: 32.3vw;
  border-left-width: 4.8vmin;
  animation: fall-60 1.35s -2.5s ease-in infinite;
}
@keyframes fall-60 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(61) {
  opacity: 0.25;
  left: 81.4vw;
  border-left-width: 2.1vmin;
  animation: fall-61 1.05s -3s ease-in infinite;
}
@keyframes fall-61 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(62) {
  opacity: 0.23;
  left: 64.6vw;
  border-left-width: 6.1vmin;
  animation: fall-62 0.3s -7s ease-in infinite;
}
@keyframes fall-62 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(63) {
  opacity: 0.53;
  left: 89.1vw;
  border-left-width: 7.2vmin;
  animation: fall-63 0.6s -0.5s ease-in infinite;
}
@keyframes fall-63 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(64) {
  opacity: 0.71;
  left: 77.2vw;
  border-left-width: 4.9vmin;
  animation: fall-64 1.35s -0.5s ease-in infinite;
}
@keyframes fall-64 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(65) {
  opacity: 0.48;
  left: 79.7vw;
  border-left-width: 0.6vmin;
  animation: fall-65 0.75s -12.5s ease-in infinite;
}
@keyframes fall-65 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(66) {
  opacity: 0.08;
  left: 95.4vw;
  border-left-width: 2.7vmin;
  animation: fall-66 1.35s -5.5s ease-in infinite;
}
@keyframes fall-66 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(67) {
  opacity: 0.9;
  left: 85.2vw;
  border-left-width: 7.1vmin;
  animation: fall-67 0.75s -2s ease-in infinite;
}
@keyframes fall-67 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(68) {
  opacity: 0.68;
  left: 48.9vw;
  border-left-width: 0.8vmin;
  animation: fall-68 0.6s -7.5s ease-in infinite;
}
@keyframes fall-68 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(69) {
  opacity: 0.33;
  left: 28.3vw;
  border-left-width: 4.9vmin;
  animation: fall-69 1.95s -1.5s ease-in infinite;
}
@keyframes fall-69 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(70) {
  opacity: 0.12;
  left: 48.9vw;
  border-left-width: 3.2vmin;
  animation: fall-70 1.35s -7s ease-in infinite;
}
@keyframes fall-70 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(71) {
  opacity: 0.46;
  left: 40.7vw;
  border-left-width: 7.8vmin;
  animation: fall-71 0.3s -5.5s ease-in infinite;
}
@keyframes fall-71 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(72) {
  opacity: 0.33;
  left: 34.9vw;
  border-left-width: 0.1vmin;
  animation: fall-72 1.35s -12.5s ease-in infinite;
}
@keyframes fall-72 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(73) {
  opacity: 0.43;
  left: 25.4vw;
  border-left-width: 3vmin;
  animation: fall-73 0.75s -5.5s ease-in infinite;
}
@keyframes fall-73 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(74) {
  opacity: 0.13;
  left: 78.8vw;
  border-left-width: 6.2vmin;
  animation: fall-74 1.05s -1.5s ease-in infinite;
}
@keyframes fall-74 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(75) {
  opacity: 0.16;
  left: 49.3vw;
  border-left-width: 4.1vmin;
  animation: fall-75 0.6s -7.5s ease-in infinite;
}
@keyframes fall-75 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(76) {
  opacity: 0.73;
  left: 28.3vw;
  border-left-width: 2.1vmin;
  animation: fall-76 1.65s -1s ease-in infinite;
}
@keyframes fall-76 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(77) {
  opacity: 0.78;
  left: 3.7vw;
  border-left-width: 3.9vmin;
  animation: fall-77 0.15s -9.5s ease-in infinite;
}
@keyframes fall-77 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(78) {
  opacity: 0.29;
  left: 73.7vw;
  border-left-width: 7.4vmin;
  animation: fall-78 2.1s -12s ease-in infinite;
}
@keyframes fall-78 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(79) {
  opacity: 0.06;
  left: 63.5vw;
  border-left-width: 4.8vmin;
  animation: fall-79 1.2s -9.5s ease-in infinite;
}
@keyframes fall-79 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(80) {
  opacity: 0.57;
  left: 8.5vw;
  border-left-width: 4.4vmin;
  animation: fall-80 0.15s -2.5s ease-in infinite;
}
@keyframes fall-80 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(81) {
  opacity: 0.32;
  left: 21.2vw;
  border-left-width: 1.1vmin;
  animation: fall-81 1.05s -11s ease-in infinite;
}
@keyframes fall-81 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(82) {
  opacity: 0.28;
  left: 8vw;
  border-left-width: 2.9vmin;
  animation: fall-82 1.5s -11s ease-in infinite;
}
@keyframes fall-82 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(83) {
  opacity: 0.46;
  left: 74.6vw;
  border-left-width: 0.1vmin;
  animation: fall-83 1.95s -3.5s ease-in infinite;
}
@keyframes fall-83 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(84) {
  opacity: 0.61;
  left: 43vw;
  border-left-width: 4.3vmin;
  animation: fall-84 0.6s -8.5s ease-in infinite;
}
@keyframes fall-84 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(85) {
  opacity: 0.7;
  left: 118.4vw;
  border-left-width: 3.3vmin;
  animation: fall-85 1.95s -2.5s ease-in infinite;
}
@keyframes fall-85 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(86) {
  opacity: 0.41;
  left: 43.2vw;
  border-left-width: 6.3vmin;
  animation: fall-86 1.2s -7.5s ease-in infinite;
}
@keyframes fall-86 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(87) {
  opacity: 0.15;
  left: 87.2vw;
  border-left-width: 1.9vmin;
  animation: fall-87 1.65s -12.5s ease-in infinite;
}
@keyframes fall-87 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(88) {
  opacity: 0.12;
  left: 12.3vw;
  border-left-width: 6.5vmin;
  animation: fall-88 0.45s -6.5s ease-in infinite;
}
@keyframes fall-88 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(89) {
  opacity: 0.46;
  left: 86.5vw;
  border-left-width: 2.3vmin;
  animation: fall-89 1.95s -5s ease-in infinite;
}
@keyframes fall-89 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(90) {
  opacity: 0.71;
  left: 79.7vw;
  border-left-width: 7.8vmin;
  animation: fall-90 0.45s -2.5s ease-in infinite;
}
@keyframes fall-90 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(91) {
  opacity: 0.65;
  left: 40vw;
  border-left-width: 1.2vmin;
  animation: fall-91 1.8s -3.5s ease-in infinite;
}
@keyframes fall-91 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(92) {
  opacity: 0.56;
  left: 84.6vw;
  border-left-width: 4.6vmin;
  animation: fall-92 1.2s -7.5s ease-in infinite;
}
@keyframes fall-92 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(93) {
  opacity: 0.44;
  left: 115vw;
  border-left-width: 4.3vmin;
  animation: fall-93 2.25s -0.5s ease-in infinite;
}
@keyframes fall-93 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(94) {
  opacity: 0.67;
  left: 34.9vw;
  border-left-width: 4.3vmin;
  animation: fall-94 0.75s -3s ease-in infinite;
}
@keyframes fall-94 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(95) {
  opacity: 0.65;
  left: 1.2vw;
  border-left-width: 0.3vmin;
  animation: fall-95 1.5s -2s ease-in infinite;
}
@keyframes fall-95 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(96) {
  opacity: 0.5;
  left: 116.9vw;
  border-left-width: 5.7vmin;
  animation: fall-96 1.8s -10.5s ease-in infinite;
}
@keyframes fall-96 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(97) {
  opacity: 0.4;
  left: 65.7vw;
  border-left-width: 5.3vmin;
  animation: fall-97 1.95s -5.5s ease-in infinite;
}
@keyframes fall-97 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(98) {
  opacity: 0.32;
  left: 34.4vw;
  border-left-width: 1.2vmin;
  animation: fall-98 0.75s -8.5s ease-in infinite;
}
@keyframes fall-98 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(99) {
  opacity: 0.02;
  left: 62.9vw;
  border-left-width: 4.1vmin;
  animation: fall-99 2.25s -9s ease-in infinite;
}
@keyframes fall-99 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(100) {
  opacity: 0.81;
  left: 107.2vw;
  border-left-width: 5.7vmin;
  animation: fall-100 2.1s -5s ease-in infinite;
}
@keyframes fall-100 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(101) {
  opacity: 0.89;
  left: 87.4vw;
  border-left-width: 7.4vmin;
  animation: fall-101 0.9s -9s ease-in infinite;
}
@keyframes fall-101 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(102) {
  opacity: 0.88;
  left: 108.1vw;
  border-left-width: 2.2vmin;
  animation: fall-102 1.35s -6.5s ease-in infinite;
}
@keyframes fall-102 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(103) {
  opacity: 0.3;
  left: 3.8vw;
  border-left-width: 1.1vmin;
  animation: fall-103 1.65s -8s ease-in infinite;
}
@keyframes fall-103 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(104) {
  opacity: 0.7;
  left: 24.4vw;
  border-left-width: 0.5vmin;
  animation: fall-104 0.3s -2s ease-in infinite;
}
@keyframes fall-104 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(105) {
  opacity: 0.51;
  left: 57.8vw;
  border-left-width: 3.5vmin;
  animation: fall-105 1.65s -10s ease-in infinite;
}
@keyframes fall-105 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(106) {
  opacity: 0.48;
  left: 20.9vw;
  border-left-width: 0.7vmin;
  animation: fall-106 0.75s -7s ease-in infinite;
}
@keyframes fall-106 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(107) {
  opacity: 0.87;
  left: 32.4vw;
  border-left-width: 2.1vmin;
  animation: fall-107 0.75s -11.5s ease-in infinite;
}
@keyframes fall-107 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(108) {
  opacity: 0.62;
  left: 33.3vw;
  border-left-width: 8vmin;
  animation: fall-108 0.15s -5s ease-in infinite;
}
@keyframes fall-108 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(109) {
  opacity: 0.11;
  left: 102.1vw;
  border-left-width: 3.4vmin;
  animation: fall-109 1.95s -6s ease-in infinite;
}
@keyframes fall-109 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(110) {
  opacity: 0.18;
  left: 94.5vw;
  border-left-width: 0.6vmin;
  animation: fall-110 0.6s -1s ease-in infinite;
}
@keyframes fall-110 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(111) {
  opacity: 0.59;
  left: 29.9vw;
  border-left-width: 1.4vmin;
  animation: fall-111 0.9s -8s ease-in infinite;
}
@keyframes fall-111 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(112) {
  opacity: 0.56;
  left: 42.1vw;
  border-left-width: 2.7vmin;
  animation: fall-112 1.35s -4.5s ease-in infinite;
}
@keyframes fall-112 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(113) {
  opacity: 0.56;
  left: 81.5vw;
  border-left-width: 1vmin;
  animation: fall-113 0.6s -10.5s ease-in infinite;
}
@keyframes fall-113 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(114) {
  opacity: 0.01;
  left: 3.2vw;
  border-left-width: 0.2vmin;
  animation: fall-114 0.15s -7s ease-in infinite;
}
@keyframes fall-114 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(115) {
  opacity: 0.04;
  left: 41.4vw;
  border-left-width: 7vmin;
  animation: fall-115 1.8s -12s ease-in infinite;
}
@keyframes fall-115 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(116) {
  opacity: 0.69;
  left: 62.4vw;
  border-left-width: 6.1vmin;
  animation: fall-116 1.35s -11s ease-in infinite;
}
@keyframes fall-116 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(117) {
  opacity: 0.01;
  left: 93vw;
  border-left-width: 1.7vmin;
  animation: fall-117 2.1s -7s ease-in infinite;
}
@keyframes fall-117 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(118) {
  opacity: 0.02;
  left: 81.4vw;
  border-left-width: 4.8vmin;
  animation: fall-118 0.75s -6s ease-in infinite;
}
@keyframes fall-118 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(119) {
  opacity: 0.16;
  left: 56.6vw;
  border-left-width: 1vmin;
  animation: fall-119 0.3s -5.5s ease-in infinite;
}
@keyframes fall-119 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(120) {
  opacity: 0.04;
  left: 103.6vw;
  border-left-width: 5.7vmin;
  animation: fall-120 1.05s -10.5s ease-in infinite;
}
@keyframes fall-120 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(121) {
  opacity: 0.54;
  left: 36.7vw;
  border-left-width: 0.7vmin;
  animation: fall-121 2.1s -1.5s ease-in infinite;
}
@keyframes fall-121 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(122) {
  opacity: 0.55;
  left: 11.8vw;
  border-left-width: 0.9vmin;
  animation: fall-122 0.9s -8.5s ease-in infinite;
}
@keyframes fall-122 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(123) {
  opacity: 0.47;
  left: 94.6vw;
  border-left-width: 6.7vmin;
  animation: fall-123 0.45s -10s ease-in infinite;
}
@keyframes fall-123 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(124) {
  opacity: 0.64;
  left: 64.9vw;
  border-left-width: 5.2vmin;
  animation: fall-124 2.25s -10s ease-in infinite;
}
@keyframes fall-124 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(125) {
  opacity: 0.59;
  left: 89.2vw;
  border-left-width: 1.2vmin;
  animation: fall-125 0.6s -7s ease-in infinite;
}
@keyframes fall-125 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(126) {
  opacity: 0.68;
  left: 115.7vw;
  border-left-width: 4.7vmin;
  animation: fall-126 1.95s -4s ease-in infinite;
}
@keyframes fall-126 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(127) {
  opacity: 0.07;
  left: 68.7vw;
  border-left-width: 5.2vmin;
  animation: fall-127 1.8s -12.5s ease-in infinite;
}
@keyframes fall-127 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(128) {
  opacity: 0.41;
  left: 38.8vw;
  border-left-width: 6.1vmin;
  animation: fall-128 1.05s -6s ease-in infinite;
}
@keyframes fall-128 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(129) {
  opacity: 0.22;
  left: 15.3vw;
  border-left-width: 2.6vmin;
  animation: fall-129 0.3s -1s ease-in infinite;
}
@keyframes fall-129 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(130) {
  opacity: 0.7;
  left: 0.2vw;
  border-left-width: 6.2vmin;
  animation: fall-130 1.2s -3.5s ease-in infinite;
}
@keyframes fall-130 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(131) {
  opacity: 0.29;
  left: 7.3vw;
  border-left-width: 0.2vmin;
  animation: fall-131 1.65s -4.5s ease-in infinite;
}
@keyframes fall-131 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(132) {
  opacity: 0.45;
  left: 32.1vw;
  border-left-width: 4.3vmin;
  animation: fall-132 1.2s -2.5s ease-in infinite;
}
@keyframes fall-132 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(133) {
  opacity: 0.55;
  left: 86.9vw;
  border-left-width: 7.4vmin;
  animation: fall-133 0.15s -6.5s ease-in infinite;
}
@keyframes fall-133 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(134) {
  opacity: 0.8;
  left: 7.6vw;
  border-left-width: 5.8vmin;
  animation: fall-134 1.65s -1.5s ease-in infinite;
}
@keyframes fall-134 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(135) {
  opacity: 0.32;
  left: 119.6vw;
  border-left-width: 6.1vmin;
  animation: fall-135 0.9s -7s ease-in infinite;
}
@keyframes fall-135 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(136) {
  opacity: 0.66;
  left: 103.8vw;
  border-left-width: 6vmin;
  animation: fall-136 0.6s -9.5s ease-in infinite;
}
@keyframes fall-136 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(137) {
  opacity: 0.58;
  left: 80.8vw;
  border-left-width: 6.5vmin;
  animation: fall-137 0.15s -3s ease-in infinite;
}
@keyframes fall-137 {
  0.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(138) {
  opacity: 0.28;
  left: 47.9vw;
  border-left-width: 5.3vmin;
  animation: fall-138 0.9s -8s ease-in infinite;
}
@keyframes fall-138 {
  8.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(139) {
  opacity: 0.08;
  left: 62.1vw;
  border-left-width: 2.9vmin;
  animation: fall-139 1.65s -9s ease-in infinite;
}
@keyframes fall-139 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(140) {
  opacity: 0.7;
  left: 54.3vw;
  border-left-width: 5.4vmin;
  animation: fall-140 1.35s -3s ease-in infinite;
}
@keyframes fall-140 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(141) {
  opacity: 0.33;
  left: 69.7vw;
  border-left-width: 2.9vmin;
  animation: fall-141 1.35s -12s ease-in infinite;
}
@keyframes fall-141 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(142) {
  opacity: 0.84;
  left: 108.9vw;
  border-left-width: 4.7vmin;
  animation: fall-142 1.65s -12s ease-in infinite;
}
@keyframes fall-142 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(143) {
  opacity: 0.5;
  left: 104vw;
  border-left-width: 2.7vmin;
  animation: fall-143 2.25s -7.5s ease-in infinite;
}
@keyframes fall-143 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(144) {
  opacity: 0.9;
  left: 67.8vw;
  border-left-width: 3vmin;
  animation: fall-144 0.15s -2s ease-in infinite;
}
@keyframes fall-144 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(145) {
  opacity: 0.44;
  left: 67.1vw;
  border-left-width: 3.3vmin;
  animation: fall-145 0.3s -7s ease-in infinite;
}
@keyframes fall-145 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(146) {
  opacity: 0.12;
  left: 110.3vw;
  border-left-width: 3.3vmin;
  animation: fall-146 1.5s -4.5s ease-in infinite;
}
@keyframes fall-146 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(147) {
  opacity: 0.25;
  left: 42.6vw;
  border-left-width: 7.9vmin;
  animation: fall-147 0.9s -12.5s ease-in infinite;
}
@keyframes fall-147 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(148) {
  opacity: 0.58;
  left: 15.3vw;
  border-left-width: 1.3vmin;
  animation: fall-148 1.65s -8s ease-in infinite;
}
@keyframes fall-148 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(149) {
  opacity: 0.89;
  left: 69vw;
  border-left-width: 7.4vmin;
  animation: fall-149 2.25s -3s ease-in infinite;
}
@keyframes fall-149 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(150) {
  opacity: 0.76;
  left: 84.3vw;
  border-left-width: 4.7vmin;
  animation: fall-150 0.6s -4.5s ease-in infinite;
}
@keyframes fall-150 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(151) {
  opacity: 0.04;
  left: 111.1vw;
  border-left-width: 7.2vmin;
  animation: fall-151 1.8s -3s ease-in infinite;
}
@keyframes fall-151 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(152) {
  opacity: 0.71;
  left: 52vw;
  border-left-width: 7.2vmin;
  animation: fall-152 1.65s -11s ease-in infinite;
}
@keyframes fall-152 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(153) {
  opacity: 0.73;
  left: 114.2vw;
  border-left-width: 0.8vmin;
  animation: fall-153 0.45s -7.5s ease-in infinite;
}
@keyframes fall-153 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(154) {
  opacity: 0.42;
  left: 83.7vw;
  border-left-width: 0.9vmin;
  animation: fall-154 2.25s -8.5s ease-in infinite;
}
@keyframes fall-154 {
  6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(155) {
  opacity: 0.5;
  left: 19.8vw;
  border-left-width: 7.2vmin;
  animation: fall-155 0.15s -0.5s ease-in infinite;
}
@keyframes fall-155 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(156) {
  opacity: 0.14;
  left: 92.3vw;
  border-left-width: 7.4vmin;
  animation: fall-156 1.5s -4.5s ease-in infinite;
}
@keyframes fall-156 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(157) {
  opacity: 0.47;
  left: 41.8vw;
  border-left-width: 1.8vmin;
  animation: fall-157 1.2s -1.5s ease-in infinite;
}
@keyframes fall-157 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(158) {
  opacity: 0.88;
  left: 40.1vw;
  border-left-width: 1.8vmin;
  animation: fall-158 1.35s -10s ease-in infinite;
}
@keyframes fall-158 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(159) {
  opacity: 0.77;
  left: 7.8vw;
  border-left-width: 7.8vmin;
  animation: fall-159 0.45s -7s ease-in infinite;
}
@keyframes fall-159 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(160) {
  opacity: 0.23;
  left: 28.2vw;
  border-left-width: 7vmin;
  animation: fall-160 0.45s -8.5s ease-in infinite;
}
@keyframes fall-160 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(161) {
  opacity: 0.18;
  left: 45.1vw;
  border-left-width: 5.7vmin;
  animation: fall-161 0.6s -2.5s ease-in infinite;
}
@keyframes fall-161 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(162) {
  opacity: 0.74;
  left: 0.3vw;
  border-left-width: 1.7vmin;
  animation: fall-162 2.1s -5s ease-in infinite;
}
@keyframes fall-162 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(163) {
  opacity: 0.47;
  left: 88.4vw;
  border-left-width: 1.1vmin;
  animation: fall-163 0.6s -12.5s ease-in infinite;
}
@keyframes fall-163 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(164) {
  opacity: 0.49;
  left: 9.8vw;
  border-left-width: 4.7vmin;
  animation: fall-164 0.6s -4.5s ease-in infinite;
}
@keyframes fall-164 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(165) {
  opacity: 0.44;
  left: 105.8vw;
  border-left-width: 0.3vmin;
  animation: fall-165 1.05s -2.5s ease-in infinite;
}
@keyframes fall-165 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(166) {
  opacity: 0.57;
  left: 45.2vw;
  border-left-width: 5.7vmin;
  animation: fall-166 2.1s -12.5s ease-in infinite;
}
@keyframes fall-166 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(167) {
  opacity: 0.35;
  left: 54.8vw;
  border-left-width: 0.8vmin;
  animation: fall-167 0.75s -2.5s ease-in infinite;
}
@keyframes fall-167 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(168) {
  opacity: 0.39;
  left: 61.9vw;
  border-left-width: 4.1vmin;
  animation: fall-168 2.25s -9s ease-in infinite;
}
@keyframes fall-168 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(169) {
  opacity: 0.2;
  left: 32.3vw;
  border-left-width: 2.1vmin;
  animation: fall-169 1.05s -6.5s ease-in infinite;
}
@keyframes fall-169 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(170) {
  opacity: 0.44;
  left: 71.4vw;
  border-left-width: 3.7vmin;
  animation: fall-170 2.25s -4s ease-in infinite;
}
@keyframes fall-170 {
  6.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(171) {
  opacity: 0.68;
  left: 47.5vw;
  border-left-width: 7.7vmin;
  animation: fall-171 1.2s -5s ease-in infinite;
}
@keyframes fall-171 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(172) {
  opacity: 0.51;
  left: 55vw;
  border-left-width: 0.3vmin;
  animation: fall-172 0.3s -8s ease-in infinite;
}
@keyframes fall-172 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(173) {
  opacity: 0.36;
  left: 101.7vw;
  border-left-width: 1.2vmin;
  animation: fall-173 1.65s -11.5s ease-in infinite;
}
@keyframes fall-173 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(174) {
  opacity: 0.56;
  left: 71.1vw;
  border-left-width: 0.3vmin;
  animation: fall-174 2.25s -12.5s ease-in infinite;
}
@keyframes fall-174 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(175) {
  opacity: 0.68;
  left: 1.7vw;
  border-left-width: 6.9vmin;
  animation: fall-175 1.8s -2.5s ease-in infinite;
}
@keyframes fall-175 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(176) {
  opacity: 0.53;
  left: 11.5vw;
  border-left-width: 7.6vmin;
  animation: fall-176 2.1s -1.5s ease-in infinite;
}
@keyframes fall-176 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(177) {
  opacity: 0.24;
  left: 103.8vw;
  border-left-width: 4.1vmin;
  animation: fall-177 1.95s -9s ease-in infinite;
}
@keyframes fall-177 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(178) {
  opacity: 0.45;
  left: 102.7vw;
  border-left-width: 3.3vmin;
  animation: fall-178 1.05s -11s ease-in infinite;
}
@keyframes fall-178 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(179) {
  opacity: 0.73;
  left: 24.8vw;
  border-left-width: 4.5vmin;
  animation: fall-179 1.65s -1.5s ease-in infinite;
}
@keyframes fall-179 {
  5.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(180) {
  opacity: 0.3;
  left: 113.4vw;
  border-left-width: 1.6vmin;
  animation: fall-180 0.6s -12.5s ease-in infinite;
}
@keyframes fall-180 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(181) {
  opacity: 0.26;
  left: 2.9vw;
  border-left-width: 5.7vmin;
  animation: fall-181 1.05s -10s ease-in infinite;
}
@keyframes fall-181 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(182) {
  opacity: 0.19;
  left: 31.5vw;
  border-left-width: 1.1vmin;
  animation: fall-182 1.95s -7.5s ease-in infinite;
}
@keyframes fall-182 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(183) {
  opacity: 0.21;
  left: 22.4vw;
  border-left-width: 6.2vmin;
  animation: fall-183 1.5s -3s ease-in infinite;
}
@keyframes fall-183 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(184) {
  opacity: 0.49;
  left: 38.4vw;
  border-left-width: 1.4vmin;
  animation: fall-184 0.15s -8s ease-in infinite;
}
@keyframes fall-184 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(185) {
  opacity: 0.19;
  left: 56.6vw;
  border-left-width: 2.3vmin;
  animation: fall-185 2.1s -12.5s ease-in infinite;
}
@keyframes fall-185 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(186) {
  opacity: 0.82;
  left: 36.8vw;
  border-left-width: 3.2vmin;
  animation: fall-186 0.3s -9s ease-in infinite;
}
@keyframes fall-186 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(187) {
  opacity: 0.7;
  left: 26.8vw;
  border-left-width: 2.5vmin;
  animation: fall-187 0.45s -2.5s ease-in infinite;
}
@keyframes fall-187 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(188) {
  opacity: 0.81;
  left: 70.3vw;
  border-left-width: 0.4vmin;
  animation: fall-188 1.05s -2.5s ease-in infinite;
}
@keyframes fall-188 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(189) {
  opacity: 0.04;
  left: 63.1vw;
  border-left-width: 5.3vmin;
  animation: fall-189 0.9s -2s ease-in infinite;
}
@keyframes fall-189 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(190) {
  opacity: 0.31;
  left: 51.3vw;
  border-left-width: 1.5vmin;
  animation: fall-190 1.35s -10.5s ease-in infinite;
}
@keyframes fall-190 {
  9% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(191) {
  opacity: 0.69;
  left: 5.8vw;
  border-left-width: 1.9vmin;
  animation: fall-191 0.15s -11s ease-in infinite;
}
@keyframes fall-191 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(192) {
  opacity: 0.6;
  left: 91.6vw;
  border-left-width: 2.2vmin;
  animation: fall-192 1.8s -9s ease-in infinite;
}
@keyframes fall-192 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(193) {
  opacity: 0.38;
  left: 59.9vw;
  border-left-width: 2.8vmin;
  animation: fall-193 1.95s -5.5s ease-in infinite;
}
@keyframes fall-193 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(194) {
  opacity: 0.25;
  left: 5vw;
  border-left-width: 5.4vmin;
  animation: fall-194 0.9s -9s ease-in infinite;
}
@keyframes fall-194 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(195) {
  opacity: 0.56;
  left: 112.7vw;
  border-left-width: 1.5vmin;
  animation: fall-195 1.8s -1s ease-in infinite;
}
@keyframes fall-195 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(196) {
  opacity: 0.32;
  left: 73.1vw;
  border-left-width: 4.9vmin;
  animation: fall-196 1.8s -5.5s ease-in infinite;
}
@keyframes fall-196 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(197) {
  opacity: 0.2;
  left: 0.9vw;
  border-left-width: 6.1vmin;
  animation: fall-197 1.65s -11.5s ease-in infinite;
}
@keyframes fall-197 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(198) {
  opacity: 0.19;
  left: 46.9vw;
  border-left-width: 4.3vmin;
  animation: fall-198 0.6s -6.5s ease-in infinite;
}
@keyframes fall-198 {
  6.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(199) {
  opacity: 0.88;
  left: 57.1vw;
  border-left-width: 0.2vmin;
  animation: fall-199 0.3s -5s ease-in infinite;
}
@keyframes fall-199 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(200) {
  opacity: 0.78;
  left: 43.6vw;
  border-left-width: 2.3vmin;
  animation: fall-200 1.65s -6s ease-in infinite;
}
@keyframes fall-200 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(201) {
  opacity: 0.37;
  left: 34vw;
  border-left-width: 7.6vmin;
  animation: fall-201 1.35s -7s ease-in infinite;
}
@keyframes fall-201 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(202) {
  opacity: 0.28;
  left: 105.5vw;
  border-left-width: 3.8vmin;
  animation: fall-202 0.45s -1s ease-in infinite;
}
@keyframes fall-202 {
  10% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(203) {
  opacity: 0.5;
  left: 52.4vw;
  border-left-width: 2.7vmin;
  animation: fall-203 1.65s -6.5s ease-in infinite;
}
@keyframes fall-203 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(204) {
  opacity: 0.41;
  left: 47.7vw;
  border-left-width: 2.5vmin;
  animation: fall-204 0.9s -3.5s ease-in infinite;
}
@keyframes fall-204 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(205) {
  opacity: 0.6;
  left: 49.9vw;
  border-left-width: 2.6vmin;
  animation: fall-205 0.3s -7s ease-in infinite;
}
@keyframes fall-205 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(206) {
  opacity: 0.19;
  left: 44.2vw;
  border-left-width: 0.9vmin;
  animation: fall-206 0.6s -2s ease-in infinite;
}
@keyframes fall-206 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(207) {
  opacity: 0.68;
  left: 51.3vw;
  border-left-width: 5.6vmin;
  animation: fall-207 0.75s -11s ease-in infinite;
}
@keyframes fall-207 {
  4.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(208) {
  opacity: 0.76;
  left: 74.9vw;
  border-left-width: 3.8vmin;
  animation: fall-208 1.5s -2s ease-in infinite;
}
@keyframes fall-208 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(209) {
  opacity: 0.31;
  left: 38.3vw;
  border-left-width: 5.8vmin;
  animation: fall-209 1.35s -1.5s ease-in infinite;
}
@keyframes fall-209 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(210) {
  opacity: 0.31;
  left: 59.8vw;
  border-left-width: 5.5vmin;
  animation: fall-210 2.25s -8s ease-in infinite;
}
@keyframes fall-210 {
  9.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(211) {
  opacity: 0.43;
  left: 75.1vw;
  border-left-width: 1.9vmin;
  animation: fall-211 1.05s -3.5s ease-in infinite;
}
@keyframes fall-211 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(212) {
  opacity: 0.52;
  left: 80.8vw;
  border-left-width: 5.5vmin;
  animation: fall-212 1.35s -9s ease-in infinite;
}
@keyframes fall-212 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(213) {
  opacity: 0.62;
  left: 72vw;
  border-left-width: 2.8vmin;
  animation: fall-213 2.25s -2s ease-in infinite;
}
@keyframes fall-213 {
  9.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(214) {
  opacity: 0.22;
  left: 46.6vw;
  border-left-width: 2vmin;
  animation: fall-214 1.2s -11.5s ease-in infinite;
}
@keyframes fall-214 {
  8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(215) {
  opacity: 0.62;
  left: 96.3vw;
  border-left-width: 0.1vmin;
  animation: fall-215 0.45s -6.5s ease-in infinite;
}
@keyframes fall-215 {
  2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(216) {
  opacity: 0.04;
  left: 61.6vw;
  border-left-width: 1.6vmin;
  animation: fall-216 2.25s -0.5s ease-in infinite;
}
@keyframes fall-216 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(217) {
  opacity: 0.07;
  left: 93.3vw;
  border-left-width: 0.9vmin;
  animation: fall-217 0.6s -5.5s ease-in infinite;
}
@keyframes fall-217 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(218) {
  opacity: 0.63;
  left: 52.4vw;
  border-left-width: 7.7vmin;
  animation: fall-218 1.5s -1s ease-in infinite;
}
@keyframes fall-218 {
  4.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(219) {
  opacity: 0.49;
  left: 82.6vw;
  border-left-width: 6.1vmin;
  animation: fall-219 2.1s -9.5s ease-in infinite;
}
@keyframes fall-219 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(220) {
  opacity: 0.16;
  left: 113.5vw;
  border-left-width: 1.3vmin;
  animation: fall-220 1.8s -11.5s ease-in infinite;
}
@keyframes fall-220 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(221) {
  opacity: 0.21;
  left: 24.8vw;
  border-left-width: 0.1vmin;
  animation: fall-221 0.3s -3.5s ease-in infinite;
}
@keyframes fall-221 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(222) {
  opacity: 0.36;
  left: 114.8vw;
  border-left-width: 7.6vmin;
  animation: fall-222 0.3s -6.5s ease-in infinite;
}
@keyframes fall-222 {
  1% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(223) {
  opacity: 0.41;
  left: 25.4vw;
  border-left-width: 0.8vmin;
  animation: fall-223 0.9s -11s ease-in infinite;
}
@keyframes fall-223 {
  7% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(224) {
  opacity: 0.83;
  left: 36.2vw;
  border-left-width: 1.9vmin;
  animation: fall-224 2.25s -7s ease-in infinite;
}
@keyframes fall-224 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(225) {
  opacity: 0.5;
  left: 109.2vw;
  border-left-width: 1vmin;
  animation: fall-225 2.1s -12s ease-in infinite;
}
@keyframes fall-225 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(226) {
  opacity: 0.07;
  left: 57.2vw;
  border-left-width: 0.1vmin;
  animation: fall-226 2.1s -4.5s ease-in infinite;
}
@keyframes fall-226 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(227) {
  opacity: 0.02;
  left: 72.4vw;
  border-left-width: 4.6vmin;
  animation: fall-227 1.95s -2.5s ease-in infinite;
}
@keyframes fall-227 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(228) {
  opacity: 0.49;
  left: 56.2vw;
  border-left-width: 7.2vmin;
  animation: fall-228 1.2s -10s ease-in infinite;
}
@keyframes fall-228 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(229) {
  opacity: 0.02;
  left: 100.5vw;
  border-left-width: 7.1vmin;
  animation: fall-229 1.95s -7.5s ease-in infinite;
}
@keyframes fall-229 {
  7.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(230) {
  opacity: 0.83;
  left: 81.9vw;
  border-left-width: 2.1vmin;
  animation: fall-230 0.3s -12.5s ease-in infinite;
}
@keyframes fall-230 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(231) {
  opacity: 0.41;
  left: 24.7vw;
  border-left-width: 3.4vmin;
  animation: fall-231 0.6s -9s ease-in infinite;
}
@keyframes fall-231 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(232) {
  opacity: 0.78;
  left: 46vw;
  border-left-width: 1.7vmin;
  animation: fall-232 0.45s -12s ease-in infinite;
}
@keyframes fall-232 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(233) {
  opacity: 0.79;
  left: 40.9vw;
  border-left-width: 7.7vmin;
  animation: fall-233 1.95s -1s ease-in infinite;
}
@keyframes fall-233 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(234) {
  opacity: 0.48;
  left: 115.3vw;
  border-left-width: 1.7vmin;
  animation: fall-234 2.1s -10s ease-in infinite;
}
@keyframes fall-234 {
  4.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(235) {
  opacity: 0.3;
  left: 77.7vw;
  border-left-width: 1.9vmin;
  animation: fall-235 0.6s -3.5s ease-in infinite;
}
@keyframes fall-235 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(236) {
  opacity: 0.46;
  left: 37.2vw;
  border-left-width: 0.9vmin;
  animation: fall-236 1.5s -4.5s ease-in infinite;
}
@keyframes fall-236 {
  9.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(237) {
  opacity: 0.15;
  left: 14.1vw;
  border-left-width: 3.5vmin;
  animation: fall-237 0.15s -4s ease-in infinite;
}
@keyframes fall-237 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(238) {
  opacity: 0.76;
  left: 116.8vw;
  border-left-width: 1.2vmin;
  animation: fall-238 2.1s -8s ease-in infinite;
}
@keyframes fall-238 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(239) {
  opacity: 0.25;
  left: 33.9vw;
  border-left-width: 0.3vmin;
  animation: fall-239 0.3s -4.5s ease-in infinite;
}
@keyframes fall-239 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(240) {
  opacity: 0.18;
  left: 48vw;
  border-left-width: 5.5vmin;
  animation: fall-240 1.95s -7s ease-in infinite;
}
@keyframes fall-240 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(241) {
  opacity: 0.59;
  left: 18.7vw;
  border-left-width: 3.3vmin;
  animation: fall-241 0.75s -12s ease-in infinite;
}
@keyframes fall-241 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(242) {
  opacity: 0.03;
  left: 54.2vw;
  border-left-width: 7.6vmin;
  animation: fall-242 1.35s -6.5s ease-in infinite;
}
@keyframes fall-242 {
  0.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(243) {
  opacity: 0.61;
  left: 32vw;
  border-left-width: 7.8vmin;
  animation: fall-243 0.15s -12s ease-in infinite;
}
@keyframes fall-243 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(244) {
  opacity: 0.68;
  left: 22.7vw;
  border-left-width: 3.6vmin;
  animation: fall-244 0.6s -9s ease-in infinite;
}
@keyframes fall-244 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(245) {
  opacity: 0.53;
  left: 97.5vw;
  border-left-width: 1.1vmin;
  animation: fall-245 1.65s -4s ease-in infinite;
}
@keyframes fall-245 {
  4.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(246) {
  opacity: 0.39;
  left: 93.1vw;
  border-left-width: 6.4vmin;
  animation: fall-246 1.35s -10.5s ease-in infinite;
}
@keyframes fall-246 {
  8.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(247) {
  opacity: 0.57;
  left: 57.1vw;
  border-left-width: 2.1vmin;
  animation: fall-247 1.05s -9.5s ease-in infinite;
}
@keyframes fall-247 {
  7.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(248) {
  opacity: 0.15;
  left: 22.1vw;
  border-left-width: 7vmin;
  animation: fall-248 1.2s -1.5s ease-in infinite;
}
@keyframes fall-248 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(249) {
  opacity: 0.02;
  left: 19.8vw;
  border-left-width: 6vmin;
  animation: fall-249 0.45s -6.5s ease-in infinite;
}
@keyframes fall-249 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(250) {
  opacity: 0.78;
  left: 117.3vw;
  border-left-width: 5.4vmin;
  animation: fall-250 0.15s -12s ease-in infinite;
}
@keyframes fall-250 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(251) {
  opacity: 0.72;
  left: 79.5vw;
  border-left-width: 2.9vmin;
  animation: fall-251 1.8s -6.5s ease-in infinite;
}
@keyframes fall-251 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(252) {
  opacity: 0.26;
  left: 5.3vw;
  border-left-width: 3.5vmin;
  animation: fall-252 0.3s -6.5s ease-in infinite;
}
@keyframes fall-252 {
  2.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(253) {
  opacity: 0.13;
  left: 101.5vw;
  border-left-width: 6.4vmin;
  animation: fall-253 0.15s -3.5s ease-in infinite;
}
@keyframes fall-253 {
  2.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(254) {
  opacity: 0.44;
  left: 62.1vw;
  border-left-width: 1.5vmin;
  animation: fall-254 1.65s -5s ease-in infinite;
}
@keyframes fall-254 {
  1.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(255) {
  opacity: 0.81;
  left: 102.3vw;
  border-left-width: 5.6vmin;
  animation: fall-255 0.3s -6s ease-in infinite;
}
@keyframes fall-255 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(256) {
  opacity: 0.03;
  left: 99vw;
  border-left-width: 3.6vmin;
  animation: fall-256 0.6s -12.5s ease-in infinite;
}
@keyframes fall-256 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(257) {
  opacity: 0.43;
  left: 25.9vw;
  border-left-width: 3.9vmin;
  animation: fall-257 1.35s -2.5s ease-in infinite;
}
@keyframes fall-257 {
  1.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(258) {
  opacity: 0.7;
  left: 31vw;
  border-left-width: 2vmin;
  animation: fall-258 0.75s -9s ease-in infinite;
}
@keyframes fall-258 {
  0.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(259) {
  opacity: 0.44;
  left: 104.5vw;
  border-left-width: 4.1vmin;
  animation: fall-259 1.2s -11.5s ease-in infinite;
}
@keyframes fall-259 {
  0.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(260) {
  opacity: 0.9;
  left: 42.4vw;
  border-left-width: 1.9vmin;
  animation: fall-260 1.2s -4s ease-in infinite;
}
@keyframes fall-260 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(261) {
  opacity: 0.88;
  left: 8.3vw;
  border-left-width: 0.3vmin;
  animation: fall-261 1.8s -5s ease-in infinite;
}
@keyframes fall-261 {
  1.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(262) {
  opacity: 0.41;
  left: 95vw;
  border-left-width: 5.7vmin;
  animation: fall-262 1.5s -11s ease-in infinite;
}
@keyframes fall-262 {
  2.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(263) {
  opacity: 0.16;
  left: 112.5vw;
  border-left-width: 3.2vmin;
  animation: fall-263 1.65s -9.5s ease-in infinite;
}
@keyframes fall-263 {
  3.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(264) {
  opacity: 0.84;
  left: 77.3vw;
  border-left-width: 5.1vmin;
  animation: fall-264 2.1s -2.5s ease-in infinite;
}
@keyframes fall-264 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(265) {
  opacity: 0.85;
  left: 102.8vw;
  border-left-width: 3.1vmin;
  animation: fall-265 0.9s -10.5s ease-in infinite;
}
@keyframes fall-265 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(266) {
  opacity: 0.49;
  left: 47.7vw;
  border-left-width: 4.3vmin;
  animation: fall-266 0.3s -4.5s ease-in infinite;
}
@keyframes fall-266 {
  8.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(267) {
  opacity: 0.26;
  left: 48.2vw;
  border-left-width: 6vmin;
  animation: fall-267 1.5s -9s ease-in infinite;
}
@keyframes fall-267 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(268) {
  opacity: 0.21;
  left: 71.3vw;
  border-left-width: 2.1vmin;
  animation: fall-268 0.9s -0.5s ease-in infinite;
}
@keyframes fall-268 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(269) {
  opacity: 0.46;
  left: 93.7vw;
  border-left-width: 1.6vmin;
  animation: fall-269 1.65s -4s ease-in infinite;
}
@keyframes fall-269 {
  3.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(270) {
  opacity: 0.04;
  left: 40.6vw;
  border-left-width: 6.4vmin;
  animation: fall-270 1.2s -1.5s ease-in infinite;
}
@keyframes fall-270 {
  2.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(271) {
  opacity: 0.69;
  left: 98.4vw;
  border-left-width: 2.6vmin;
  animation: fall-271 1.2s -1.5s ease-in infinite;
}
@keyframes fall-271 {
  5.6% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(272) {
  opacity: 0.89;
  left: 70.9vw;
  border-left-width: 1.5vmin;
  animation: fall-272 0.75s -2.5s ease-in infinite;
}
@keyframes fall-272 {
  8.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(273) {
  opacity: 0.18;
  left: 119.2vw;
  border-left-width: 7.9vmin;
  animation: fall-273 0.45s -7s ease-in infinite;
}
@keyframes fall-273 {
  9.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(274) {
  opacity: 0.13;
  left: 30.2vw;
  border-left-width: 0.4vmin;
  animation: fall-274 0.15s -2s ease-in infinite;
}
@keyframes fall-274 {
  7.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(275) {
  opacity: 0.65;
  left: 88.8vw;
  border-left-width: 6.7vmin;
  animation: fall-275 0.6s -9.5s ease-in infinite;
}
@keyframes fall-275 {
  6.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(276) {
  opacity: 0.3;
  left: 93.2vw;
  border-left-width: 0.8vmin;
  animation: fall-276 1.35s -2.5s ease-in infinite;
}
@keyframes fall-276 {
  3% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(277) {
  opacity: 0.9;
  left: 73.5vw;
  border-left-width: 4.7vmin;
  animation: fall-277 1.2s -9.5s ease-in infinite;
}
@keyframes fall-277 {
  5.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(278) {
  opacity: 0.8;
  left: 22.9vw;
  border-left-width: 2.3vmin;
  animation: fall-278 2.25s -11s ease-in infinite;
}
@keyframes fall-278 {
  7.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(279) {
  opacity: 0.76;
  left: 74.1vw;
  border-left-width: 2.1vmin;
  animation: fall-279 0.9s -9.5s ease-in infinite;
}
@keyframes fall-279 {
  3.4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(280) {
  opacity: 0.35;
  left: 85vw;
  border-left-width: 2.9vmin;
  animation: fall-280 0.6s -6s ease-in infinite;
}
@keyframes fall-280 {
  6.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(281) {
  opacity: 0.02;
  left: 99.4vw;
  border-left-width: 3.5vmin;
  animation: fall-281 1.95s -9.5s ease-in infinite;
}
@keyframes fall-281 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(282) {
  opacity: 0.84;
  left: 103.1vw;
  border-left-width: 2.6vmin;
  animation: fall-282 0.6s -5.5s ease-in infinite;
}
@keyframes fall-282 {
  5.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(283) {
  opacity: 0.84;
  left: 41.9vw;
  border-left-width: 3.7vmin;
  animation: fall-283 2.1s -7.5s ease-in infinite;
}
@keyframes fall-283 {
  4% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(284) {
  opacity: 0.23;
  left: 60.7vw;
  border-left-width: 1.7vmin;
  animation: fall-284 0.6s -10.5s ease-in infinite;
}
@keyframes fall-284 {
  1.2% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(285) {
  opacity: 0.07;
  left: 0.3vw;
  border-left-width: 6.3vmin;
  animation: fall-285 0.75s -1s ease-in infinite;
}
@keyframes fall-285 {
  5% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    transform: rotate(var(--angle)) translateX(calc(100vh + 5vmin));
  }
}
.drop:nth-child(286) {
  opacity: 0.67;
  left: 61.8vw;
  border-left-width: 4.6vmin;
  animation: fall-286 2.1s -7.5s ease-in infinite;
}
@keyframes fall-286 {
  3.8% {
    transform: rotate(var(--angle)) translateX(0);
  }
  to {
    tran.........完整代码请登录后点击上方下载按钮下载查看

网友评论0