LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code






This demo works best on Webkit and IE 11 (due to CSS filter support)

By Lucas Bebber
CSS
body {
  background: #111;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 0;
}

a {
  color: inherit;
}

.container {
  width: 800px;
  height: 530px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: hidden;
  transform: rotateY(0);
}

.window {
  background: url("https://i.imgur.com/afNu00o.jpg");
  width: 800px;
  height: 530px;
  transform: rotateY(0);
  transition: -webkit-filter 600ms;
}

.raindrops {
  width: 800px;
  height: 530px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(0);
  transition: -webkit-filter 600ms;
}

.borders {
  position: absolute;
}

@keyframes raindrop-fall {
  0% {
    opacity: 0;
    transform: rotate(180deg) scale(2.5, 2.3) rotateY(0);
  }
  100% {
    opacity: 1;
    transform: rotate(180deg) scale(1, 1) rotateY(0);
  }
}
.raindrop {
  background: black;
  background-image: url("https://i.imgur.com/afNu00o.jpg");
  background-size: 1000%;
  position: absolute;
  border-radius: 100%;
  transform: rotate(180deg) rotateY(0);
  transition: background-size 1s;
  opacity: 0;
  animation: raindrop-fall 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
}

.raindrop:hover {
  background-size: 600%;
}

.border {
  position: absolute;
  box-shadow: 0 0 0px 2px black;
  border-radius: 100%;
  opacity: 0;
  animation: raindrop-fall 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  animation-fill-mode: forwards;
}

.raindrop:nth-child(1) {
  left: 325.65007px;
  top: 99.57636px;
  width: 11px;
  height: 12.43px;
  background-position: 40.70626% 18.78799%;
  animation-delay: 25.72365s;
}

.border:nth-child(1) {
  left: 327.65007px;
  top: 100.57636px;
  width: 6.4px;
  height: 12.43px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 25.72365s;
}

.raindrop:nth-child(2) {
  left: 221.5312px;
  top: 466.25115px;
  width: 7px;
  height: 7.98px;
  background-position: 27.6914% 87.97192%;
  animation-delay: 2.15124s;
}

.border:nth-child(2) {
  left: 223.5312px;
  top: 467.25115px;
  width: 4.8px;
  height: 7.98px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 2.15124s;
}

.raindrop:nth-child(3) {
  left: 119.69254px;
  top: 451.9492px;
  width: 8px;
  height: 8.64px;
  background-position: 14.96157% 85.27343%;
  animation-delay: 13.79316s;
}

.border:nth-child(3) {
  left: 121.69254px;
  top: 452.9492px;
  width: 5.2px;
  height: 8.64px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 13.79316s;
}

.raindrop:nth-child(4) {
  left: 388.11506px;
  top: 364.4828px;
  width: 9px;
  height: 9.72px;
  background-position: 48.51438% 68.77034%;
  animation-delay: 1.10695s;
}

.border:nth-child(4) {
  left: 390.11506px;
  top: 365.4828px;
  width: 5.6px;
  height: 9.72px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 1.10695s;
}

.raindrop:nth-child(5) {
  left: 527.46363px;
  top: 342.86472px;
  width: 11px;
  height: 11.44px;
  background-position: 65.93295% 64.69146%;
  animation-delay: 17.61747s;
}

.border:nth-child(5) {
  left: 529.46363px;
  top: 343.86472px;
  width: 6.4px;
  height: 11.44px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 17.61747s;
}

.raindrop:nth-child(6) {
  left: 60.25753px;
  top: 340.39892px;
  width: 10px;
  height: 11.8px;
  background-position: 7.53219% 64.22621%;
  animation-delay: 27.70481s;
}

.border:nth-child(6) {
  left: 62.25753px;
  top: 341.39892px;
  width: 6px;
  height: 11.8px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 27.70481s;
}

.raindrop:nth-child(7) {
  left: 487.06559px;
  top: 255.08068px;
  width: 9px;
  height: 9.54px;
  background-position: 60.8832% 48.12843%;
  animation-delay: 2.22852s;
}

.border:nth-child(7) {
  left: 489.06559px;
  top: 256.08068px;
  width: 5.6px;
  height: 9.54px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 2.22852s;
}

.raindrop:nth-child(8) {
  left: 57.59325px;
  top: 330.67525px;
  width: 12px;
  height: 13.56px;
  background-position: 7.19916% 62.39156%;
  animation-delay: 23.94082s;
}

.border:nth-child(8) {
  left: 59.59325px;
  top: 331.67525px;
  width: 6.8px;
  height: 13.56px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 23.94082s;
}

.raindrop:nth-child(9) {
  left: 120.83389px;
  top: 154.6744px;
  width: 10px;
  height: 12px;
  background-position: 15.10424% 29.18385%;
  animation-delay: 14.10959s;
}

.border:nth-child(9) {
  left: 122.83389px;
  top: 155.6744px;
  width: 6px;
  height: 12px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 14.10959s;
}

.raindrop:nth-child(10) {
  left: 241.72802px;
  top: 24.895px;
  width: 9px;
  height: 10.35px;
  background-position: 30.216% 4.69717%;
  animation-delay: 7.88193s;
}

.border:nth-child(10) {
  left: 243.72802px;
  top: 25.895px;
  width: 5.6px;
  height: 10.35px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 7.88193s;
}

.raindrop:nth-child(11) {
  left: 617.71094px;
  top: 41.80483px;
  width: 8px;
  height: 9.44px;
  background-position: 77.21387% 7.8877%;
  animation-delay: 27.94913s;
}

.border:nth-child(11) {
  left: 619.71094px;
  top: 42.80483px;
  width: 5.2px;
  height: 9.44px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 27.94913s;
}

.raindrop:nth-child(12) {
  left: 741.88747px;
  top: 475.65503px;
  width: 8px;
  height: 9.44px;
  background-position: 92.73593% 89.74623%;
  animation-delay: 2.437s;
}

.border:nth-child(12) {
  left: 743.88747px;
  top: 476.65503px;
  width: 5.2px;
  height: 9.44px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 2.437s;
}

.raindrop:nth-child(13) {
  left: 474.27241px;
  top: 528.53087px;
  width: 11px;
  height: 12.87px;
  background-position: 59.28405% 99.72281%;
  animation-delay: 7.92656s;
}

.border:nth-child(13) {
  left: 476.27241px;
  top: 529.53087px;
  width: 6.4px;
  height: 12.87px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 7.92656s;
}

.raindrop:nth-child(14) {
  left: 341.43652px;
  top: 494.51393px;
  width: 12px;
  height: 12.6px;
  background-position: 42.67957% 93.30452%;
  animation-delay: 10.78942s;
}

.border:nth-child(14) {
  left: 343.43652px;
  top: 495.51393px;
  width: 6.8px;
  height: 12.6px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 10.78942s;
}

.raindrop:nth-child(15) {
  left: 57.7413px;
  top: 4.30421px;
  width: 9px;
  height: 9.18px;
  background-position: 7.21766% 0.81211%;
  animation-delay: 3.04142s;
}

.border:nth-child(15) {
  left: 59.7413px;
  top: 5.30421px;
  width: 5.6px;
  height: 9.18px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 3.04142s;
}

.raindrop:nth-child(16) {
  left: 392.81371px;
  top: 265.57563px;
  width: 11px;
  height: 12.43px;
  background-position: 49.10171% 50.10861%;
  animation-delay: 0.50531s;
}

.border:nth-child(16) {
  left: 394.81371px;
  top: 266.57563px;
  width: 6.4px;
  height: 12.43px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 0.50531s;
}

.raindrop:nth-child(17) {
  left: 135.34957px;
  top: 511.82831px;
  width: 5px;
  height: 5.4px;
  background-position: 16.9187% 96.57138%;
  animation-delay: 13.58698s;
}

.border:nth-child(17) {
  left: 137.34957px;
  top: 512.82831px;
  width: 4px;
  height: 5.4px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 13.58698s;
}

.raindrop:nth-child(18) {
  left: 511.60309px;
  top: 5.00617px;
  width: 12px;
  height: 13.68px;
  background-position: 63.95039% 0.94456%;
  animation-delay: 6.87153s;
}

.border:nth-child(18) {
  left: 513.60309px;
  top: 6.00617px;
  width: 6.8px;
  height: 13.68px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 6.87153s;
}

.raindrop:nth-child(19) {
  left: 784.59116px;
  top: 395.72028px;
  width: 10px;
  height: 10.4px;
  background-position: 98.0739% 74.6642%;
  animation-delay: 5.57006s;
}

.border:nth-child(19) {
  left: 786.59116px;
  top: 396.72028px;
  width: 6px;
  height: 10.4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 5.57006s;
}

.raindrop:nth-child(20) {
  left: 436.76871px;
  top: 335.44533px;
  width: 9px;
  height: 10.26px;
  background-position: 54.59609% 63.29157%;
  animation-delay: 20.26358s;
}

.border:nth-child(20) {
  left: 438.76871px;
  top: 336.44533px;
  width: 5.6px;
  height: 10.26px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 20.26358s;
}

.raindrop:nth-child(21) {
  left: 146.84349px;
  top: 198.78415px;
  width: 12px;
  height: 13.32px;
  background-position: 18.35544% 37.50644%;
  animation-delay: 12.44127s;
}

.border:nth-child(21) {
  left: 148.84349px;
  top: 199.78415px;
  width: 6.8px;
  height: 13.32px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 12.44127s;
}

.raindrop:nth-child(22) {
  left: 728.16825px;
  top: 139.7388px;
  width: 12px;
  height: 13.68px;
  background-position: 91.02103% 26.36581%;
  animation-delay: 27.01718s;
}

.border:nth-child(22) {
  left: 730.16825px;
  top: 140.7388px;
  width: 6.8px;
  height: 13.68px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 27.01718s;
}

.raindrop:nth-child(23) {
  left: 11.96749px;
  top: 319.63286px;
  width: 6px;
  height: 6.48px;
  background-position: 1.49594% 60.30809%;
  animation-delay: 24.09262s;
}

.border:nth-child(23) {
  left: 13.96749px;
  top: 320.63286px;
  width: 4.4px;
  height: 6.48px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 24.09262s;
}

.raindrop:nth-child(24) {
  left: 384.35772px;
  top: 518.96766px;
  width: 9px;
  height: 10.8px;
  background-position: 48.04471% 97.91843%;
  animation-delay: 19.77444s;
}

.border:nth-child(24) {
  left: 386.35772px;
  top: 519.96766px;
  width: 5.6px;
  height: 10.8px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 19.77444s;
}

.raindrop:nth-child(25) {
  left: 335.17129px;
  top: 416.95563px;
  width: 11px;
  height: 11.88px;
  background-position: 41.89641% 78.67087%;
  animation-delay: 7.22802s;
}

.border:nth-child(25) {
  left: 337.17129px;
  top: 417.95563px;
  width: 6.4px;
  height: 11.88px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 7.22802s;
}

.raindrop:nth-child(26) {
  left: 147.90432px;
  top: 414.78881px;
  width: 8px;
  height: 9.28px;
  background-position: 18.48804% 78.26204%;
  animation-delay: 21.26435s;
}

.border:nth-child(26) {
  left: 149.90432px;
  top: 415.78881px;
  width: 5.2px;
  height: 9.28px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 21.26435s;
}

.raindrop:nth-child(27) {
  left: 309.64641px;
  top: 222.16037px;
  width: 9px;
  height: 9.18px;
  background-position: 38.7058% 41.91705%;
  animation-delay: 7.31119s;
}

.border:nth-child(27) {
  left: 311.64641px;
  top: 223.16037px;
  width: 5.6px;
  height: 9.18px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 7.31119s;
}

.raindrop:nth-child(28) {
  left: 560.37427px;
  top: 319.89222px;
  width: 8px;
  height: 9.2px;
  background-position: 70.04678% 60.35702%;
  animation-delay: 11.47838s;
}

.border:nth-child(28) {
  left: 562.37427px;
  top: 320.89222px;
  width: 5.2px;
  height: 9.2px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 11.47838s;
}

.raindrop:nth-child(29) {
  left: 662.99829px;
  top: 479.6378px;
  width: 7px;
  height: 7.07px;
  background-position: 82.87479% 90.4977%;
  animation-delay: 8.94985s;
}

.border:nth-child(29) {
  left: 664.99829px;
  top: 480.6378px;
  width: 4.8px;
  height: 7.07px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 8.94985s;
}

.raindrop:nth-child(30) {
  left: 383.29322px;
  top: 191.15912px;
  width: 11px;
  height: 11.66px;
  background-position: 47.91165% 36.06776%;
  animation-delay: 9.1172s;
}

.border:nth-child(30) {
  left: 385.29322px;
  top: 192.15912px;
  width: 6.4px;
  height: 11.66px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 9.1172s;
}

.raindrop:nth-child(31) {
  left: 716.93748px;
  top: 458.6126px;
  width: 9px;
  height: 9.54px;
  background-position: 89.61719% 86.53068%;
  animation-delay: 3.41291s;
}

.border:nth-child(31) {
  left: 718.93748px;
  top: 459.6126px;
  width: 5.6px;
  height: 9.54px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 3.41291s;
}

.raindrop:nth-child(32) {
  left: 97.12758px;
  top: 236.41916px;
  width: 7px;
  height: 7.21px;
  background-position: 12.14095% 44.60739%;
  animation-delay: 2.93578s;
}

.border:nth-child(32) {
  left: 99.12758px;
  top: 237.41916px;
  width: 4.8px;
  height: 7.21px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 2.93578s;
}

.raindrop:nth-child(33) {
  left: 674.88662px;
  top: 265.32211px;
  width: 7px;
  height: 8.33px;
  background-position: 84.36083% 50.06078%;
  animation-delay: 12.2024s;
}

.border:nth-child(33) {
  left: 676.88662px;
  top: 266.32211px;
  width: 4.8px;
  height: 8.33px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 12.2024s;
}

.raindrop:nth-child(34) {
  left: 713.8553px;
  top: 304.6909px;
  width: 11px;
  height: 11.99px;
  background-position: 89.23191% 57.48885%;
  animation-delay: 29.54777s;
}

.border:nth-child(34) {
  left: 715.8553px;
  top: 305.6909px;
  width: 6.4px;
  height: 11.99px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 29.54777s;
}

.raindrop:nth-child(35) {
  left: 286.95144px;
  top: 121.7566px;
  width: 6px;
  height: 6.78px;
  background-position: 35.86893% 22.97294%;
  animation-delay: 3.18368s;
}

.border:nth-child(35) {
  left: 288.95144px;
  top: 122.7566px;
  width: 4.4px;
  height: 6.78px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 3.18368s;
}

.raindrop:nth-child(36) {
  left: 675.16733px;
  top: 197.42907px;
  width: 5px;
  height: 5.7px;
  background-position: 84.39592% 37.25077%;
  animation-delay: 24.72504s;
}

.border:nth-child(36) {
  left: 677.16733px;
  top: 198.42907px;
  width: 4px;
  height: 5.7px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 24.72504s;
}

.raindrop:nth-child(37) {
  left: 504.37478px;
  top: 487.16549px;
  width: 7px;
  height: 7.63px;
  background-position: 63.04685% 91.91802%;
  animation-delay: 21.49514s;
}

.border:nth-child(37) {
  left: 506.37478px;
  top: 488.16549px;
  width: 4.8px;
  height: 7.63px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 21.49514s;
}

.raindrop:nth-child(38) {
  left: 566.55394px;
  top: 384.95383px;
  width: 5px;
  height: 5.7px;
  background-position: 70.81924% 72.6328%;
  animation-delay: 26.16214s;
}

.border:nth-child(38) {
  left: 568.55394px;
  top: 385.95383px;
  width: 4px;
  height: 5.7px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 26.16214s;
}

.raindrop:nth-child(39) {
  left: 642.94941px;
  top: 323.15362px;
  width: 8px;
  height: 8.4px;
  background-position: 80.36868% 60.97238%;
  animation-delay: 21.34376s;
}

.border:nth-child(39) {
  left: 644.94941px;
  top: 324.15362px;
  width: 5.2px;
  height: 8.4px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 21.34376s;
}

.raindrop:nth-child(40) {
  left: 374.30164px;
  top: 81.42182px;
  width: 12px;
  height: 12.6px;
  background-position: 46.7877% 15.36261%;
  animation-delay: 15.46379s;
}

.border:nth-child(40) {
  left: 376.30164px;
  top: 82.42182px;
  width: 6.8px;
  height: 12.6px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 15.46379s;
}

.raindrop:nth-child(41) {
  left: 459.55225px;
  top: 407.26857px;
  width: 12px;
  height: 12.6px;
  background-position: 57.44403% 76.84313%;
  animation-delay: 22.45741s;
}

.border:nth-child(41) {
  left: 461.55225px;
  top: 408.26857px;
  width: 6.8px;
  height: 12.6px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 22.45741s;
}

.raindrop:nth-child(42) {
  left: 33.24829px;
  top: 460.02995px;
  width: 10px;
  height: 11.2px;
  background-position: 4.15604% 86.7981%;
  animation-delay: 11.31584s;
}

.border:nth-child(42) {
  left: 35.24829px;
  top: 461.02995px;
  width: 6px;
  height: 11.2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 11.31584s;
}

.raindrop:nth-child(43) {
  left: 10.12047px;
  top: 287.06841px;
  width: 11px;
  height: 11.33px;
  background-position: 1.26506% 54.16385%;
  animation-delay: 26.05492s;
}

.border:nth-child(43) {
  left: 12.12047px;
  top: 288.06841px;
  width: 6.4px;
  height: 11.33px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 26.05492s;
}

.raindrop:nth-child(44) {
  left: 548.89517px;
  top: 315.91929px;
  width: 8px;
  height: 9.36px;
  background-position: 68.6119% 59.60741%;
  animation-delay: 26.73172s;
}

.border:nth-child(44) {
  left: 550.89517px;
  top: 316.91929px;
  width: 5.2px;
  height: 9.36px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 26.73172s;
}

.raindrop:nth-child(45) {
  left: 418.89239px;
  top: 461.23424px;
  width: 6px;
  height: 6.42px;
  background-position: 52.36155% 87.02533%;
  animation-delay: 23.12791s;
}

.border:nth-child(45) {
  left: 420.89239px;
  top: 462.23424px;
  width: 4.4px;
  height: 6.42px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 23.12791s;
}

.raindrop:nth-child(46) {
  left: 445.94382px;
  top: 150.69852px;
  width: 8px;
  height: 9.2px;
  background-position: 55.74298% 28.43368%;
  animation-delay: 10.03139s;
}

.border:nth-child(46) {
  left: 447.94382px;
  top: 151.69852px;
  width: 5.2px;
  height: 9.2px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 10.03139s;
}

.raindrop:nth-child(47) {
  left: 437.84925px;
  top: 110.80629px;
  width: 11px;
  height: 11.22px;
  background-position: 54.73116% 20.90685%;
  animation-delay: 28.77561s;
}

.border:nth-child(47) {
  left: 439.84925px;
  top: 111.80629px;
  width: 6.4px;
  height: 11.22px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 28.77561s;
}

.raindrop:nth-child(48) {
  left: 527.33491px;
  top: 459.09148px;
  width: 8px;
  height: 8.08px;
  background-position: 65.91686% 86.62103%;
  animation-delay: 24.88836s;
}

.border:nth-child(48) {
  left: 529.33491px;
  top: 460.09148px;
  width: 5.2px;
  height: 8.08px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 24.88836s;
}

.raindrop:nth-child(49) {
  left: 326.40704px;
  top: 237.07417px;
  width: 11px;
  height: 12.98px;
  background-position: 40.80088% 44.73098%;
  animation-delay: 7.94128s;
}

.border:nth-child(49) {
  left: 328.40704px;
  top: 238.07417px;
  width: 6.4px;
  height: 12.98px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 7.94128s;
}

.raindrop:nth-child(50) {
  left: 578.94274px;
  top: 8.92436px;
  width: 10px;
  height: 11.3px;
  background-position: 72.36784% 1.68384%;
  animation-delay: 5.66848s;
}

.border:nth-child(50) {
  left: 580.94274px;
  top: 9.92436px;
  width: 6px;
  height: 11.3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 5.66848s;
}

.raindrop:nth-child(51) {
  left: 4.13074px;
  top: 9.59759px;
  width: 11px;
  height: 12.1px;
  background-position: 0.51634% 1.81087%;
  animation-delay: 26.5189s;
}

.border:nth-child(51) {
  left: 6.13074px;
  top: 10.59759px;
  width: 6.4px;
  height: 12.1px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 26.5189s;
}

.raindrop:nth-child(52) {
  left: 551.29176px;
  top: 226.67199px;
  width: 8px;
  height: 8.56px;
  background-position: 68.91147% 42.7683%;
  animation-delay: 14.58643s;
}

.border:nth-child(52) {
  left: 553.29176px;
  top: 227.67199px;
  width: 5.2px;
  height: 8.56px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 14.58643s;
}

.raindrop:nth-child(53) {
  left: 206.74282px;
  top: 174.56505px;
  width: 9px;
  height: 9.18px;
  background-position: 25.84285% 32.9368%;
  animation-delay: 17.73364s;
}

.border:nth-child(53) {
  left: 208.74282px;
  top: 175.56505px;
  width: 5.6px;
  height: 9.18px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 17.73364s;
}

.raindrop:nth-child(54) {
  left: 49.65125px;
  top: 189.52369px;
  width: 10px;
  height: 10.4px;
  background-position: 6.20641% 35.75919%;
  animation-delay: 11.25593s;
}

.border:nth-child(54) {
  left: 51.65125px;
  top: 190.52369px;
  width: 6px;
  height: 10.4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 11.25593s;
}

.raindrop:nth-child(55) {
  left: 144.442px;
  top: 357.73328px;
  width: 5px;
  height: 5.5px;
  background-position: 18.05525% 67.49685%;
  animation-delay: 8.6293s;
}

.border:nth-child(55) {
  left: 146.442px;
  top: 358.73328px;
  width: 4px;
  height: 5.5px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 8.6293s;
}

.raindrop:nth-child(56) {
  left: 115.46817px;
  top: 17.50041px;
  width: 12px;
  height: 13.32px;
  background-position: 14.43352% 3.30196%;
  animation-delay: 3.63219s;
}

.border:nth-child(56) {
  left: 117.46817px;
  top: 18.50041px;
  width: 6.8px;
  height: 13.32px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 3.63219s;
}

.raindrop:nth-child(57) {
  left: 698.36976px;
  top: 517.08615px;
  width: 10px;
  height: 10.7px;
  background-position: 87.29622% 97.56342%;
  animation-delay: 17.11744s;
}

.border:nth-child(57) {
  left: 700.36976px;
  top: 518.08615px;
  width: 6px;
  height: 10.7px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 17.11744s;
}

.raindrop:nth-child(58) {
  left: 203.20217px;
  top: 173.41342px;
  width: 9px;
  height: 10.26px;
  background-position: 25.40027% 32.71951%;
  animation-delay: 14.91134s;
}

.border:nth-child(58) {
  left: 205.20217px;
  top: 174.41342px;
  width: 5.6px;
  height: 10.26px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 14.91134s;
}

.raindrop:nth-child(59) {
  left: 714.81252px;
  top: 367.65966px;
  width: 9px;
  height: 9.18px;
  background-position: 89.35157% 69.36975%;
  animation-delay: 5.07891s;
}

.border:nth-child(59) {
  left: 716.81252px;
  top: 368.65966px;
  width: 5.6px;
  height: 9.18px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 5.07891s;
}

.raindrop:nth-child(60) {
  left: 28.26086px;
  top: 437.57357px;
  width: 6px;
  height: 6.18px;
  background-position: 3.53261% 82.56105%;
  animation-delay: 3.55296s;
}

.border:nth-child(60) {
  left: 30.26086px;
  top: 438.57357px;
  width: 4.4px;
  height: 6.18px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 3.55296s;
}

.raindrop:nth-child(61) {
  left: 444.7012px;
  top: 222.40354px;
  width: 10px;
  height: 11.7px;
  background-position: 55.58765% 41.96293%;
  animation-delay: 21.01471s;
}

.border:nth-child(61) {
  left: 446.7012px;
  top: 223.40354px;
  width: 6px;
  height: 11.7px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 21.01471s;
}

.raindrop:nth-child(62) {
  left: 353.82567px;
  top: 410.41606px;
  width: 5px;
  height: 5.1px;
  background-position: 44.22821% 77.43699%;
  animation-delay: 13.64009s;
}

.border:nth-child(62) {
  left: 355.82567px;
  top: 411.41606px;
  width: 4px;
  height: 5.1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 13.64009s;
}

.raindrop:nth-child(63) {
  left: 505.9364px;
  top: 132.13635px;
  width: 6px;
  height: 6.54px;
  background-position: 63.24205% 24.93139%;
  animation-delay: 28.12532s;
}

.border:nth-child(63) {
  left: 507.9364px;
  top: 133.13635px;
  width: 4.4px;
  height: 6.54px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 28.12532s;
}

.raindrop:nth-child(64) {
  left: 148.23417px;
  top: 142.47138px;
  width: 6px;
  height: 6.36px;
  background-position: 18.52927% 26.88139%;
  animation-delay: 26.66673s;
}

.border:nth-child(64) {
  left: 150.23417px;
  top: 143.47138px;
  width: 4.4px;
  height: 6.36px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 26.66673s;
}

.raindrop:nth-child(65) {
  left: 353.026px;
  top: 250.78585px;
  width: 12px;
  height: 12.84px;
  background-position: 44.12825% 47.31809%;
  animation-delay: 21.30709s;
}

.border:nth-child(65) {
  left: 355.026px;
  top: 251.78585px;
  width: 6.8px;
  height: 12.84px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 21.30709s;
}

.raindrop:nth-child(66) {
  left: 109.83582px;
  top: 142.06616px;
  width: 10px;
  height: 10.2px;
  background-position: 13.72948% 26.80494%;
  animation-delay: 24.56698s;
}

.border:nth-child(66) {
  left: 111.83582px;
  top: 143.06616px;
  width: 6px;
  height: 10.2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 24.56698s;
}

.raindrop:nth-child(67) {
  left: 462.53726px;
  top: 488.85927px;
  width: 7px;
  height: 7.77px;
  background-position: 57.81716% 92.2376%;
  animation-delay: 15.75134s;
}

.border:nth-child(67) {
  left: 464.53726px;
  top: 489.85927px;
  width: 4.8px;
  height: 7.77px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 15.75134s;
}

.raindrop:nth-child(68) {
  left: 604.50159px;
  top: 115.68515px;
  width: 8px;
  height: 9.04px;
  background-position: 75.5627% 21.82739%;
  animation-delay: 28.49666s;
}

.border:nth-child(68) {
  left: 606.50159px;
  top: 116.68515px;
  width: 5.2px;
  height: 9.04px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 28.49666s;
}

.raindrop:nth-child(69) {
  left: 791.85932px;
  top: 326.49237px;
  width: 10px;
  height: 11.5px;
  background-position: 98.98242% 61.60233%;
  animation-delay: 24.02465s;
}

.border:nth-child(69) {
  left: 793.85932px;
  top: 327.49237px;
  width: 6px;
  height: 11.5px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 24.02465s;
}

.raindrop:nth-child(70) {
  left: 149.80505px;
  top: 71.53337px;
  width: 7px;
  height: 7.14px;
  background-position: 18.72563% 13.49686%;
  animation-delay: 9.57651s;
}

.border:nth-child(70) {
  left: 151.80505px;
  top: 72.53337px;
  width: 4.8px;
  height: 7.14px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 9.57651s;
}

.raindrop:nth-child(71) {
  left: 500.94091px;
  top: 254.36357px;
  width: 7px;
  height: 7.28px;
  background-position: 62.61761% 47.99313%;
  animation-delay: 4.18256s;
}

.border:nth-child(71) {
  left: 502.94091px;
  top: 255.36357px;
  width: 4.8px;
  height: 7.28px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 4.18256s;
}

.raindrop:nth-child(72) {
  left: 252.62968px;
  top: 227.17579px;
  width: 11px;
  height: 11.66px;
  background-position: 31.57871% 42.86336%;
  animation-delay: 10.02922s;
}

.border:nth-child(72) {
  left: 254.62968px;
  top: 228.17579px;
  width: 6.4px;
  height: 11.66px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 10.02922s;
}

.raindrop:nth-child(73) {
  left: 572.71612px;
  top: 206.70266px;
  width: 5px;
  height: 5.2px;
  background-position: 71.58952% 39.0005%;
  animation-delay: 11.37279s;
}

.border:nth-child(73) {
  left: 574.71612px;
  top: 207.70266px;
  width: 4px;
  height: 5.2px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 11.37279s;
}

.raindrop:nth-child(74) {
  left: 232.7547px;
  top: 520.21408px;
  width: 9px;
  height: 10.26px;
  background-position: 29.09434% 98.1536%;
  animation-delay: 11.97001s;
}

.border:nth-child(74) {
  left: 234.7547px;
  top: 521.21408px;
  width: 5.6px;
  height: 10.26px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 11.97001s;
}

.raindrop:nth-child(75) {
  left: 525.47878px;
  top: 420.90537px;
  width: 5px;
  height: 5.1px;
  background-position: 65.68485% 79.41611%;
  animation-delay: 6.75855s;
}

.border:nth-child(75) {
  left: 527.47878px;
  top: 421.90537px;
  width: 4px;
  height: 5.1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 6.75855s;
}

.raindrop:nth-child(76) {
  left: 469.42713px;
  top: 437.58663px;
  width: 5px;
  height: 5.55px;
  background-position: 58.67839% 82.56352%;
  animation-delay: 1.1857s;
}

.border:nth-child(76) {
  left: 471.42713px;
  top: 438.58663px;
  width: 4px;
  height: 5.55px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 1.1857s;
}

.raindrop:nth-child(77) {
  left: 798.2804px;
  top: 170.15196px;
  width: 5px;
  height: 5.9px;
  background-position: 99.78505% 32.10414%;
  animation-delay: 22.4078s;
}

.border:nth-child(77) {
  left: 800.2804px;
  top: 171.15196px;
  width: 4px;
  height: 5.9px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 22.4078s;
}

.raindrop:nth-child(78) {
  left: 184.70316px;
  top: 315.28696px;
  width: 5px;
  height: 5.65px;
  background-position: 23.08789% 59.48811%;
  animation-delay: 17.96288s;
}

.border:nth-child(78) {
  left: 186.70316px;
  top: 316.28696px;
  width: 4px;
  height: 5.65px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 17.96288s;
}

.raindrop:nth-child(79) {
  left: 228.12227px;
  top: 346.21394px;
  width: 5px;
  height: 5.65px;
  background-position: 28.51528% 65.32338%;
  animation-delay: 20.89849s;
}

.border:nth-child(79) {
  left: 230.12227px;
  top: 347.21394px;
  width: 4px;
  height: 5.65px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 20.89849s;
}

.raindrop:nth-child(80) {
  left: 414.27824px;
  top: 284.12466px;
  width: 8px;
  height: 8.72px;
  background-position: 51.78478% 53.60843%;
  animation-delay: 2.09237s;
}

.border:nth-child(80) {
  left: 416.27824px;
  top: 285.12466px;
  width: 5.2px;
  height: 8.72px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 2.09237s;
}

.raindrop:nth-child(81) {
  left: 309.50042px;
  top: 35.35323px;
  width: 9px;
  height: 9.36px;
  background-position: 38.68755% 6.67042%;
  animation-delay: 20.0376s;
}

.border:nth-child(81) {
  left: 311.50042px;
  top: 36.35323px;
  width: 5.6px;
  height: 9.36px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 20.0376s;
}

.raindrop:nth-child(82) {
  left: 386.74323px;
  top: 481.33154px;
  width: 6px;
  height: 6.18px;
  background-position: 48.3429% 90.81727%;
  animation-delay: 7.07718s;
}

.border:nth-child(82) {
  left: 388.74323px;
  top: 482.33154px;
  width: 4.4px;
  height: 6.18px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 7.07718s;
}

.raindrop:nth-child(83) {
  left: 421.11896px;
  top: 492.96414px;
  width: 6px;
  height: 6.78px;
  background-position: 52.63987% 93.0121%;
  animation-delay: 14.72639s;
}

.border:nth-child(83) {
  left: 423.11896px;
  top: 493.96414px;
  width: 4.4px;
  height: 6.78px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 14.72639s;
}

.raindrop:nth-child(84) {
  left: 161.88794px;
  top: 145.93686px;
  width: 11px;
  height: 11.11px;
  background-position: 20.23599% 27.53526%;
  animation-delay: 12.26747s;
}

.border:nth-child(84) {
  left: 163.88794px;
  top: 146.93686px;
  width: 6.4px;
  height: 11.11px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 12.26747s;
}

.raindrop:nth-child(85) {
  left: 283.87312px;
  top: 395.67711px;
  width: 9px;
  height: 9.09px;
  background-position: 35.48414% 74.65606%;
  animation-delay: 19.98479s;
}

.border:nth-child(85) {
  left: 285.87312px;
  top: 396.67711px;
  width: 5.6px;
  height: 9.09px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 19.98479s;
}

.raindrop:nth-child(86) {
  left: 655.95469px;
  top: 133.25475px;
  width: 10px;
  height: 11.5px;
  background-position: 81.99434% 25.1424%;
  animation-delay: 22.41809s;
}

.border:nth-child(86) {
  left: 657.95469px;
  top: 134.25475px;
  width: 6px;
  height: 11.5px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 22.41809s;
}

.raindrop:nth-child(87) {
  left: 599.89638px;
  top: 478.83932px;
  width: 6px;
  height: 6.96px;
  background-position: 74.98705% 90.34704%;
  animation-delay: 25.77449s;
}

.border:nth-child(87) {
  left: 601.89638px;
  top: 479.83932px;
  width: 4.4px;
  height: 6.96px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 25.77449s;
}

.raindrop:nth-child(88) {
  left: 42.4845px;
  top: 299.25663px;
  width: 6px;
  height: 7.02px;
  background-position: 5.31056% 56.46352%;
  animation-delay: 2.44073s;
}

.border:nth-child(88) {
  left: 44.4845px;
  top: 300.25663px;
  width: 4.4px;
  height: 7.02px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 2.44073s;
}

.raindrop:nth-child(89) {
  left: 234.3134px;
  top: 307.54638px;
  width: 6px;
  height: 6.06px;
  background-position: 29.28918% 58.02762%;
  animation-delay: 3.52425s;
}

.border:nth-child(89) {
  left: 236.3134px;
  top: 308.54638px;
  width: 4.4px;
  height: 6.06px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 3.52425s;
}

.raindrop:nth-child(90) {
  left: 6.74162px;
  top: 430.4211px;
  width: 8px;
  height: 8.16px;
  background-position: 0.8427% 81.21153%;
  animation-delay: 28.73084s;
}

.border:nth-child(90) {
  left: 8.74162px;
  top: 431.4211px;
  width: 5.2px;
  height: 8.16px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 28.73084s;
}

.raindrop:nth-child(91) {
  left: 767.06739px;
  top: 111.96311px;
  width: 7px;
  height: 7.63px;
  background-position: 95.88342% 21.12511%;
  animation-delay: 0.22718s;
}

.border:nth-child(91) {
  left: 769.06739px;
  top: 112.96311px;
  width: 4.8px;
  height: 7.63px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 0.22718s;
}

.raindrop:nth-child(92) {
  left: 249.21962px;
  top: 194.63813px;
  width: 12px;
  height: 13.68px;
  background-position: 31.15245% 36.72418%;
  animation-delay: 11.21899s;
}

.border:nth-child(92) {
  left: 251.21962px;
  top: 195.63813px;
  width: 6.8px;
  height: 13.68px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 11.21899s;
}

.raindrop:nth-child(93) {
  left: 54.21478px;
  top: 41.05595px;
  width: 11px;
  height: 12.76px;
  background-position: 6.77685% 7.7464%;
  animation-delay: 28.13478s;
}

.border:nth-child(93) {
  left: 56.21478px;
  top: 42.05595px;
  width: 6.4px;
  height: 12.76px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 28.13478s;
}

.raindrop:nth-child(94) {
  left: 30.3315px;
  top: 305.79543px;
  width: 12px;
  height: 13.8px;
  background-position: 3.79144% 57.69725%;
  animation-delay: 0.57596s;
}

.border:nth-child(94) {
  left: 32.3315px;
  top: 306.79543px;
  width: 6.8px;
  height: 13.8px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 0.57596s;
}

.raindrop:nth-child(95) {
  left: 71.09458px;
  top: 365.90799px;
  width: 6px;
  height: 6.6px;
  background-position: 8.88682% 69.03924%;
  animation-delay: 11.12241s;
}

.border:nth-child(95) {
  left: 73.09458px;
  top: 366.90799px;
  width: 4.4px;
  height: 6.6px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 11.12241s;
}

.raindrop:nth-child(96) {
  left: 156.63715px;
  top: 34.54529px;
  width: 10px;
  height: 11.3px;
  background-position: 19.57964% 6.51798%;
  animation-delay: 17.99275s;
}

.border:nth-child(96) {
  left: 158.63715px;
  top: 35.54529px;
  width: 6px;
  height: 11.3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 17.99275s;
}

.raindrop:nth-child(97) {
  left: 446.99275px;
  top: 437.6178px;
  width: 10px;
  height: 11.1px;
  background-position: 55.87409% 82.5694%;
  animation-delay: 21.26617s;
}

.border:nth-child(97) {
  left: 448.99275px;
  top: 438.6178px;
  width: 6px;
  height: 11.1px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 21.26617s;
}

.raindrop:nth-child(98) {
  left: 266.16548px;
  top: 337.74788px;
  width: 11px;
  height: 11.88px;
  background-position: 33.27069% 63.72602%;
  animation-delay: 24.64806s;
}

.border:nth-child(98) {
  left: 268.16548px;
  top: 338.74788px;
  width: 6.4px;
  height: 11.88px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 24.64806s;
}

.raindrop:nth-child(99) {
  left: 257.68608px;
  top: 102.69084px;
  width: 9px;
  height: 9.27px;
  background-position: 32.21076% 19.37563%;
  animation-delay: 2.98835s;
}

.border:nth-child(99) {
  left: 259.68608px;
  top: 103.69084px;
  width: 5.6px;
  height: 9.27px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 2.98835s;
}

.raindrop:nth-child(100) {
  left: 26.83301px;
  top: 111.91026px;
  width: 7px;
  height: 8.19px;
  background-position: 3.35413% 21.11514%;
  animation-delay: 29.21197s;
}

.border:nth-child(100) {
  left: 28.83301px;
  top: 112.91026px;
  width: 4.8px;
  height: 8.19px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 29.21197s;
}

.raindrop:nth-child(101) {
  left: 798.20444px;
  top: 520.40197px;
  width: 8px;
  height: 8.72px;
  background-position: 99.77556% 98.18905%;
  animation-delay: 18.90104s;
}

.border:nth-child(101) {
  left: 800.20444px;
  top: 521.40197px;
  width: 5.2px;
  height: 8.72px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 18.90104s;
}

.raindrop:nth-child(102) {
  left: 742.17488px;
  top: 141.73052px;
  width: 9px;
  height: 9.36px;
  background-position: 92.77186% 26.74161%;
  animation-delay: 2.38492s;
}

.border:nth-child(102) {
  left: 744.17488px;
  top: 142.73052px;
  width: 5.6px;
  height: 9.36px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 2.38492s;
}

.raindrop:nth-child(103) {
  left: 447.79564px;
  top: 514.14455px;
  width: 5px;
  height: 5.25px;
  background-position: 55.97445% 97.00841%;
  animation-delay: 23.90806s;
}

.border:nth-child(103) {
  left: 449.79564px;
  top: 515.14455px;
  width: 4px;
  height: 5.25px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 23.90806s;
}

.raindrop:nth-child(104) {
  left: 92.07513px;
  top: 465.5456px;
  width: 12px;
  height: 13.44px;
  background-position: 11.50939% 87.83879%;
  animation-delay: 19.71728s;
}

.border:nth-child(104) {
  left: 94.07513px;
  top: 466.5456px;
  width: 6.8px;
  height: 13.44px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 19.71728s;
}

.raindrop:nth-child(105) {
  left: 594.0293px;
  top: 175.05426px;
  width: 8px;
  height: 8.72px;
  background-position: 74.25366% 33.02911%;
  animation-delay: 18.0449s;
}

.border:nth-child(105) {
  left: 596.0293px;
  top: 176.05426px;
  width: 5.2px;
  height: 8.72px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 18.0449s;
}

.raindrop:nth-child(106) {
  left: 774.16773px;
  top: 56.04826px;
  width: 5px;
  height: 5.15px;
  background-position: 96.77097% 10.57514%;
  animation-delay: 25.52492s;
}

.border:nth-child(106) {
  left: 776.16773px;
  top: 57.04826px;
  width: 4px;
  height: 5.15px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 25.52492s;
}

.raindrop:nth-child(107) {
  left: 81.18413px;
  top: 242.05236px;
  width: 8px;
  height: 8.32px;
  background-position: 10.14802% 45.67026%;
  animation-delay: 24.45673s;
}

.border:nth-child(107) {
  left: 83.18413px;
  top: 243.05236px;
  width: 5.2px;
  height: 8.32px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 24.45673s;
}

.raindrop:nth-child(108) {
  left: 510.17224px;
  top: 287.9931px;
  width: 5px;
  height: 5.85px;
  background-position: 63.77153% 54.33832%;
  animation-delay: 19.51432s;
}

.border:nth-child(108) {
  left: 512.17224px;
  top: 288.9931px;
  width: 4px;
  height: 5.85px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 19.51432s;
}

.raindrop:nth-child(109) {
  left: 268.25745px;
  top: 494.31793px;
  width: 10px;
  height: 10.2px;
  background-position: 33.53218% 93.26753%;
  animation-delay: 3.52658s;
}

.border:nth-child(109) {
  left: 270.25745px;
  top: 495.31793px;
  width: 6px;
  height: 10.2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 3.52658s;
}

.raindrop:nth-child(110) {
  left: 166.10089px;
  top: 259.20766px;
  width: 10px;
  height: 11.2px;
  background-position: 20.76261% 48.9071%;
  animation-delay: 9.63978s;
}

.border:nth-child(110) {
  left: 168.10089px;
  top: 260.20766px;
  width: 6px;
  height: 11.2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 9.63978s;
}

.raindrop:nth-child(111) {
  left: 309.92272px;
  top: 179.28762px;
  width: 7px;
  height: 8.05px;
  background-position: 38.74034% 33.82785%;
  animation-delay: 3.0265s;
}

.border:nth-child(111) {
  left: 311.92272px;
  top: 180.28762px;
  width: 4.8px;
  height: 8.05px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 3.0265s;
}

.raindrop:nth-child(112) {
  left: 563.38932px;
  top: 247.45324px;
  width: 7px;
  height: 8.19px;
  background-position: 70.42366% 46.68929%;
  animation-delay: 12.12398s;
}

.border:nth-child(112) {
  left: 565.38932px;
  top: 248.45324px;
  width: 4.8px;
  height: 8.19px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 12.12398s;
}

.raindrop:nth-child(113) {
  left: 503.42148px;
  top: 159.25939px;
  width: 10px;
  height: 10.9px;
  background-position: 62.92768% 30.04894%;
  animation-delay: 15.82883s;
}

.border:nth-child(113) {
  left: 505.42148px;
  top: 160.25939px;
  width: 6px;
  height: 10.9px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 15.82883s;
}

.raindrop:nth-child(114) {
  left: 770.27946px;
  top: 65.13351px;
  width: 8px;
  height: 8.64px;
  background-position: 96.28493% 12.28934%;
  animation-delay: 2.65126s;
}

.border:nth-child(114) {
  left: 772.27946px;
  top: 66.13351px;
  width: 5.2px;
  height: 8.64px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 2.65126s;
}

.raindrop:nth-child(115) {
  left: 242.28401px;
  top: 347.93711px;
  width: 11px;
  height: 11.99px;
  background-position: 30.2855% 65.64851%;
  animation-delay: 0.79639s;
}

.border:nth-child(115) {
  left: 244.28401px;
  top: 348.93711px;
  width: 6.4px;
  height: 11.99px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 0.79639s;
}

.raindrop:nth-child(116) {
  left: 352.9245px;
  top: 43.53507px;
  width: 7px;
  height: 7.7px;
  background-position: 44.11556% 8.21416%;
  animation-delay: 21.17641s;
}

.border:nth-child(116) {
  left: 354.9245px;
  top: 44.53507px;
  width: 4.8px;
  height: 7.7px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 21.17641s;
}

.raindrop:nth-child(117) {
  left: 554.92217px;
  top: 466.5022px;
  width: 6px;
  height: 6.96px;
  background-position: 69.36527% 88.01928%;
  animation-delay: 17.99681s;
}

.border:nth-child(117) {
  left: 556.92217px;
  top: 467.5022px;
  width: 4.4px;
  height: 6.96px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 17.99681s;
}

.raindrop:nth-child(118) {
  left: 531.80244px;
  top: 27.909px;
  width: 9px;
  height: 10.08px;
  background-position: 66.4753% 5.26585%;
  animation-delay: 12.8648s;
}

.border:nth-child(118) {
  left: 533.80244px;
  top: 28.909px;
  width: 5.6px;
  height: 10.08px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 12.8648s;
}

.raindrop:nth-child(119) {
  left: 748.57131px;
  top: 198.81548px;
  width: 12px;
  height: 13.32px;
  background-position: 93.57141% 37.51236%;
  animation-delay: 25.17572s;
}

.border:nth-child(119) {
  left: 750.57131px;
  top: 199.81548px;
  width: 6.8px;
  height: 13.32px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 25.17572s;
}

.raindrop:nth-child(120) {
  left: 769.3473px;
  top: 262.96744px;
  width: 8px;
  height: 8.88px;
  background-position: 96.16841% 49.6165%;
  animation-delay: 7.61358s;
}

.border:nth-child(120) {
  left: 771.3473px;
  top: 263.96744px;
  width: 5.2px;
  height: 8.88px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 7.61358s;
}

.raindrop:nth-child(121) {
  left: 243.54576px;
  top: 257.06952px;
  width: 7px;
  height: 7.84px;
  background-position: 30.44322% 48.50368%;
  animation-delay: 13.85228s;
}

.border:nth-child(121) {
  left: 245.54576px;
  top: 258.06952px;
  width: 4.8px;
  height: 7.84px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 13.85228s;
}

.raindrop:nth-child(122) {
  left: 123.8315px;
  top: 21.61009px;
  width: 12px;
  height: 13.8px;
  background-position: 15.47894% 4.07738%;
  animation-delay: 26.16305s;
}

.border:nth-child(122) {
  left: 125.8315px;
  top: 22.61009px;
  width: 6.8px;
  height: 13.8px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 26.16305s;
}

.raindrop:nth-child(123) {
  left: 441.90075px;
  top: 167.61806px;
  width: 11px;
  height: 11.22px;
  background-position: 55.23759% 31.62605%;
  animation-delay: 2.95718s;
}

.border:nth-child(123) {
  left: 443.90075px;
  top: 168.61806px;
  width: 6.4px;
  height: 11.22px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 2.95718s;
}

.raindrop:nth-child(124) {
  left: 590.51189px;
  top: 397.32712px;
  width: 11px;
  height: 11.55px;
  background-position: 73.81399% 74.96738%;
  animation-delay: 21.11302s;
}

.border:nth-child(124) {
  left: 592.51189px;
  top: 398.32712px;
  width: 6.4px;
  height: 11.55px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 21.11302s;
}

.raindrop:nth-child(125) {
  left: 210.71489px;
  top: 18.56948px;
  width: 11px;
  height: 11.66px;
  background-position: 26.33936% 3.50368%;
  animation-delay: 9.20293s;
}

.border:nth-child(125) {
  left: 212.71489px;
  top: 19.56948px;
  width: 6.4px;
  height: 11.66px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 9.20293s;
}

.raindrop:nth-child(126) {
  left: 78.78878px;
  top: 521.9191px;
  width: 12px;
  height: 13.56px;
  background-position: 9.8486% 98.4753%;
  animation-delay: 1.20662s;
}

.border:nth-child(126) {
  left: 80.78878px;
  top: 522.9191px;
  width: 6.8px;
  height: 13.56px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 1.20662s;
}

.raindrop:nth-child(127) {
  left: 573.8016px;
  top: 249.5779px;
  width: 6px;
  height: 6.12px;
  background-position: 71.7252% 47.09017%;
  animation-delay: 18.33288s;
}

.border:nth-child(127) {
  left: 575.8016px;
  top: 250.5779px;
  width: 4.4px;
  height: 6.12px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 18.33288s;
}

.raindrop:nth-child(128) {
  left: 619.68362px;
  top: 448.93873px;
  width: 8px;
  height: 8.48px;
  background-position: 77.46045% 84.70542%;
  animation-delay: 13.41756s;
}

.border:nth-child(128) {
  left: 621.68362px;
  top: 449.93873px;
  width: 5.2px;
  height: 8.48px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 13.41756s;
}

.raindrop:nth-child(129) {
  left: 749.68579px;
  top: 149.30096px;
  width: 12px;
  height: 13.44px;
  background-position: 93.71072% 28.16999%;
  animation-delay: 24.00137s;
}

.border:nth-child(129) {
  left: 751.68579px;
  top: 150.30096px;
  width: 6.8px;
  height: 13.44px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 24.00137s;
}

.raindrop:nth-child(130) {
  left: 20.9368px;
  top: 396.14233px;
  width: 10px;
  height: 11.3px;
  background-position: 2.6171% 74.74384%;
  animation-delay: 10.89863s;
}

.border:nth-child(130) {
  left: 22.9368px;
  top: 397.14233px;
  width: 6px;
  height: 11.3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 10.89863s;
}

.raindrop:nth-child(131) {
  left: 172.43645px;
  top: 312.87932px;
  width: 7px;
  height: 8.4px;
  background-position: 21.55456% 59.03383%;
  animation-delay: 28.53289s;
}

.border:nth-child(131) {
  left: 174.43645px;
  top: 313.87932px;
  width: 4.8px;
  height: 8.4px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 28.53289s;
}

.raindrop:nth-child(132) {
  left: 685.46082px;
  top: 528.55541px;
  width: 7px;
  height: 8.19px;
  background-position: 85.6826% 99.72744%;
  animation-delay: 0.40433s;
}

.border:nth-child(132) {
  left: 687.46082px;
  top: 529.55541px;
  width: 4.8px;
  height: 8.19px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 0.40433s;
}

.raindrop:nth-child(133) {
  left: 45.44118px;
  top: 348.33761px;
  width: 9px;
  height: 10.35px;
  background-position: 5.68015% 65.72408%;
  animation-delay: 17.69274s;
}

.border:nth-child(133) {
  left: 47.44118px;
  top: 349.33761px;
  width: 5.6px;
  height: 10.35px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 17.69274s;
}

.raindrop:nth-child(134) {
  left: 769.88029px;
  top: 259.65638px;
  width: 7px;
  height: 7.14px;
  background-position: 96.23504% 48.99177%;
  animation-delay: 10.19029s;
}

.border:nth-child(134) {
  left: 771.88029px;
  top: 260.65638px;
  width: 4.8px;
  height: 7.14px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 10.19029s;
}

.raindrop:nth-child(135) {
  left: 85.3559px;
  top: 392.85358px;
  width: 11px;
  height: 13.09px;
  background-position: 10.66949% 74.12332%;
  animation-delay: 15.68863s;
}

.border:nth-child(135) {
  left: 87.3559px;
  top: 393.85358px;
  width: 6.4px;
  height: 13.09px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 15.68863s;
}

.raindrop:nth-child(136) {
  left: 12.21102px;
  top: 304.67012px;
  width: 7px;
  height: 7.42px;
  background-position: 1.52638% 57.48493%;
  animation-delay: 26.37322s;
}

.border:nth-child(136) {
  left: 14.21102px;
  top: 305.67012px;
  width: 4.8px;
  height: 7.42px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 26.37322s;
}

.raindrop:nth-child(137) {
  left: 586.44492px;
  top: 101.56814px;
  width: 5px;
  height: 5.7px;
  background-position: 73.30562% 19.1638%;
  animation-delay: 12.3881s;
}

.border:nth-child(137) {
  left: 588.44492px;
  top: 102.56814px;
  width: 4px;
  height: 5.7px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 12.3881s;
}

.raindrop:nth-child(138) {
  left: 373.56694px;
  top: 238.44158px;
  width: 6px;
  height: 6.9px;
  background-position: 46.69587% 44.98898%;
  animation-delay: 28.89965s;
}

.border:nth-child(138) {
  left: 375.56694px;
  top: 239.44158px;
  width: 4.4px;
  height: 6.9px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 28.89965s;
}

.raindrop:nth-child(139) {
  left: 54.02663px;
  top: 178.58714px;
  width: 6px;
  height: 6.24px;
  background-position: 6.75333% 33.69569%;
  animation-delay: 27.17984s;
}

.border:nth-child(139) {
  left: 56.02663px;
  top: 179.58714px;
  width: 4.4px;
  height: 6.24px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 27.17984s;
}

.raindrop:nth-child(140) {
  left: 205.00357px;
  top: 164.42852px;
  width: 8px;
  height: 8.16px;
  background-position: 25.62545% 31.02425%;
  animation-delay: 29.10615s;
}

.border:nth-child(140) {
  left: 207.00357px;
  top: 165.42852px;
  width: 5.2px;
  height: 8.16px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 29.10615s;
}

.raindrop:nth-child(141) {
  left: 365.50263px;
  top: 473.41947px;
  width: 8px;
  height: 9.2px;
  background-position: 45.68783% 89.32443%;
  animation-delay: 9.61533s;
}

.border:nth-child(141) {
  left: 367.50263px;
  top: 474.41947px;
  width: 5.2px;
  height: 9.2px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 9.61533s;
}

.raindrop:nth-child(142) {
  left: 176.89897px;
  top: 9.22082px;
  width: 7px;
  height: 7.98px;
  background-position: 22.11237% 1.73978%;
  animation-delay: 13.78559s;
}

.border:nth-child(142) {
  left: 178.89897px;
  top: 10.22082px;
  width: 4.8px;
  height: 7.98px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 13.78559s;
}

.raindrop:nth-child(143) {
  left: 225.99839px;
  top: 171.5854px;
  width: 10px;
  height: 10.3px;
  background-position: 28.2498% 32.3746%;
  animation-delay: 10.58761s;
}

.border:nth-child(143) {
  left: 227.99839px;
  top: 172.5854px;
  width: 6px;
  height: 10.3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 10.58761s;
}

.raindrop:nth-child(144) {
  left: 403.8728px;
  top: 484.33811px;
  width: 11px;
  height: 11.11px;
  background-position: 50.4841% 91.38455%;
  animation-delay: 0.86092s;
}

.border:nth-child(144) {
  left: 405.8728px;
  top: 485.33811px;
  width: 6.4px;
  height: 11.11px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 0.86092s;
}

.raindrop:nth-child(145) {
  left: 721.44052px;
  top: 43.98361px;
  width: 6px;
  height: 6.3px;
  background-position: 90.18006% 8.29879%;
  animation-delay: 11.77383s;
}

.border:nth-child(145) {
  left: 723.44052px;
  top: 44.98361px;
  width: 4.4px;
  height: 6.3px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 11.77383s;
}

.raindrop:nth-child(146) {
  left: 346.4168px;
  top: 100.36241px;
  width: 6px;
  height: 6.3px;
  background-position: 43.3021% 18.9363%;
  animation-delay: 11.02145s;
}

.border:nth-child(146) {
  left: 348.4168px;
  top: 101.36241px;
  width: 4.4px;
  height: 6.3px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 11.02145s;
}

.raindrop:nth-child(147) {
  left: 73.20215px;
  top: 445.78163px;
  width: 9px;
  height: 10.26px;
  background-position: 9.15027% 84.10974%;
  animation-delay: 25.50563s;
}

.border:nth-child(147) {
  left: 75.20215px;
  top: 446.78163px;
  width: 5.6px;
  height: 10.26px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 25.50563s;
}

.raindrop:nth-child(148) {
  left: 33.54644px;
  top: 321.31167px;
  width: 9px;
  height: 9.09px;
  background-position: 4.1933% 60.62484%;
  animation-delay: 22.98261s;
}

.border:nth-child(148) {
  left: 35.54644px;
  top: 322.31167px;
  width: 5.6px;
  height: 9.09px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 22.98261s;
}

.raindrop:nth-child(149) {
  left: 178.4109px;
  top: 59.44481px;
  width: 5px;
  height: 5.55px;
  background-position: 22.30136% 11.216%;
  animation-delay: 16.20663s;
}

.border:nth-child(149) {
  left: 180.4109px;
  top: 60.44481px;
  width: 4px;
  height: 5.55px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 16.20663s;
}

.raindrop:nth-child(150) {
  left: 624.30516px;
  top: 394.57809px;
  width: 10px;
  height: 11.3px;
  background-position: 78.03814% 74.4487%;
  animation-delay: 3.3113s;
}

.border:nth-child(150) {
  left: 626.30516px;
  top: 395.57809px;
  width: 6px;
  height: 11.3px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 3.3113s;
}

.raindrop:nth-child(151) {
  left: 150.18901px;
  top: 337.72878px;
  width: 11px;
  height: 11.44px;
  background-position: 18.77363% 63.72241%;
  animation-delay: 14.88045s;
}

.border:nth-child(151) {
  left: 152.18901px;
  top: 338.72878px;
  width: 6.4px;
  height: 11.44px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 14.88045s;
}

.raindrop:nth-child(152) {
  left: 223.61443px;
  top: 419.62733px;
  width: 12px;
  height: 14.16px;
  background-position: 27.9518% 79.17497%;
  animation-delay: 10.98532s;
}

.border:nth-child(152) {
  left: 225.61443px;
  top: 420.62733px;
  width: 6.8px;
  height: 14.16px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 10.98532s;
}

.raindrop:nth-child(153) {
  left: 88.72843px;
  top: 488.41225px;
  width: 8px;
  height: 8.32px;
  background-position: 11.09105% 92.15326%;
  animation-delay: 15.63611s;
}

.border:nth-child(153) {
  left: 90.72843px;
  top: 489.41225px;
  width: 5.2px;
  height: 8.32px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 15.63611s;
}

.raindrop:nth-child(154) {
  left: 670.89733px;
  top: 124.48035px;
  width: 6px;
  height: 6.06px;
  background-position: 83.86217% 23.48686%;
  animation-delay: 5.02831s;
}

.border:nth-child(154) {
  left: 672.89733px;
  top: 125.48035px;
  width: 4.4px;
  height: 6.06px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 5.02831s;
}

.raindrop:nth-child(155) {
  left: 86.43801px;
  top: 528.55362px;
  width: 8px;
  height: 9.2px;
  background-position: 10.80475% 99.7271%;
  animation-delay: 3.10054s;
}

.border:nth-child(155) {
  left: 88.43801px;
  top: 529.55362px;
  width: 5.2px;
  height: 9.2px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 3.10054s;
}

.raindrop:nth-child(156) {
  left: 744.73702px;
  top: 520.09037px;
  width: 6px;
  height: 6.96px;
  background-position: 93.09213% 98.13026%;
  animation-delay: 0.40626s;
}

.border:nth-child(156) {
  left: 746.73702px;
  top: 521.09037px;
  width: 4.4px;
  height: 6.96px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 0.40626s;
}

.raindrop:nth-child(157) {
  left: 762.6884px;
  top: 190.2725px;
  width: 10px;
  height: 10.8px;
  background-position: 95.33605% 35.90047%;
  animation-delay: 0.4342s;
}

.border:nth-child(157) {
  left: 764.6884px;
  top: 191.2725px;
  width: 6px;
  height: 10.8px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 0.4342s;
}

.raindrop:nth-child(158) {
  left: 208.99172px;
  top: 20.4629px;
  width: 10px;
  height: 11.2px;
  background-position: 26.12397% 3.86092%;
  animation-delay: 11.96755s;
}

.border:nth-child(158) {
  left: 210.99172px;
  top: 21.4629px;
  width: 6px;
  height: 11.2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 11.96755s;
}

.raindrop:nth-child(159) {
  left: 169.94566px;
  top: 374.61322px;
  width: 7px;
  height: 7.28px;
  background-position: 21.24321% 70.68174%;
  animation-delay: 2.62813s;
}

.border:nth-child(159) {
  left: 171.94566px;
  top: 375.61322px;
  width: 4.8px;
  height: 7.28px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 2.62813s;
}

.raindrop:nth-child(160) {
  left: 140.33819px;
  top: 307.60566px;
  width: 11px;
  height: 13.09px;
  background-position: 17.54227% 58.0388%;
  animation-delay: 7.39249s;
}

.border:nth-child(160) {
  left: 142.33819px;
  top: 308.60566px;
  width: 6.4px;
  height: 13.09px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 7.39249s;
}

.raindrop:nth-child(161) {
  left: 487.91957px;
  top: 150.74449px;
  width: 12px;
  height: 12.36px;
  background-position: 60.98995% 28.44236%;
  animation-delay: 7.0209s;
}

.border:nth-child(161) {
  left: 489.91957px;
  top: 151.74449px;
  width: 6.8px;
  height: 12.36px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 7.0209s;
}

.raindrop:nth-child(162) {
  left: 111.04015px;
  top: 320.54645px;
  width: 6px;
  height: 6.24px;
  background-position: 13.88002% 60.48046%;
  animation-delay: 29.01567s;
}

.border:nth-child(162) {
  left: 113.04015px;
  top: 321.54645px;
  width: 4.4px;
  height: 6.24px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 29.01567s;
}

.raindrop:nth-child(163) {
  left: 772.46278px;
  top: 504.10567px;
  width: 6px;
  height: 6.3px;
  background-position: 96.55785% 95.11428%;
  animation-delay: 14.9007s;
}

.border:nth-child(163) {
  left: 774.46278px;
  top: 505.10567px;
  width: 4.4px;
  height: 6.3px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 14.9007s;
}

.raindrop:nth-child(164) {
  left: 245.89881px;
  top: 216.76531px;
  width: 6px;
  height: 6.72px;
  background-position: 30.73735% 40.89912%;
  animation-delay: 22.76885s;
}

.border:nth-child(164) {
  left: 247.89881px;
  top: 217.76531px;
  width: 4.4px;
  height: 6.72px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 22.76885s;
}

.raindrop:nth-child(165) {
  left: 440.2339px;
  top: 88.8711px;
  width: 5px;
  height: 5.7px;
  background-position: 55.02924% 16.76813%;
  animation-delay: 16.46564s;
}

.border:nth-child(165) {
  left: 442.2339px;
  top: 89.8711px;
  width: 4px;
  height: 5.7px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 16.46564s;
}

.raindrop:nth-child(166) {
  left: 758.78338px;
  top: 399.46321px;
  width: 10px;
  height: 11.6px;
  background-position: 94.84792% 75.37042%;
  animation-delay: 16.95576s;
}

.border:nth-child(166) {
  left: 760.78338px;
  top: 400.46321px;
  width: 6px;
  height: 11.6px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 16.95576s;
}

.raindrop:nth-child(167) {
  left: 752.14614px;
  top: 179.26245px;
  width: 11px;
  height: 12.54px;
  background-position: 94.01827% 33.8231%;
  animation-delay: 0.41013s;
}

.border:nth-child(167) {
  left: 754.14614px;
  top: 180.26245px;
  width: 6.4px;
  height: 12.54px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 0.41013s;
}

.raindrop:nth-child(168) {
  left: 73.84046px;
  top: 335.1744px;
  width: 10px;
  height: 11.1px;
  background-position: 9.23006% 63.24045%;
  animation-delay: 14.81686s;
}

.border:nth-child(168) {
  left: 75.84046px;
  top: 336.1744px;
  width: 6px;
  height: 11.1px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 14.81686s;
}

.raindrop:nth-child(169) {
  left: 788.6756px;
  top: 206.67725px;
  width: 12px;
  height: 14.16px;
  background-position: 98.58445% 38.99571%;
  animation-delay: 0.72411s;
}

.border:nth-child(169) {
  left: 790.6756px;
  top: 207.67725px;
  width: 6.8px;
  height: 14.16px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 0.72411s;
}

.raindrop:nth-child(170) {
  left: 211.07821px;
  top: 429.82551px;
  width: 6px;
  height: 6.78px;
  background-position: 26.38478% 81.09915%;
  animation-delay: 9.22583s;
}

.border:nth-child(170) {
  left: 213.07821px;
  top: 430.82551px;
  width: 4.4px;
  height: 6.78px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 9.22583s;
}

.raindrop:nth-child(171) {
  left: 507.46px;
  top: 96.31211px;
  width: 7px;
  height: 7.28px;
  background-position: 63.4325% 18.1721%;
  animation-delay: 19.98953s;
}

.border:nth-child(171) {
  left: 509.46px;
  top: 97.31211px;
  width: 4.8px;
  height: 7.28px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 19.98953s;
}

.raindrop:nth-child(172) {
  left: 696.5581px;
  top: 384.3783px;
  width: 5px;
  height: 5.55px;
  background-position: 87.06976% 72.52421%;
  animation-delay: 17.37176s;
}

.border:nth-child(172) {
  left: 698.5581px;
  top: 385.3783px;
  width: 4px;
  height: 5.55px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 17.37176s;
}

.raindrop:nth-child(173) {
  left: 328.47536px;
  top: 43.08063px;
  width: 9px;
  height: 9.81px;
  background-position: 41.05942% 8.12842%;
  animation-delay: 23.88281s;
}

.border:nth-child(173) {
  left: 330.47536px;
  top: 44.08063px;
  width: 5.6px;
  height: 9.81px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 23.88281s;
}

.raindrop:nth-child(174) {
  left: 355.62388px;
  top: 403.33421px;
  width: 5px;
  height: 5.5px;
  background-position: 44.45298% 76.10079%;
  animation-delay: 29.86853s;
}

.border:nth-child(174) {
  left: 357.62388px;
  top: 404.33421px;
  width: 4px;
  height: 5.5px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 29.86853s;
}

.raindrop:nth-child(175) {
  left: 437.97029px;
  top: 352.16262px;
  width: 12px;
  height: 13.2px;
  background-position: 54.74629% 66.44578%;
  animation-delay: 1.25315s;
}

.border:nth-child(175) {
  left: 439.97029px;
  top: 353.16262px;
  width: 6.8px;
  height: 13.2px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 1.25315s;
}

.raindrop:nth-child(176) {
  left: 378.26634px;
  top: 168.91569px;
  width: 11px;
  height: 12.65px;
  background-position: 47.28329% 31.87088%;
  animation-delay: 29.45102s;
}

.border:nth-child(176) {
  left: 380.26634px;
  top: 169.91569px;
  width: 6.4px;
  height: 12.65px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 29.45102s;
}

.raindrop:nth-child(177) {
  left: 335.56805px;
  top: 220.18732px;
  width: 11px;
  height: 11.33px;
  background-position: 41.94601% 41.54478%;
  animation-delay: 18.30374s;
}

.border:nth-child(177) {
  left: 337.56805px;
  top: 221.18732px;
  width: 6.4px;
  height: 11.33px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 18.30374s;
}

.raindrop:nth-child(178) {
  left: 75.0223px;
  top: 278.69381px;
  width: 10px;
  height: 12px;
  background-position: 9.37779% 52.58374%;
  animation-delay: 10.49024s;
}

.border:nth-child(178) {
  left: 77.0223px;
  top: 279.69381px;
  width: 6px;
  height: 12px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 10.49024s;
}

.raindrop:nth-child(179) {
  left: 711.54181px;
  top: 150.2629px;
  width: 11px;
  height: 12.21px;
  background-position: 88.94273% 28.35149%;
  animation-delay: 15.58096s;
}

.border:nth-child(179) {
  left: 713.54181px;
  top: 151.2629px;
  width: 6.4px;
  height: 12.21px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 15.58096s;
}

.raindrop:nth-child(180) {
  left: 705.03227px;
  top: 290.19675px;
  width: 11px;
  height: 11.88px;
  background-position: 88.12903% 54.7541%;
  animation-delay: 16.23354s;
}

.border:nth-child(180) {
  left: 707.03227px;
  top: 291.19675px;
  width: 6.4px;
  height: 11.88px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 16.23354s;
}

.raindrop:nth-child(181) {
  left: 788.07648px;
  top: 237.2236px;
  width: 10px;
  height: 11.2px;
  background-position: 98.50956% 44.75917%;
  animation-delay: 10.09306s;
}

.border:nth-child(181) {
  left: 790.07648px;
  top: 238.2236px;
  width: 6px;
  height: 11.2px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 10.09306s;
}

.raindrop:nth-child(182) {
  left: 560.74693px;
  top: 136.12986px;
  width: 7px;
  height: 7.28px;
  background-position: 70.09337% 25.68488%;
  animation-delay: 13.26972s;
}

.border:nth-child(182) {
  left: 562.74693px;
  top: 137.12986px;
  width: 4.8px;
  height: 7.28px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 13.26972s;
}

.raindrop:nth-child(183) {
  left: 38.73863px;
  top: 60.74634px;
  width: 7px;
  height: 7.07px;
  background-position: 4.84233% 11.46157%;
  animation-delay: 29.77179s;
}

.border:nth-child(183) {
  left: 40.73863px;
  top: 61.74634px;
  width: 4.8px;
  height: 7.07px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 29.77179s;
}

.raindrop:nth-child(184) {
  left: 406.01704px;
  top: 328.30052px;
  width: 6px;
  height: 7.02px;
  background-position: 50.75213% 61.94349%;
  animation-delay: 25.36925s;
}

.border:nth-child(184) {
  left: 408.01704px;
  top: 329.30052px;
  width: 4.4px;
  height: 7.02px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 25.36925s;
}

.raindrop:nth-child(185) {
  left: 657.06378px;
  top: 57.72361px;
  width: 10px;
  height: 11.7px;
  background-position: 82.13297% 10.89125%;
  animation-delay: 25.16032s;
}

.border:nth-child(185) {
  left: 659.06378px;
  top: 58.72361px;
  width: 6px;
  height: 11.7px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 25.16032s;
}

.raindrop:nth-child(186) {
  left: 595.93466px;
  top: 254.20033px;
  width: 9px;
  height: 9.72px;
  background-position: 74.49183% 47.96233%;
  animation-delay: 24.25517s;
}

.border:nth-child(186) {
  left: 597.93466px;
  top: 255.20033px;
  width: 5.6px;
  height: 9.72px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 24.25517s;
}

.raindrop:nth-child(187) {
  left: 601.89038px;
  top: 335.55111px;
  width: 10px;
  height: 10.1px;
  background-position: 75.2363% 63.31153%;
  animation-delay: 10.43645s;
}

.border:nth-child(187) {
  left: 603.89038px;
  top: 336.55111px;
  width: 6px;
  height: 10.1px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 10.43645s;
}

.raindrop:nth-child(188) {
  left: 752.81577px;
  top: 5.14528px;
  width: 6px;
  height: 6.48px;
  background-position: 94.10197% 0.97081%;
  animation-delay: 7.07585s;
}

.border:nth-child(188) {
  left: 754.81577px;
  top: 6.14528px;
  width: 4.4px;
  height: 6.48px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 7.07585s;
}

.raindrop:nth-child(189) {
  left: 310.05589px;
  top: 84.63689px;
  width: 12px;
  height: 12.48px;
  background-position: 38.75699% 15.96923%;
  animation-delay: 6.39448s;
}

.border:nth-child(189) {
  left: 312.05589px;
  top: 85.63689px;
  width: 6.8px;
  height: 12.48px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 6.39448s;
}

.raindrop:nth-child(190) {
  left: 587.41189px;
  top: 279.67753px;
  width: 8px;
  height: 8.32px;
  background-position: 73.42649% 52.76934%;
  animation-delay: 15.68845s;
}

.border:nth-child(190) {
  left: 589.41189px;
  top: 280.67753px;
  width: 5.2px;
  height: 8.32px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 15.68845s;
}

.raindrop:nth-child(191) {
  left: 429.09879px;
  top: 470.68786px;
  width: 12px;
  height: 13.32px;
  background-position: 53.63735% 88.80903%;
  animation-delay: 15.97977s;
}

.border:nth-child(191) {
  left: 431.09879px;
  top: 471.68786px;
  width: 6.8px;
  height: 13.32px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 15.97977s;
}

.raindrop:nth-child(192) {
  left: 671.0246px;
  top: 352.60101px;
  width: 8px;
  height: 8.56px;
  background-position: 83.87808% 66.52849%;
  animation-delay: 10.15139s;
}

.border:nth-child(192) {
  left: 673.0246px;
  top: 353.60101px;
  width: 5.2px;
  height: 8.56px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 10.15139s;
}

.raindrop:nth-child(193) {
  left: 501.62858px;
  top: 1.21112px;
  width: 8px;
  height: 8.08px;
  background-position: 62.70357% 0.22851%;
  animation-delay: 24.92948s;
}

.border:nth-child(193) {
  left: 503.62858px;
  top: 2.21112px;
  width: 5.2px;
  height: 8.08px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 24.92948s;
}

.raindrop:nth-child(194) {
  left: 340.72796px;
  top: 274.74118px;
  width: 7px;
  height: 7.07px;
  background-position: 42.59099% 51.83796%;
  animation-delay: 13.1189s;
}

.border:nth-child(194) {
  left: 342.72796px;
  top: 275.74118px;
  width: 4.8px;
  height: 7.07px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 13.1189s;
}

.raindrop:nth-child(195) {
  left: 12.72986px;
  top: 519.17592px;
  width: 10px;
  height: 12px;
  background-position: 1.59123% 97.95772%;
  animation-delay: 8.22445s;
}

.border:nth-child(195) {
  left: 14.72986px;
  top: 520.17592px;
  width: 6px;
  height: 12px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 8.22445s;
}

.raindrop:nth-child(196) {
  left: 671.03978px;
  top: 250.39383px;
  width: 12px;
  height: 13.32px;
  background-position: 83.87997% 47.24412%;
  animation-delay: 10.11673s;
}

.border:nth-child(196) {
  left: 673.03978px;
  top: 251.39383px;
  width: 6.8px;
  height: 13.32px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 10.11673s;
}

.raindrop:nth-child(197) {
  left: 279.00851px;
  top: 398.07766px;
  width: 8px;
  height: 8.16px;
  background-position: 34.87606% 75.10899%;
  animation-delay: 27.58742s;
}

.border:nth-child(197) {
  left: 281.00851px;
  top: 399.07766px;
  width: 5.2px;
  height: 8.16px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 27.58742s;
}

.raindrop:nth-child(198) {
  left: 695.03487px;
  top: 110.59058px;
  width: 8px;
  height: 9.2px;
  background-position: 86.87936% 20.86615%;
  animation-delay: 26.06242s;
}

.border:nth-child(198) {
  left: 697.03487px;
  top: 111.59058px;
  width: 5.2px;
  height: 9.2px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 26.06242s;
}

.raindrop:nth-child(199) {
  left: 728.27018px;
  top: 148.5549px;
  width: 6px;
  height: 6.12px;
  background-position: 91.03377% 28.02923%;
  animation-delay: 19.82161s;
}

.border:nth-child(199) {
  left: 730.27018px;
  top: 149.5549px;
  width: 4.4px;
  height: 6.12px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 19.82161s;
}

.raindrop:nth-child(200) {
  left: 645.24536px;
  top: 95.09077px;
  width: 5px;
  height: 5.1px;
  background-position: 80.65567% 17.94166%;
  animation-delay: 15.32896s;
}

.border:nth-child(200) {
  left: 647.24536px;
  top: 96.09077px;
  width: 4px;
  height: 5.1px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 15.32896s;
}

.raindrop:nth-child(201) {
  left: 697.97857px;
  top: 328.24275px;
  width: 5px;
  height: 5.05px;
  background-position: 87.24732% 61.93259%;
  animation-delay: 15.18876s;
}

.border:nth-child(201) {
  left: 699.97857px;
  top: 329.24275px;
  width: 4px;
  height: 5.05px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 15.18876s;
}

.raindrop:nth-child(202) {
  left: 508.41863px;
  top: 310.00741px;
  width: 7px;
  height: 8.4px;
  background-position: 63.55233% 58.49196%;
  animation-delay: 15.71993s;
}

.border:nth-child(202) {
  left: 510.41863px;
  top: 311.00741px;
  width: 4.8px;
  height: 8.4px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 15.71993s;
}

.raindrop:nth-child(203) {
  left: 66.41957px;
  top: 498.16563px;
  width: 11px;
  height: 12.54px;
  background-position: 8.30245% 93.99352%;
  animation-delay: 14.81069s;
}

.border:nth-child(203) {
  left: 68.41957px;
  top: 499.16563px;
  width: 6.4px;
  height: 12.54px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 14.81069s;
}

.raindrop:nth-child(204) {
  left: 112.05964px;
  top: 363.40908px;
  width: 11px;
  height: 11.66px;
  background-position: 14.00746% 68.56775%;
  animation-delay: 1.1128s;
}

.border:nth-child(204) {
  left: 114.05964px;
  top: 364.40908px;
  width: 6.4px;
  height: 11.66px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 1.1128s;
}

.raindrop:nth-child(205) {
  left: 761.21958px;
  top: 301.94172px;
  width: 10px;
  height: 10.9px;
  background-position: 95.15245% 56.97014%;
  animation-delay: 13.63956s;
}

.border:nth-child(205) {
  left: 763.21958px;
  top: 302.94172px;
  width: 6px;
  height: 10.9px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 13.63956s;
}

.raindrop:nth-child(206) {
  left: 425.16495px;
  top: 380.69691px;
  width: 10px;
  height: 11.9px;
  background-position: 53.14562% 71.82961%;
  animation-delay: 5.99839s;
}

.border:nth-child(206) {
  left: 427.16495px;
  top: 381.69691px;
  width: 6px;
  height: 11.9px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 5.99839s;
}

.raindrop:nth-child(207) {
  left: 380.67165px;
  top: 302.02173px;
  width: 5px;
  height: 5.8px;
  background-position: 47.58396% 56.98523%;
  animation-delay: 13.47144s;
}

.border:nth-child(207) {
  left: 382.67165px;
  top: 303.02173px;
  width: 4px;
  height: 5.8px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 13.47144s;
}

.raindrop:nth-child(208) {
  left: 285.79293px;
  top: 472.81077px;
  width: 7px;
  height: 7.77px;
  background-position: 35.72412% 89.20958%;
  animation-delay: 11.84028s;
}

.border:nth-child(208) {
  left: 287.79293px;
  top: 473.81077px;
  width: 4.8px;
  height: 7.77px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 11.84028s;
}

.raindrop:nth-child(209) {
  left: 725.36609px;
  top: 517.16839px;
  width: 12px;
  height: 13.08px;
  background-position: 90.67076% 97.57894%;
  animation-delay: 17.18349s;
}

.border:nth-child(209) {
  left: 727.36609px;
  top: 518.16839px;
  width: 6.8px;
  height: 13.08px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 17.18349s;
}

.raindrop:nth-child(210) {
  left: 340.37629px;
  top: 434.20857px;
  width: 10px;
  height: 12px;
  background-position: 42.54704% 81.92615%;
  animation-delay: 19.00495s;
}

.border:nth-child(210) {
  left: 342.37629px;
  top: 435.20857px;
  width: 6px;
  height: 12px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 19.00495s;
}

.raindrop:nth-child(211) {
  left: 645.72133px;
  top: 428.15017px;
  width: 5px;
  height: 5.85px;
  background-position: 80.71517% 80.78305%;
  animation-delay: 22.38345s;
}

.border:nth-child(211) {
  left: 647.72133px;
  top: 429.15017px;
  width: 4px;
  height: 5.85px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 22.38345s;
}

.raindrop:nth-child(212) {
  left: 539.70464px;
  top: 95.27629px;
  width: 10px;
  height: 10.9px;
  background-position: 67.46308% 17.97666%;
  animation-delay: 7.01333s;
}

.border:nth-child(212) {
  left: 541.70464px;
  top: 96.27629px;
  width: 6px;
  height: 10.9px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 7.01333s;
}

.raindrop:nth-child(213) {
  left: 22.6112px;
  top: 210.00542px;
  width: 6px;
  height: 6.42px;
  background-position: 2.8264% 39.62366%;
  animation-delay: 26.10727s;
}

.border:nth-child(213) {
  left: 24.6112px;
  top: 211.00542px;
  width: 4.4px;
  height: 6.42px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 26.10727s;
}

.raindrop:nth-child(214) {
  left: 726.11747px;
  top: 221.60689px;
  width: 7px;
  height: 7.7px;
  background-position: 90.76468% 41.81262%;
  animation-delay: 15.42978s;
}

.border:nth-child(214) {
  left: 728.11747px;
  top: 222.60689px;
  width: 4.8px;
  height: 7.7px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 15.42978s;
}

.raindrop:nth-child(215) {
  left: 35.40854px;
  top: 326.3958px;
  width: 5px;
  height: 5.15px;
  background-position: 4.42607% 61.58411%;
  animation-delay: 7.78934s;
}

.border:nth-child(215) {
  left: 37.40854px;
  top: 327.3958px;
  width: 4px;
  height: 5.15px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 7.78934s;
}

.raindrop:nth-child(216) {
  left: 326.1791px;
  top: 116.72029px;
  width: 5px;
  height: 5.95px;
  background-position: 40.77239% 22.0227%;
  animation-delay: 5.69018s;
}

.border:nth-child(216) {
  left: 328.1791px;
  top: 117.72029px;
  width: 4px;
  height: 5.95px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 5.69018s;
}

.raindrop:nth-child(217) {
  left: 494.72934px;
  top: 82.94554px;
  width: 6px;
  height: 6.72px;
  background-position: 61.84117% 15.6501%;
  animation-delay: 9.69483s;
}

.border:nth-child(217) {
  left: 496.72934px;
  top: 83.94554px;
  width: 4.4px;
  height: 6.72px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 9.69483s;
}

.raindrop:nth-child(218) {
  left: 12.24513px;
  top: 292.54388px;
  width: 11px;
  height: 11.22px;
  background-position: 1.53064% 55.19696%;
  animation-delay: 1.84596s;
}

.border:nth-child(218) {
  left: 14.24513px;
  top: 293.54388px;
  width: 6.4px;
  height: 11.22px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 1.84596s;
}

.raindrop:nth-child(219) {
  left: 122.55588px;
  top: 83.80059px;
  width: 11px;
  height: 11.11px;
  background-position: 15.31948% 15.81143%;
  animation-delay: 27.4041s;
}

.border:nth-child(219) {
  left: 124.55588px;
  top: 84.80059px;
  width: 6.4px;
  height: 11.11px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 27.4041s;
}

.raindrop:nth-child(220) {
  left: 466.3506px;
  top: 432.21281px;
  width: 9px;
  height: 9.27px;
  background-position: 58.29382% 81.54959%;
  animation-delay: 1.26369s;
}

.border:nth-child(220) {
  left: 468.3506px;
  top: 433.21281px;
  width: 5.6px;
  height: 9.27px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 1.26369s;
}

.raindrop:nth-child(221) {
  left: 240.65514px;
  top: 375.75393px;
  width: 6px;
  height: 7.02px;
  background-position: 30.08189% 70.89697%;
  animation-delay: 10.56953s;
}

.border:nth-child(221) {
  left: 242.65514px;
  top: 376.75393px;
  width: 4.4px;
  height: 7.02px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 10.56953s;
}

.raindrop:nth-child(222) {
  left: 451.17387px;
  top: 486.46535px;
  width: 7px;
  height: 8.19px;
  background-position: 56.39673% 91.78592%;
  animation-delay: 7.07966s;
}

.border:nth-child(222) {
  left: 453.17387px;
  top: 487.46535px;
  width: 4.8px;
  height: 8.19px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 7.07966s;
}

.raindrop:nth-child(223) {
  left: 746.16919px;
  top: 266.84132px;
  width: 10px;
  height: 10.4px;
  background-position: 93.27115% 50.34742%;
  animation-delay: 0.55051s;
}

.border:nth-child(223) {
  left: 748.16919px;
  top: 267.84132px;
  width: 6px;
  height: 10.4px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 0.55051s;
}

.raindrop:nth-child(224) {
  left: 510.1584px;
  top: 225.89214px;
  width: 9px;
  height: 9.72px;
  background-position: 63.7698% 42.62116%;
  animation-delay: 28.76577s;
}

.border:nth-child(224) {
  left: 512.1584px;
  top: 226.89214px;
  width: 5.6px;
  height: 9.72px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 28.76577s;
}

.raindrop:nth-child(225) {
  left: 181.57695px;
  top: 344.78765px;
  width: 10px;
  height: 11.1px;
  background-position: 22.69712% 65.05427%;
  animation-delay: 11.72007s;
}

.border:nth-child(225) {
  left: 183.57695px;
  top: 345.78765px;
  width: 6px;
  height: 11.1px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 11.72007s;
}

.raindrop:nth-child(226) {
  left: 530.24666px;
  top: 196.30953px;
  width: 9px;
  height: 9.99px;
  background-position: 66.28083% 37.03953%;
  animation-delay: 5.39321s;
}

.border:nth-child(226) {
  left: 532.24666px;
  top: 197.30953px;
  width: 5.6px;
  height: 9.99px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 5.39321s;
}

.raindrop:nth-child(227) {
  left: 23.33934px;
  top: 267.59616px;
  width: 9px;
  height: 10.53px;
  background-position: 2.91742% 50.48984%;
  animation-delay: 9.07296s;
}

.border:nth-child(227) {
  left: 25.33934px;
  top: 268.59616px;
  width: 5.6px;
  height: 10.53px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 9.07296s;
}

.raindrop:nth-child(228) {
  left: 656.94925px;
  top: 193.49333px;
  width: 7px;
  height: 7.49px;
  background-position: 82.11866% 36.50818%;
  animation-delay: 1.95847s;
}

.border:nth-child(228) {
  left: 658.94925px;
  top: 194.49333px;
  width: 4.8px;
  height: 7.49px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 1.95847s;
}

.raindrop:nth-child(229) {
  left: 391.57333px;
  top: 114.58745px;
  width: 12px;
  height: 13.08px;
  background-position: 48.94667% 21.62027%;
  animation-delay: 1.67001s;
}

.border:nth-child(229) {
  left: 393.57333px;
  top: 115.58745px;
  width: 6.8px;
  height: 13.08px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 1.67001s;
}

.raindrop:nth-child(230) {
  left: 514.95855px;
  top: 55.84923px;
  width: 6px;
  height: 6.96px;
  background-position: 64.36982% 10.53759%;
  animation-delay: 27.56631s;
}

.border:nth-child(230) {
  left: 516.95855px;
  top: 56.84923px;
  width: 4.4px;
  height: 6.96px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 27.56631s;
}

.raindrop:nth-child(231) {
  left: 636.55751px;
  top: 276.32042px;
  width: 7px;
  height: 7.14px;
  background-position: 79.56969% 52.13593%;
  animation-delay: 20.96716s;
}

.border:nth-child(231) {
  left: 638.55751px;
  top: 277.32042px;
  width: 4.8px;
  height: 7.14px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 20.96716s;
}

.raindrop:nth-child(232) {
  left: 411.65032px;
  top: 165.73493px;
  width: 7px;
  height: 8.05px;
  background-position: 51.45629% 31.27074%;
  animation-delay: 11.25927s;
}

.border:nth-child(232) {
  left: 413.65032px;
  top: 166.73493px;
  width: 4.8px;
  height: 8.05px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 11.25927s;
}

.raindrop:nth-child(233) {
  left: 327.76615px;
  top: 495.70908px;
  width: 11px;
  height: 11.44px;
  background-position: 40.97077% 93.53002%;
  animation-delay: 29.83825s;
}

.border:nth-child(233) {
  left: 329.76615px;
  top: 496.70908px;
  width: 6.4px;
  height: 11.44px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 29.83825s;
}

.raindrop:nth-child(234) {
  left: 207.01776px;
  top: 250.31296px;
  width: 6px;
  height: 6.36px;
  background-position: 25.87722% 47.22886%;
  animation-delay: 5.00071s;
}

.border:nth-child(234) {
  left: 209.01776px;
  top: 251.31296px;
  width: 4.4px;
  height: 6.36px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 5.00071s;
}

.raindrop:nth-child(235) {
  left: 700.30523px;
  top: 358.21141px;
  width: 6px;
  height: 6.42px;
  background-position: 87.53815% 67.58706%;
  animation-delay: 1.23984s;
}

.border:nth-child(235) {
  left: 702.30523px;
  top: 359.21141px;
  width: 4.4px;
  height: 6.42px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 1.23984s;
}

.raindrop:nth-child(236) {
  left: 33.80941px;
  top: 54.9167px;
  width: 9px;
  height: 9.18px;
  background-position: 4.22618% 10.36164%;
  animation-delay: 29.95394s;
}

.border:nth-child(236) {
  left: 35.80941px;
  top: 55.9167px;
  width: 5.6px;
  height: 9.18px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 29.95394s;
}

.raindrop:nth-child(237) {
  left: 435.19212px;
  top: 92.87154px;
  width: 5px;
  height: 5.15px;
  background-position: 54.39901% 17.52293%;
  animation-delay: 0.30648s;
}

.border:nth-child(237) {
  left: 437.19212px;
  top: 93.87154px;
  width: 4px;
  height: 5.15px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 0.30648s;
}

.raindrop:nth-child(238) {
  left: 511.15621px;
  top: 144.20149px;
  width: 10px;
  height: 10.5px;
  background-position: 63.89453% 27.20783%;
  animation-delay: 2.34186s;
}

.border:nth-child(238) {
  left: 513.15621px;
  top: 145.20149px;
  width: 6px;
  height: 10.5px;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.6);
  animation-delay: 2.34186s;
}

.raindrop:nth-child(239) {
  left: 62.28719px;
  top: 428.56392px;
  width: 8px;
  height: 9.36px;
  background-position: 7.7859% 80.86112%;
  animation-delay: 20.00611s;
}

.border:nth-child(239) {
  left: 64.28719px;
  top: 429.56392px;
  width: 5.2px;
  height: 9.36px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 20.00611s;
}

.raindrop:nth-child(240) {
  left: 409.2075px;
  top: 514.93454px;
  width: 9px;
  height: 9.18px;
  background-position: 51.15094% 97.15746%;
  animation-delay: 28.38789s;
}

.border:nth-child(240) {
  left: 411.2075px;
  top: 515.93454px;
  width: 5.6px;
  height: 9.18px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 28.38789s;
}

.raindrop:nth-child(241) {
  left: 759.01895px;
  top: 104.1578px;
  width: 12px;
  height: 14.04px;
  background-position: 94.87737% 19.65242%;
  animation-delay: 7.66001s;
}

.border:nth-child(241) {
  left: 761.01895px;
  top: 105.1578px;
  width: 6.8px;
  height: 14.04px;
  box-shadow: 0 0 0 2.6px rgba(0, 0, 0, 0.6);
  animation-delay: 7.66001s;
}

.raindrop:nth-child(242) {
  left: 336.54148px;
  top: 120.70597px;
  width: 5px;
  height: 5.3px;
  background-position: 42.06769% 22.77471%;
  animation-delay: 29.49114s;
}

.border:nth-child(242) {
  left: 338.54148px;
  top: 121.70597px;
  width: 4px;
  height: 5.3px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 29.49114s;
}

.raindrop:nth-child(243) {
  left: 78.46474px;
  top: 86.26086px;
  width: 9px;
  height: 9.45px;
  background-position: 9.80809% 16.27563%;
  animation-delay: 12.81605s;
}

.border:nth-child(243) {
  left: 80.46474px;
  top: 87.26086px;
  width: 5.6px;
  height: 9.45px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 12.81605s;
}

.raindrop:nth-child(244) {
  left: 601.8976px;
  top: 529.56759px;
  width: 5px;
  height: 5.55px;
  background-position: 75.2372% 99.91841%;
  animation-delay: 26.57965s;
}

.border:nth-child(244) {
  left: 603.8976px;
  top: 530.56759px;
  width: 4px;
  height: 5.55px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  animation-delay: 26.57965s;
}

.raindrop:nth-child(245) {
  left: 701.92932px;
  top: 54.85835px;
  width: 6px;
  height: 6.72px;
  background-position: 87.74116% 10.35063%;
  animation-delay: 23.8233s;
}

.border:nth-child(245) {
  left: 703.92932px;
  top: 55.85835px;
  width: 4.4px;
  height: 6.72px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 23.8233s;
}

.raindrop:nth-child(246) {
  left: 103.37008px;
  top: 243.34972px;
  width: 8px;
  height: 8.64px;
  background-position: 12.92126% 45.91504%;
  animation-delay: 23.13742s;
}

.border:nth-child(246) {
  left: 105.37008px;
  top: 244.34972px;
  width: 5.2px;
  height: 8.64px;
  box-shadow: 0 0 0 1.4px rgba(0, 0, 0, 0.6);
  animation-delay: 23.13742s;
}

.raindrop:nth-child(247) {
  left: 407.65317px;
  top: 522.35346px;
  width: 9px;
  height: 9.81px;
  background-position: 50.95665% 98.55726%;
  animation-delay: 29.91851s;
}

.border:nth-child(247) {
  left: 409.65317px;
  top: 523.35346px;
  width: 5.6px;
  height: 9.81px;
  box-shadow: 0 0 0 1.7px rgba(0, 0, 0, 0.6);
  animation-delay: 29.91851s;
}

.raindrop:nth-child(248) {
  left: 153.99652px;
  top: 43.9243px;
  width: 11px;
  height: 11.11px;
  background-position: 19.24956% 8.2876%;
  animation-delay: 17.91658s;
}

.border:nth-child(248) {
  left: 155.99652px;
  top: 44.9243px;
  width: 6.4px;
  height: 11.11px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 17.91658s;
}

.raindrop:nth-child(249) {
  left: 134.42672px;
  top: 492.32113px;
  width: 7px;
  height: 8.33px;
  background-position: 16.80334% 92.89078%;
  animation-delay: 18.57856s;
}

.border:nth-child(249) {
  left: 136.42672px;
  top: 493.32113px;
  width: 4.8px;
  height: 8.33px;
  box-shadow: 0 0 0 1.1px rgba(0, 0, 0, 0.6);
  animation-delay: 18.57856s;
}

.raindrop:nth-child(250) {
  left: 751.51954px;
  top: 362.77981px;
  width: 11px;
  height: 11.11px;
  background-position: 93.93994% 68.44902%;
  animation-delay: 0.14128s;
}

.border:nth-child(250) {
  left: 753.51954px;
  top: 363.77981px;
  width: 6.4px;
  height: 11.11px;
  box-shadow: 0 0 0 2.3px rgba(0, 0, 0, 0.6);
  animation-delay: 0.14128s;
}

.raindrop:nth-child(251) {
  left: 384.50279px;
  top: 128.27046px;
  width: 6px;
  height: 6.84px;
  background-position: 48.06285% 24.20197%;
  animation-delay: 22.88791s;
}

.border:nth-child(251) {
  left: 386.50279px;
  top: 129.27046px;
  width: 4.4px;
  height: 6.84px;
  box-shadow: 0 0 0 0.8px rgba(0, 0, 0, 0.6);
  animation-delay: 22.88791s;
}

.focus {
  display: none;
}

.focus + label {
  position: relative;
  z-index: 2;
  display: inline-block;
  background: #fff;
  text-transform: uppercase;
  font-size: 10pt;
  height: 30px;
  line-height: 30px;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  font-weight: bold;
  transition: color 100ms;
  border-right: 1px solid #ccc;
}

label:hover {
  color: #36518f;
}

.focus:last-child + label {
  border-bottom-right-radius: 5px;
}

.focus:checked + label {
  color: #0088ff;
}

#focusDrops:checked ~ .container .raindrops {
  -webkit-filter: blur(0px) brightness(1.3);
  filter: blur(0px) brightness(1.3);
}

#focusDrops:checked ~ .container .window {
  -webkit-filter: blur(8px);
  filter: blur(8px);
}

#focusBG:checked ~ .container .raindrops {
  -webkit-filter: blur(2px) brightness(1.3);
  filter: blur(2px) brightness(1.3);
}

#focusBG:checked ~ .container .window {
  -webkit-filter: blur(0);
  filter: blur(0);
}

#focusBoth:checked ~ .container .raindrops {
  -webkit-filter: blur(1px) brightness(1.3);
  filter: blur(1px) brightness(1.3);
}

#focusBoth:checked ~ .container .window {
  -webkit-filter: blur(4px);
  filter: blur(4px);
}

.disclaimer {
  color: white;
  font-size: 10pt;
  padding-left: 20px;
  z-index: 2;
  position: relative;
}
JS
// CSS Raindrops by Lucas Bebber
Host Instantly Drag and Drop Website Builder

 

Description

Pure CSS raindrops on a window. Probably works best on Webkit, not thoroughly tested.
Term
Mon, 11/27/2017 - 22:15

Related Codes

Pen ID
Pen ID
Pen ID