body {
  background: #fff;
  height: 100vh;
  overflow: hidden;
  display: flex;
  font-family: "Anton", sans-serif;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  perspective: 1300px;
}
 
#chocolate_rains {
  transform: rotateX(-15deg);
  position: absolute;
  transform-style: preserve-3d;
} 

.heart .ring {
  width: 300px;
  height: 300px;
  border-radius: 100%;
  opacity: 0;
  border: 1px solid red;
  position: absolute;
  transform-style: preserve-3d;
}
.heart .left {
  left: -20px;
  width: 20px;
  height: 20px;
  background: #c80000;
  border-radius: 100%;
  transform-origin: 100% 0;
  position: absolute;
  transform-style: preserve-3d;
}
.heart .left::before {
  content: "";
  position: absolute;
  top: 10px;
  width: 20px;
  height: 25px;
  background: #c80000;
  border-radius: 0 0 0 100%;
}
.heart .right {
  width: 20px;
  height: 20px;
  background: #c80000;
  border-radius: 100%;
  transform-origin: 0 0;
}
.heart .right::before {
  content: "";
  position: absolute;
  top: 10px;
  width: 20px;
  height: 25px;
  background: #c80000;
  border-radius: 0 0 100% 0;
  position: absolute;
  transform-style: preserve-3d;
}
.heart .movable {
  opacity: 0;
  position: absolute;
  transform-style: preserve-3d;
}
.heart .reverse {
  transform: translateY(70px) rotateZ(180deg);
  opacity: 0.1;
  position: absolute;
  transform-style: preserve-3d;
}
.heart .reverse .left, .heart .reverse .right {
  opacity: 0.5;
  position: absolute;
  transform-style: preserve-3d;
}
.heart:nth-child(1) {
  transform: translateX(-148px) translateZ(668px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(1) .movable {
  -webkit-animation: drop 5000ms -848ms linear infinite;
          animation: drop 5000ms -848ms linear infinite;
}
.heart:nth-child(1) .ring {
  -webkit-animation: wave 5000ms 3052ms ease-out infinite;
          animation: wave 5000ms 3052ms ease-out infinite;
}
.heart:nth-child(1) .inner {
  -webkit-animation: rotation 3600ms linear infinite;
          animation: rotation 3600ms linear infinite;
}
.heart:nth-child(2) {
  transform: translateX(194px) translateZ(-733px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(2) .movable {
  -webkit-animation: drop 5000ms -1856ms linear infinite;
          animation: drop 5000ms -1856ms linear infinite;
}
.heart:nth-child(2) .ring {
  -webkit-animation: wave 5000ms 2044ms ease-out infinite;
          animation: wave 5000ms 2044ms ease-out infinite;
}
.heart:nth-child(2) .inner {
  -webkit-animation: rotation 2554ms linear infinite;
          animation: rotation 2554ms linear infinite;
}
.heart:nth-child(3) {
  transform: translateX(-304px) translateZ(-70px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(3) .movable {
  -webkit-animation: drop 5000ms 214ms linear infinite;
          animation: drop 5000ms 214ms linear infinite;
}
.heart:nth-child(3) .ring {
  -webkit-animation: wave 5000ms 4114ms ease-out infinite;
          animation: wave 5000ms 4114ms ease-out infinite;
}
.heart:nth-child(3) .inner {
  -webkit-animation: rotation 3331ms linear infinite;
          animation: rotation 3331ms linear infinite;
}
.heart:nth-child(4) {
  transform: translateX(-169px) translateZ(550px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(4) .movable {
  -webkit-animation: drop 5000ms 1811ms linear infinite;
          animation: drop 5000ms 1811ms linear infinite;
}
.heart:nth-child(4) .ring {
  -webkit-animation: wave 5000ms 5711ms ease-out infinite;
          animation: wave 5000ms 5711ms ease-out infinite;
}
.heart:nth-child(4) .inner {
  -webkit-animation: rotation 2244ms linear infinite;
          animation: rotation 2244ms linear infinite;
}
.heart:nth-child(5) {
  transform: translateX(335px) translateZ(-244px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(5) .movable {
  -webkit-animation: drop 5000ms 286ms linear infinite;
          animation: drop 5000ms 286ms linear infinite;
}
.heart:nth-child(5) .ring {
  -webkit-animation: wave 5000ms 4186ms ease-out infinite;
          animation: wave 5000ms 4186ms ease-out infinite;
}
.heart:nth-child(5) .inner {
  -webkit-animation: rotation 4124ms linear infinite;
          animation: rotation 4124ms linear infinite;
}
.heart:nth-child(6) {
  transform: translateX(-483px) translateZ(730px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(6) .movable {
  -webkit-animation: drop 5000ms 137ms linear infinite;
          animation: drop 5000ms 137ms linear infinite;
}
.heart:nth-child(6) .ring {
  -webkit-animation: wave 5000ms 4037ms ease-out infinite;
          animation: wave 5000ms 4037ms ease-out infinite;
}
.heart:nth-child(6) .inner {
  -webkit-animation: rotation 3958ms linear infinite;
          animation: rotation 3958ms linear infinite;
}
.heart:nth-child(7) {
  transform: translateX(221px) translateZ(257px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(7) .movable {
  -webkit-animation: drop 5000ms -1994ms linear infinite;
          animation: drop 5000ms -1994ms linear infinite;
}
.heart:nth-child(7) .ring {
  -webkit-animation: wave 5000ms 1906ms ease-out infinite;
          animation: wave 5000ms 1906ms ease-out infinite;
}
.heart:nth-child(7) .inner {
  -webkit-animation: rotation 2709ms linear infinite;
          animation: rotation 2709ms linear infinite;
}
.heart:nth-child(8) {
  transform: translateX(-244px) translateZ(464px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(8) .movable {
  -webkit-animation: drop 5000ms 611ms linear infinite;
          animation: drop 5000ms 611ms linear infinite;
}
.heart:nth-child(8) .ring {
  -webkit-animation: wave 5000ms 4511ms ease-out infinite;
          animation: wave 5000ms 4511ms ease-out infinite;
}
.heart:nth-child(8) .inner {
  -webkit-animation: rotation 4954ms linear infinite;
          animation: rotation 4954ms linear infinite;
}
.heart:nth-child(9) {
  transform: translateX(476px) translateZ(-664px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(9) .movable {
  -webkit-animation: drop 5000ms -1202ms linear infinite;
          animation: drop 5000ms -1202ms linear infinite;
}
.heart:nth-child(9) .ring {
  -webkit-animation: wave 5000ms 2698ms ease-out infinite;
          animation: wave 5000ms 2698ms ease-out infinite;
}
.heart:nth-child(9) .inner {
  -webkit-animation: rotation 2981ms linear infinite;
          animation: rotation 2981ms linear infinite;
}
.heart:nth-child(10) {
  transform: translateX(-16px) translateZ(368px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(10) .movable {
  -webkit-animation: drop 5000ms -2350ms linear infinite;
          animation: drop 5000ms -2350ms linear infinite;
}
.heart:nth-child(10) .ring {
  -webkit-animation: wave 5000ms 1550ms ease-out infinite;
          animation: wave 5000ms 1550ms ease-out infinite;
}
.heart:nth-child(10) .inner {
  -webkit-animation: rotation 2938ms linear infinite;
          animation: rotation 2938ms linear infinite;
}
.heart:nth-child(11) {
  transform: translateX(449px) translateZ(-365px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(11) .movable {
  -webkit-animation: drop 5000ms -112ms linear infinite;
          animation: drop 5000ms -112ms linear infinite;
}
.heart:nth-child(11) .ring {
  -webkit-animation: wave 5000ms 3788ms ease-out infinite;
          animation: wave 5000ms 3788ms ease-out infinite;
}
.heart:nth-child(11) .inner {
  -webkit-animation: rotation 3700ms linear infinite;
          animation: rotation 3700ms linear infinite;
}
.heart:nth-child(12) {
  transform: translateX(-141px) translateZ(90px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(12) .movable {
  -webkit-animation: drop 5000ms -302ms linear infinite;
          animation: drop 5000ms -302ms linear infinite;
}
.heart:nth-child(12) .ring {
  -webkit-animation: wave 5000ms 3598ms ease-out infinite;
          animation: wave 5000ms 3598ms ease-out infinite;
}
.heart:nth-child(12) .inner {
  -webkit-animation: rotation 3796ms linear infinite;
          animation: rotation 3796ms linear infinite;
}
.heart:nth-child(13) {
  transform: translateX(399px) translateZ(-271px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(13) .movable {
  -webkit-animation: drop 5000ms 684ms linear infinite;
          animation: drop 5000ms 684ms linear infinite;
}
.heart:nth-child(13) .ring {
  -webkit-animation: wave 5000ms 4584ms ease-out infinite;
          animation: wave 5000ms 4584ms ease-out infinite;
}
.heart:nth-child(13) .inner {
  -webkit-animation: rotation 2678ms linear infinite;
          animation: rotation 2678ms linear infinite;
}
.heart:nth-child(14) {
  transform: translateX(-21px) translateZ(518px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(14) .movable {
  -webkit-animation: drop 5000ms 1427ms linear infinite;
          animation: drop 5000ms 1427ms linear infinite;
}
.heart:nth-child(14) .ring {
  -webkit-animation: wave 5000ms 5327ms ease-out infinite;
          animation: wave 5000ms 5327ms ease-out infinite;
}
.heart:nth-child(14) .inner {
  -webkit-animation: rotation 3168ms linear infinite;
          animation: rotation 3168ms linear infinite;
}
.heart:nth-child(15) {
  transform: translateX(404px) translateZ(-281px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(15) .movable {
  -webkit-animation: drop 5000ms 1775ms linear infinite;
          animation: drop 5000ms 1775ms linear infinite;
}
.heart:nth-child(15) .ring {
  -webkit-animation: wave 5000ms 5675ms ease-out infinite;
          animation: wave 5000ms 5675ms ease-out infinite;
}
.heart:nth-child(15) .inner {
  -webkit-animation: rotation 3776ms linear infinite;
          animation: rotation 3776ms linear infinite;
}
.heart:nth-child(16) {
  transform: translateX(-123px) translateZ(-250px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(16) .movable {
  -webkit-animation: drop 5000ms 1485ms linear infinite;
          animation: drop 5000ms 1485ms linear infinite;
}
.heart:nth-child(16) .ring {
  -webkit-animation: wave 5000ms 5385ms ease-out infinite;
          animation: wave 5000ms 5385ms ease-out infinite;
}
.heart:nth-child(16) .inner {
  -webkit-animation: rotation 2356ms linear infinite;
          animation: rotation 2356ms linear infinite;
}
.heart:nth-child(17) {
  transform: translateX(-138px) translateZ(494px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(17) .movable {
  -webkit-animation: drop 5000ms -1428ms linear infinite;
          animation: drop 5000ms -1428ms linear infinite;
}
.heart:nth-child(17) .ring {
  -webkit-animation: wave 5000ms 2472ms ease-out infinite;
          animation: wave 5000ms 2472ms ease-out infinite;
}
.heart:nth-child(17) .inner {
  -webkit-animation: rotation 2971ms linear infinite;
          animation: rotation 2971ms linear infinite;
}
.heart:nth-child(18) {
  transform: translateX(-384px) translateZ(58px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(18) .movable {
  -webkit-animation: drop 5000ms 150ms linear infinite;
          animation: drop 5000ms 150ms linear infinite;
}
.heart:nth-child(18) .ring {
  -webkit-animation: wave 5000ms 4050ms ease-out infinite;
          animation: wave 5000ms 4050ms ease-out infinite;
}
.heart:nth-child(18) .inner {
  -webkit-animation: rotation 3864ms linear infinite;
          animation: rotation 3864ms linear infinite;
}
.heart:nth-child(19) {
  transform: translateX(255px) translateZ(-367px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(19) .movable {
  -webkit-animation: drop 5000ms -738ms linear infinite;
          animation: drop 5000ms -738ms linear infinite;
}
.heart:nth-child(19) .ring {
  -webkit-animation: wave 5000ms 3162ms ease-out infinite;
          animation: wave 5000ms 3162ms ease-out infinite;
}
.heart:nth-child(19) .inner {
  -webkit-animation: rotation 2655ms linear infinite;
          animation: rotation 2655ms linear infinite;
}
.heart:nth-child(20) {
  transform: translateX(-108px) translateZ(-507px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(20) .movable {
  -webkit-animation: drop 5000ms 1240ms linear infinite;
          animation: drop 5000ms 1240ms linear infinite;
}
.heart:nth-child(20) .ring {
  -webkit-animation: wave 5000ms 5140ms ease-out infinite;
          animation: wave 5000ms 5140ms ease-out infinite;
}
.heart:nth-child(20) .inner {
  -webkit-animation: rotation 4958ms linear infinite;
          animation: rotation 4958ms linear infinite;
}
.heart:nth-child(21) {
  transform: translateX(-91px) translateZ(-86px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(21) .movable {
  -webkit-animation: drop 5000ms 1642ms linear infinite;
          animation: drop 5000ms 1642ms linear infinite;
}
.heart:nth-child(21) .ring {
  -webkit-animation: wave 5000ms 5542ms ease-out infinite;
          animation: wave 5000ms 5542ms ease-out infinite;
}
.heart:nth-child(21) .inner {
  -webkit-animation: rotation 4353ms linear infinite;
          animation: rotation 4353ms linear infinite;
}
.heart:nth-child(22) {
  transform: translateX(-117px) translateZ(532px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(22) .movable {
  -webkit-animation: drop 5000ms 1773ms linear infinite;
          animation: drop 5000ms 1773ms linear infinite;
}
.heart:nth-child(22) .ring {
  -webkit-animation: wave 5000ms 5673ms ease-out infinite;
          animation: wave 5000ms 5673ms ease-out infinite;
}
.heart:nth-child(22) .inner {
  -webkit-animation: rotation 3589ms linear infinite;
          animation: rotation 3589ms linear infinite;
}
.heart:nth-child(23) {
  transform: translateX(320px) translateZ(140px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(23) .movable {
  -webkit-animation: drop 5000ms 382ms linear infinite;
          animation: drop 5000ms 382ms linear infinite;
}
.heart:nth-child(23) .ring {
  -webkit-animation: wave 5000ms 4282ms ease-out infinite;
          animation: wave 5000ms 4282ms ease-out infinite;
}
.heart:nth-child(23) .inner {
  -webkit-animation: rotation 2377ms linear infinite;
          animation: rotation 2377ms linear infinite;
}
.heart:nth-child(24) {
  transform: translateX(-469px) translateZ(377px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(24) .movable {
  -webkit-animation: drop 5000ms -1573ms linear infinite;
          animation: drop 5000ms -1573ms linear infinite;
}
.heart:nth-child(24) .ring {
  -webkit-animation: wave 5000ms 2327ms ease-out infinite;
          animation: wave 5000ms 2327ms ease-out infinite;
}
.heart:nth-child(24) .inner {
  -webkit-animation: rotation 2853ms linear infinite;
          animation: rotation 2853ms linear infinite;
}
.heart:nth-child(25) {
  transform: translateX(-128px) translateZ(148px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(25) .movable {
  -webkit-animation: drop 5000ms 1066ms linear infinite;
          animation: drop 5000ms 1066ms linear infinite;
}
.heart:nth-child(25) .ring {
  -webkit-animation: wave 5000ms 4966ms ease-out infinite;
          animation: wave 5000ms 4966ms ease-out infinite;
}
.heart:nth-child(25) .inner {
  -webkit-animation: rotation 3535ms linear infinite;
          animation: rotation 3535ms linear infinite;
}
.heart:nth-child(26) {
  transform: translateX(-310px) translateZ(632px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(26) .movable {
  -webkit-animation: drop 5000ms -487ms linear infinite;
          animation: drop 5000ms -487ms linear infinite;
}
.heart:nth-child(26) .ring {
  -webkit-animation: wave 5000ms 3413ms ease-out infinite;
          animation: wave 5000ms 3413ms ease-out infinite;
}
.heart:nth-child(26) .inner {
  -webkit-animation: rotation 2973ms linear infinite;
          animation: rotation 2973ms linear infinite;
}
.heart:nth-child(27) {
  transform: translateX(-214px) translateZ(700px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(27) .movable {
  -webkit-animation: drop 5000ms -1271ms linear infinite;
          animation: drop 5000ms -1271ms linear infinite;
}
.heart:nth-child(27) .ring {
  -webkit-animation: wave 5000ms 2629ms ease-out infinite;
          animation: wave 5000ms 2629ms ease-out infinite;
}
.heart:nth-child(27) .inner {
  -webkit-animation: rotation 4565ms linear infinite;
          animation: rotation 4565ms linear infinite;
}
.heart:nth-child(28) {
  transform: translateX(361px) translateZ(311px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(28) .movable {
  -webkit-animation: drop 5000ms -1536ms linear infinite;
          animation: drop 5000ms -1536ms linear infinite;
}
.heart:nth-child(28) .ring {
  -webkit-animation: wave 5000ms 2364ms ease-out infinite;
          animation: wave 5000ms 2364ms ease-out infinite;
}
.heart:nth-child(28) .inner {
  -webkit-animation: rotation 3734ms linear infinite;
          animation: rotation 3734ms linear infinite;
}
.heart:nth-child(29) {
  transform: translateX(116px) translateZ(-484px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(29) .movable {
  -webkit-animation: drop 5000ms 201ms linear infinite;
          animation: drop 5000ms 201ms linear infinite;
}
.heart:nth-child(29) .ring {
  -webkit-animation: wave 5000ms 4101ms ease-out infinite;
          animation: wave 5000ms 4101ms ease-out infinite;
}
.heart:nth-child(29) .inner {
  -webkit-animation: rotation 3610ms linear infinite;
          animation: rotation 3610ms linear infinite;
}
.heart:nth-child(30) {
  transform: translateX(475px) translateZ(-718px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(30) .movable {
  -webkit-animation: drop 5000ms -681ms linear infinite;
          animation: drop 5000ms -681ms linear infinite;
}
.heart:nth-child(30) .ring {
  -webkit-animation: wave 5000ms 3219ms ease-out infinite;
          animation: wave 5000ms 3219ms ease-out infinite;
}
.heart:nth-child(30) .inner {
  -webkit-animation: rotation 2545ms linear infinite;
          animation: rotation 2545ms linear infinite;
}
@-webkit-keyframes blur {
  0% {
    filter: blur(20px) grayscale(150%);
  }
  100% {
    filter: blur(10px) grayscale(50%);
  }
}
@keyframes blur {
  0% {
    filter: blur(20px) grayscale(150%);
  }
  100% {
    filter: blur(10px) grayscale(50%);
  }
}
@-webkit-keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotation {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@-webkit-keyframes drop {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
    opacity: 3;
  }
  100% {
    transform: translateY(-40px);
    opacity: 0;
  }
}
@keyframes drop {
  0% {
    transform: translateY(-1000px);
    opacity: 0;
  }
  80% {
    transform: translateY(0);
    opacity: 3;
  }
  100% {
    transform: translateY(-40px);
    opacity: 0;
  }
}
@-webkit-keyframes wave {
  0% {
    transform: translate(-50%, -50%) rotateX(90deg) scale(0) translateZ(-37px);
    opacity: 2;
  }
  100% {
    transform: translate(-50%, -50%) rotateX(90deg) scale(2) translateZ(-37px);
    opacity: 0;
  }
}
@keyframes wave {
  0% {
    transform: translate(-50%, -50%) rotateX(90deg) scale(0) translateZ(-37px);
    opacity: 2;
  }
  100% {
    transform: translate(-50%, -50%) rotateX(90deg) scale(2) translateZ(-37px);
    opacity: 0;
  }
}
@-webkit-keyframes wing {
  0% {
    transform: rotateY(70deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}
@keyframes wing {
  0% {
    transform: rotateY(70deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}