@charset "UTF-8";
:root {
  --flake1: "❆";
  --flake2: "❅";
  --flake3: "❆";
}

body {
  /* align-items: center;
  color: white;
  display: flex;
  justify-content: center; */
  height: 100vh;
  overflow: hidden;
  perspective: 2000px;
}

.snow {
  -webkit-animation: sway 20s infinite alternate ease-in-out;
          animation: sway 20s infinite alternate ease-in-out;
  position: absolute;
  transform-style: preserve-3d;
}

.flake {
  position: absolute;
  top: -100vh;
  transform-style: preserve-3d;
}
.flake:nth-child(1) {
  --duration: 9866ms;
  --delay: 4219ms;
  --startrotate: 101deg;
  --endrotate: 63deg;
  --opacity: 0.38;
  --R: 199;
  --G: 187;
  --B: 238;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -1vw;
  transform: translateZ(-53px);
}
.flake:nth-child(1) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(1) .shape::before {
  content: var(--flake3);
  font-size: 28px;
}
.flake:nth-child(2) {
  --duration: 9053ms;
  --delay: 7913ms;
  --startrotate: 2deg;
  --endrotate: 68deg;
  --opacity: 0.28;
  --R: 200;
  --G: 189;
  --B: 233;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 20vw;
  transform: translateZ(-78px);
}
.flake:nth-child(2) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(2) .shape::before {
  content: var(--flake1);
  font-size: 24px;
}
.flake:nth-child(3) {
  --duration: 9346ms;
  --delay: 2959ms;
  --startrotate: 152deg;
  --endrotate: 19deg;
  --opacity: 0.25;
  --R: 183;
  --G: 178;
  --B: 253;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -33vw;
  transform: translateZ(422px);
}
.flake:nth-child(3) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(3) .shape::before {
  content: var(--flake1);
  font-size: 32px;
}
.flake:nth-child(4) {
  --duration: 8667ms;
  --delay: 5548ms;
  --startrotate: 158deg;
  --endrotate: 345deg;
  --opacity: 0.24;
  --R: 188;
  --G: 181;
  --B: 218;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -35vw;
  transform: translateZ(67px);
}
.flake:nth-child(4) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(4) .shape::before {
  content: var(--flake3);
  font-size: 22px;
}
.flake:nth-child(5) {
  --duration: 8468ms;
  --delay: 2696ms;
  --startrotate: 357deg;
  --endrotate: 350deg;
  --opacity: 0.35;
  --R: 182;
  --G: 190;
  --B: 231;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -23vw;
  transform: translateZ(-268px);
}
.flake:nth-child(5) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(5) .shape::before {
  content: var(--flake2);
  font-size: 19px;
}
.flake:nth-child(6) {
  --duration: 9781ms;
  --delay: 6954ms;
  --startrotate: 241deg;
  --endrotate: 305deg;
  --opacity: 0.39;
  --R: 168;
  --G: 190;
  --B: 228;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -2vw;
  transform: translateZ(139px);
}
.flake:nth-child(6) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(6) .shape::before {
  content: var(--flake3);
  font-size: 22px;
}
.flake:nth-child(7) {
  --duration: 9155ms;
  --delay: 9751ms;
  --startrotate: 200deg;
  --endrotate: 323deg;
  --opacity: 0.37;
  --R: 187;
  --G: 187;
  --B: 233;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -18vw;
  transform: translateZ(-371px);
}
.flake:nth-child(7) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(7) .shape::before {
  content: var(--flake2);
  font-size: 23px;
}
.flake:nth-child(8) {
  --duration: 9430ms;
  --delay: 9038ms;
  --startrotate: 42deg;
  --endrotate: 36deg;
  --opacity: 0.3;
  --R: 188;
  --G: 178;
  --B: 235;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 5vw;
  transform: translateZ(-433px);
}
.flake:nth-child(8) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(8) .shape::before {
  content: var(--flake1);
  font-size: 32px;
}
.flake:nth-child(9) {
  --duration: 9162ms;
  --delay: 5860ms;
  --startrotate: 287deg;
  --endrotate: 187deg;
  --opacity: 0.38;
  --R: 182;
  --G: 175;
  --B: 237;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 9vw;
  transform: translateZ(-173px);
}
.flake:nth-child(9) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(9) .shape::before {
  content: var(--flake1);
  font-size: 21px;
}
.flake:nth-child(10) {
  --duration: 9803ms;
  --delay: 3302ms;
  --startrotate: 318deg;
  --endrotate: 143deg;
  --opacity: 0.24;
  --R: 173;
  --G: 190;
  --B: 240;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -12vw;
  transform: translateZ(30px);
}
.flake:nth-child(10) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(10) .shape::before {
  content: var(--flake3);
  font-size: 32px;
}
.flake:nth-child(11) {
  --duration: 8603ms;
  --delay: 4170ms;
  --startrotate: 11deg;
  --endrotate: 197deg;
  --opacity: 0.35;
  --R: 178;
  --G: 184;
  --B: 232;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 1vw;
  transform: translateZ(25px);
}
.flake:nth-child(11) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(11) .shape::before {
  content: var(--flake3);
  font-size: 17px;
}
.flake:nth-child(12) {
  --duration: 8072ms;
  --delay: 3019ms;
  --startrotate: 105deg;
  --endrotate: 64deg;
  --opacity: 0.39;
  --R: 201;
  --G: 167;
  --B: 249;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 9vw;
  transform: translateZ(383px);
}
.flake:nth-child(12) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(12) .shape::before {
  content: var(--flake1);
  font-size: 21px;
}
.flake:nth-child(13) {
  --duration: 9630ms;
  --delay: 2009ms;
  --startrotate: 81deg;
  --endrotate: 65deg;
  --opacity: 0.23;
  --R: 191;
  --G: 182;
  --B: 237;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -12vw;
  transform: translateZ(389px);
}
.flake:nth-child(13) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(13) .shape::before {
  content: var(--flake2);
  font-size: 28px;
}
.flake:nth-child(14) {
  --duration: 9514ms;
  --delay: 3273ms;
  --startrotate: 239deg;
  --endrotate: 239deg;
  --opacity: 0.4;
  --R: 167;
  --G: 192;
  --B: 239;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 11vw;
  transform: translateZ(348px);
}
.flake:nth-child(14) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(14) .shape::before {
  content: var(--flake1);
  font-size: 30px;
}
.flake:nth-child(15) {
  --duration: 8847ms;
  --delay: 3989ms;
  --startrotate: 106deg;
  --endrotate: 117deg;
  --opacity: 0.36;
  --R: 189;
  --G: 176;
  --B: 247;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 11vw;
  transform: translateZ(171px);
}
.flake:nth-child(15) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(15) .shape::before {
  content: var(--flake3);
  font-size: 20px;
}
.flake:nth-child(16) {
  --duration: 8324ms;
  --delay: 6504ms;
  --startrotate: 204deg;
  --endrotate: 226deg;
  --opacity: 0.26;
  --R: 187;
  --G: 178;
  --B: 221;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 17vw;
  transform: translateZ(225px);
}
.flake:nth-child(16) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(16) .shape::before {
  content: var(--flake3);
  font-size: 20px;
}
.flake:nth-child(17) {
  --duration: 9378ms;
  --delay: 6990ms;
  --startrotate: 31deg;
  --endrotate: 151deg;
  --opacity: 0.23;
  --R: 204;
  --G: 183;
  --B: 251;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 0vw;
  transform: translateZ(168px);
}
.flake:nth-child(17) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(17) .shape::before {
  content: var(--flake3);
  font-size: 23px;
}
.flake:nth-child(18) {
  --duration: 9740ms;
  --delay: 4639ms;
  --startrotate: 334deg;
  --endrotate: 310deg;
  --opacity: 0.38;
  --R: 180;
  --G: 202;
  --B: 236;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 19vw;
  transform: translateZ(312px);
}
.flake:nth-child(18) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(18) .shape::before {
  content: var(--flake2);
  font-size: 25px;
}
.flake:nth-child(19) {
  --duration: 9208ms;
  --delay: 4075ms;
  --startrotate: 135deg;
  --endrotate: 246deg;
  --opacity: 0.39;
  --R: 167;
  --G: 197;
  --B: 221;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 19vw;
  transform: translateZ(369px);
}
.flake:nth-child(19) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(19) .shape::before {
  content: var(--flake3);
  font-size: 32px;
}
.flake:nth-child(20) {
  --duration: 9056ms;
  --delay: 5340ms;
  --startrotate: 103deg;
  --endrotate: 20deg;
  --opacity: 0.35;
  --R: 202;
  --G: 170;
  --B: 217;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 4vw;
  transform: translateZ(16px);
}
.flake:nth-child(20) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(20) .shape::before {
  content: var(--flake1);
  font-size: 21px;
}
.flake:nth-child(21) {
  --duration: 8390ms;
  --delay: 8172ms;
  --startrotate: 14deg;
  --endrotate: 131deg;
  --opacity: 0.36;
  --R: 167;
  --G: 184;
  --B: 231;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -13vw;
  transform: translateZ(-142px);
}
.flake:nth-child(21) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(21) .shape::before {
  content: var(--flake3);
  font-size: 25px;
}
.flake:nth-child(22) {
  --duration: 9074ms;
  --delay: 4305ms;
  --startrotate: 309deg;
  --endrotate: 120deg;
  --opacity: 0.31;
  --R: 204;
  --G: 183;
  --B: 250;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 16vw;
  transform: translateZ(-87px);
}
.flake:nth-child(22) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(22) .shape::before {
  content: var(--flake1);
  font-size: 25px;
}
.flake:nth-child(23) {
  --duration: 8328ms;
  --delay: 5249ms;
  --startrotate: 274deg;
  --endrotate: 26deg;
  --opacity: 0.32;
  --R: 180;
  --G: 191;
  --B: 236;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -2vw;
  transform: translateZ(-235px);
}
.flake:nth-child(23) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(23) .shape::before {
  content: var(--flake1);
  font-size: 32px;
}
.flake:nth-child(24) {
  --duration: 9962ms;
  --delay: 8593ms;
  --startrotate: 173deg;
  --endrotate: 40deg;
  --opacity: 0.3;
  --R: 199;
  --G: 185;
  --B: 231;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 31vw;
  transform: translateZ(275px);
}
.flake:nth-child(24) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(24) .shape::before {
  content: var(--flake3);
  font-size: 29px;
}
.flake:nth-child(25) {
  --duration: 9092ms;
  --delay: 4567ms;
  --startrotate: 338deg;
  --endrotate: 281deg;
  --opacity: 0.34;
  --R: 200;
  --G: 197;
  --B: 254;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -6vw;
  transform: translateZ(328px);
}
.flake:nth-child(25) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(25) .shape::before {
  content: var(--flake2);
  font-size: 30px;
}
.flake:nth-child(26) {
  --duration: 8091ms;
  --delay: 9911ms;
  --startrotate: 73deg;
  --endrotate: 93deg;
  --opacity: 0.23;
  --R: 179;
  --G: 196;
  --B: 229;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -31vw;
  transform: translateZ(424px);
}
.flake:nth-child(26) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(26) .shape::before {
  content: var(--flake3);
  font-size: 28px;
}
.flake:nth-child(27) {
  --duration: 9523ms;
  --delay: 5698ms;
  --startrotate: 311deg;
  --endrotate: 240deg;
  --opacity: 0.39;
  --R: 182;
  --G: 193;
  --B: 242;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -22vw;
  transform: translateZ(-313px);
}
.flake:nth-child(27) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(27) .shape::before {
  content: var(--flake3);
  font-size: 21px;
}
.flake:nth-child(28) {
  --duration: 8068ms;
  --delay: 9720ms;
  --startrotate: 311deg;
  --endrotate: 346deg;
  --opacity: 0.27;
  --R: 189;
  --G: 191;
  --B: 227;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 20vw;
  transform: translateZ(-406px);
}
.flake:nth-child(28) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(28) .shape::before {
  content: var(--flake3);
  font-size: 26px;
}
.flake:nth-child(29) {
  --duration: 9601ms;
  --delay: 4403ms;
  --startrotate: 176deg;
  --endrotate: 337deg;
  --opacity: 0.36;
  --R: 204;
  --G: 181;
  --B: 235;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -33vw;
  transform: translateZ(76px);
}
.flake:nth-child(29) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(29) .shape::before {
  content: var(--flake2);
  font-size: 29px;
}
.flake:nth-child(30) {
  --duration: 9335ms;
  --delay: 7605ms;
  --startrotate: 105deg;
  --endrotate: 207deg;
  --opacity: 0.35;
  --R: 198;
  --G: 195;
  --B: 239;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -14vw;
  transform: translateZ(-341px);
}
.flake:nth-child(30) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(30) .shape::before {
  content: var(--flake3);
  font-size: 28px;
}
.flake:nth-child(31) {
  --duration: 8142ms;
  --delay: 2303ms;
  --startrotate: 264deg;
  --endrotate: 280deg;
  --opacity: 0.28;
  --R: 185;
  --G: 184;
  --B: 220;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 16vw;
  transform: translateZ(-238px);
}
.flake:nth-child(31) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(31) .shape::before {
  content: var(--flake1);
  font-size: 17px;
}
.flake:nth-child(32) {
  --duration: 8679ms;
  --delay: 6415ms;
  --startrotate: 272deg;
  --endrotate: 226deg;
  --opacity: 0.23;
  --R: 203;
  --G: 190;
  --B: 216;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 8vw;
  transform: translateZ(150px);
}
.flake:nth-child(32) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(32) .shape::before {
  content: var(--flake2);
  font-size: 31px;
}
.flake:nth-child(33) {
  --duration: 9561ms;
  --delay: 9905ms;
  --startrotate: 178deg;
  --endrotate: 354deg;
  --opacity: 0.39;
  --R: 199;
  --G: 189;
  --B: 246;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -16vw;
  transform: translateZ(-280px);
}
.flake:nth-child(33) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(33) .shape::before {
  content: var(--flake2);
  font-size: 24px;
}
.flake:nth-child(34) {
  --duration: 9182ms;
  --delay: 5122ms;
  --startrotate: 6deg;
  --endrotate: 244deg;
  --opacity: 0.21;
  --R: 198;
  --G: 167;
  --B: 222;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -35vw;
  transform: translateZ(451px);
}
.flake:nth-child(34) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(34) .shape::before {
  content: var(--flake3);
  font-size: 21px;
}
.flake:nth-child(35) {
  --duration: 8229ms;
  --delay: 7141ms;
  --startrotate: 192deg;
  --endrotate: 1deg;
  --opacity: 0.23;
  --R: 166;
  --G: 195;
  --B: 255;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -21vw;
  transform: translateZ(-441px);
}
.flake:nth-child(35) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(35) .shape::before {
  content: var(--flake3);
  font-size: 23px;
}
.flake:nth-child(36) {
  --duration: 9596ms;
  --delay: 4370ms;
  --startrotate: 261deg;
  --endrotate: 163deg;
  --opacity: 0.32;
  --R: 187;
  --G: 185;
  --B: 228;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 16vw;
  transform: translateZ(-217px);
}
.flake:nth-child(36) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(36) .shape::before {
  content: var(--flake2);
  font-size: 27px;
}
.flake:nth-child(37) {
  --duration: 8669ms;
  --delay: 2632ms;
  --startrotate: 118deg;
  --endrotate: 136deg;
  --opacity: 0.23;
  --R: 195;
  --G: 173;
  --B: 230;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 8vw;
  transform: translateZ(-28px);
}
.flake:nth-child(37) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(37) .shape::before {
  content: var(--flake2);
  font-size: 23px;
}
.flake:nth-child(38) {
  --duration: 8779ms;
  --delay: 5249ms;
  --startrotate: 191deg;
  --endrotate: 16deg;
  --opacity: 0.29;
  --R: 171;
  --G: 174;
  --B: 237;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 40vw;
  transform: translateZ(-77px);
}
.flake:nth-child(38) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(38) .shape::before {
  content: var(--flake1);
  font-size: 27px;
}
.flake:nth-child(39) {
  --duration: 9381ms;
  --delay: 4247ms;
  --startrotate: 331deg;
  --endrotate: 305deg;
  --opacity: 0.27;
  --R: 171;
  --G: 180;
  --B: 230;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: 10vw;
  transform: translateZ(-122px);
}
.flake:nth-child(39) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(39) .shape::before {
  content: var(--flake3);
  font-size: 31px;
}
.flake:nth-child(40) {
  --duration: 8439ms;
  --delay: 9987ms;
  --startrotate: 223deg;
  --endrotate: 295deg;
  --opacity: 0.27;
  --R: 197;
  --G: 194;
  --B: 250;
  -webkit-animation: fall var(--duration) var(--delay) linear infinite;
          animation: fall var(--duration) var(--delay) linear infinite;
  left: -12vw;
  transform: translateZ(355px);
}
.flake:nth-child(40) .shape {
  -webkit-animation: rotate var(--duration) var(--delay) linear infinite;
          animation: rotate var(--duration) var(--delay) linear infinite;
  color: rgba(var(--R), var(--G), var(--B), var(--opacity));
  transform: rotate(var(--startrotate));
}
.flake:nth-child(40) .shape::before {
  content: var(--flake1);
  font-size: 27px;
}

@-webkit-keyframes fall {
  0% {
    top: -100vh;
  }
  100% {
    top: 100vh;
  }
}

@keyframes fall {
  0% {
    top: -100vh;
  }
  100% {
    top: 100vh;
  }
}
@-webkit-keyframes sway {
  0% {
    left: 40%;
  }
  100% {
    left: 60%;
  }
}
@keyframes sway {
  0% {
    left: 40%;
  }
  100% {
    left: 60%;
  }
}
@-webkit-keyframes rotate {
  to {
    transform: rotate(var(--endrotate));
  }
}
@keyframes rotate {
  to {
    transform: rotate(var(--endrotate));
  }
}