#valentine {
    width          : 100vw;
    height         : 100vh;
    display        : flex;
    justify-content: center;
    align-items    : center;
    perspective    : 1300px;
    pointer-events: none;
}

div {
    position       : absolute;
    transform-style: preserve-3d;
}

#chocolate_rains {
    transform: rotateX(-15deg);
}

.heart .ring {
    width        : 300px;
    height       : 300px;
    border-radius: 100%;
    opacity      : 0;
    border       : 1px solid red;
}

.heart .left {
    left            : -20px;
    width           : 20px;
    height          : 20px;
    background      : #c80000;
    border-radius   : 100%;
    transform-origin: 100% 0;
}

.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;
}

.heart .movable {
    opacity: 0;
}

.heart .reverse {
    transform: translateY(70px) rotateZ(180deg);
    opacity  : 0.1;
}

.heart .reverse .left,
.heart .reverse .right {
    opacity: 0.5;
}

.heart:nth-child(1) {
    transform: translateX(455px) translateZ(-691px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(1) .movable {
    -webkit-animation: drop 5000ms -2569ms linear infinite;
    animation        : drop 5000ms -2569ms linear infinite;
}

.heart:nth-child(1) .ring {
    -webkit-animation: wave 5000ms 1331ms ease-out infinite;
    animation        : wave 5000ms 1331ms ease-out infinite;
}

.heart:nth-child(1) .inner {
    -webkit-animation: rotation 2734ms linear infinite;
    animation        : rotation 2734ms linear infinite;
}

.heart:nth-child(2) {
    transform: translateX(396px) translateZ(697px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(2) .movable {
    -webkit-animation: drop 5000ms -742ms linear infinite;
    animation        : drop 5000ms -742ms linear infinite;
}

.heart:nth-child(2) .ring {
    -webkit-animation: wave 5000ms 3158ms ease-out infinite;
    animation        : wave 5000ms 3158ms ease-out infinite;
}

.heart:nth-child(2) .inner {
    -webkit-animation: rotation 2211ms linear infinite;
    animation        : rotation 2211ms linear infinite;
}

.heart:nth-child(3) {
    transform: translateX(266px) translateZ(-436px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(3) .movable {
    -webkit-animation: drop 5000ms 537ms linear infinite;
    animation        : drop 5000ms 537ms linear infinite;
}

.heart:nth-child(3) .ring {
    -webkit-animation: wave 5000ms 4437ms ease-out infinite;
    animation        : wave 5000ms 4437ms ease-out infinite;
}

.heart:nth-child(3) .inner {
    -webkit-animation: rotation 3474ms linear infinite;
    animation        : rotation 3474ms linear infinite;
}

.heart:nth-child(4) {
    transform: translateX(-329px) translateZ(-563px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(4) .movable {
    -webkit-animation: drop 5000ms -1846ms linear infinite;
    animation        : drop 5000ms -1846ms linear infinite;
}

.heart:nth-child(4) .ring {
    -webkit-animation: wave 5000ms 2054ms ease-out infinite;
    animation        : wave 5000ms 2054ms ease-out infinite;
}

.heart:nth-child(4) .inner {
    -webkit-animation: rotation 3278ms linear infinite;
    animation        : rotation 3278ms linear infinite;
}

.heart:nth-child(5) {
    transform: translateX(-414px) translateZ(215px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(5) .movable {
    -webkit-animation: drop 5000ms 1318ms linear infinite;
    animation        : drop 5000ms 1318ms linear infinite;
}

.heart:nth-child(5) .ring {
    -webkit-animation: wave 5000ms 5218ms ease-out infinite;
    animation        : wave 5000ms 5218ms ease-out infinite;
}

.heart:nth-child(5) .inner {
    -webkit-animation: rotation 2130ms linear infinite;
    animation        : rotation 2130ms linear infinite;
}

.heart:nth-child(6) {
    transform: translateX(-445px) translateZ(-614px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(6) .movable {
    -webkit-animation: drop 5000ms 962ms linear infinite;
    animation        : drop 5000ms 962ms linear infinite;
}

.heart:nth-child(6) .ring {
    -webkit-animation: wave 5000ms 4862ms ease-out infinite;
    animation        : wave 5000ms 4862ms ease-out infinite;
}

.heart:nth-child(6) .inner {
    -webkit-animation: rotation 3069ms linear infinite;
    animation        : rotation 3069ms linear infinite;
}

.heart:nth-child(7) {
    transform: translateX(499px) translateZ(39px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(7) .movable {
    -webkit-animation: drop 5000ms -2544ms linear infinite;
    animation        : drop 5000ms -2544ms linear infinite;
}

.heart:nth-child(7) .ring {
    -webkit-animation: wave 5000ms 1356ms ease-out infinite;
    animation        : wave 5000ms 1356ms ease-out infinite;
}

.heart:nth-child(7) .inner {
    -webkit-animation: rotation 4560ms linear infinite;
    animation        : rotation 4560ms linear infinite;
}

.heart:nth-child(8) {
    transform: translateX(154px) translateZ(-228px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(8) .movable {
    -webkit-animation: drop 5000ms 1853ms linear infinite;
    animation        : drop 5000ms 1853ms linear infinite;
}

.heart:nth-child(8) .ring {
    -webkit-animation: wave 5000ms 5753ms ease-out infinite;
    animation        : wave 5000ms 5753ms ease-out infinite;
}

.heart:nth-child(8) .inner {
    -webkit-animation: rotation 4949ms linear infinite;
    animation        : rotation 4949ms linear infinite;
}

.heart:nth-child(9) {
    transform: translateX(-288px) translateZ(-300px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(9) .movable {
    -webkit-animation: drop 5000ms 883ms linear infinite;
    animation        : drop 5000ms 883ms linear infinite;
}

.heart:nth-child(9) .ring {
    -webkit-animation: wave 5000ms 4783ms ease-out infinite;
    animation        : wave 5000ms 4783ms ease-out infinite;
}

.heart:nth-child(9) .inner {
    -webkit-animation: rotation 3148ms linear infinite;
    animation        : rotation 3148ms linear infinite;
}

.heart:nth-child(10) {
    transform: translateX(274px) translateZ(549px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(10) .movable {
    -webkit-animation: drop 5000ms -1415ms linear infinite;
    animation        : drop 5000ms -1415ms linear infinite;
}

.heart:nth-child(10) .ring {
    -webkit-animation: wave 5000ms 2485ms ease-out infinite;
    animation        : wave 5000ms 2485ms ease-out infinite;
}

.heart:nth-child(10) .inner {
    -webkit-animation: rotation 3861ms linear infinite;
    animation        : rotation 3861ms linear infinite;
}

.heart:nth-child(11) {
    transform: translateX(142px) translateZ(79px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(11) .movable {
    -webkit-animation: drop 5000ms 157ms linear infinite;
    animation        : drop 5000ms 157ms linear infinite;
}

.heart:nth-child(11) .ring {
    -webkit-animation: wave 5000ms 4057ms ease-out infinite;
    animation        : wave 5000ms 4057ms ease-out infinite;
}

.heart:nth-child(11) .inner {
    -webkit-animation: rotation 2800ms linear infinite;
    animation        : rotation 2800ms linear infinite;
}

.heart:nth-child(12) {
    transform: translateX(-360px) translateZ(-721px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(12) .movable {
    -webkit-animation: drop 5000ms -1407ms linear infinite;
    animation        : drop 5000ms -1407ms linear infinite;
}

.heart:nth-child(12) .ring {
    -webkit-animation: wave 5000ms 2493ms ease-out infinite;
    animation        : wave 5000ms 2493ms ease-out infinite;
}

.heart:nth-child(12) .inner {
    -webkit-animation: rotation 3174ms linear infinite;
    animation        : rotation 3174ms linear infinite;
}

.heart:nth-child(13) {
    transform: translateX(27px) translateZ(792px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(13) .movable {
    -webkit-animation: drop 5000ms -1176ms linear infinite;
    animation        : drop 5000ms -1176ms linear infinite;
}

.heart:nth-child(13) .ring {
    -webkit-animation: wave 5000ms 2724ms ease-out infinite;
    animation        : wave 5000ms 2724ms ease-out infinite;
}

.heart:nth-child(13) .inner {
    -webkit-animation: rotation 4215ms linear infinite;
    animation        : rotation 4215ms linear infinite;
}

.heart:nth-child(14) {
    transform: translateX(278px) translateZ(-694px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(14) .movable {
    -webkit-animation: drop 5000ms 1363ms linear infinite;
    animation        : drop 5000ms 1363ms linear infinite;
}

.heart:nth-child(14) .ring {
    -webkit-animation: wave 5000ms 5263ms ease-out infinite;
    animation        : wave 5000ms 5263ms ease-out infinite;
}

.heart:nth-child(14) .inner {
    -webkit-animation: rotation 2320ms linear infinite;
    animation        : rotation 2320ms linear infinite;
}

.heart:nth-child(15) {
    transform: translateX(481px) translateZ(366px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(15) .movable {
    -webkit-animation: drop 5000ms -1590ms linear infinite;
    animation        : drop 5000ms -1590ms linear infinite;
}

.heart:nth-child(15) .ring {
    -webkit-animation: wave 5000ms 2310ms ease-out infinite;
    animation        : wave 5000ms 2310ms ease-out infinite;
}

.heart:nth-child(15) .inner {
    -webkit-animation: rotation 2371ms linear infinite;
    animation        : rotation 2371ms linear infinite;
}

.heart:nth-child(16) {
    transform: translateX(-379px) translateZ(-124px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(16) .movable {
    -webkit-animation: drop 5000ms -625ms linear infinite;
    animation        : drop 5000ms -625ms linear infinite;
}

.heart:nth-child(16) .ring {
    -webkit-animation: wave 5000ms 3275ms ease-out infinite;
    animation        : wave 5000ms 3275ms ease-out infinite;
}

.heart:nth-child(16) .inner {
    -webkit-animation: rotation 2053ms linear infinite;
    animation        : rotation 2053ms linear infinite;
}

.heart:nth-child(17) {
    transform: translateX(255px) translateZ(-374px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(17) .movable {
    -webkit-animation: drop 5000ms -90ms linear infinite;
    animation        : drop 5000ms -90ms linear infinite;
}

.heart:nth-child(17) .ring {
    -webkit-animation: wave 5000ms 3810ms ease-out infinite;
    animation        : wave 5000ms 3810ms ease-out infinite;
}

.heart:nth-child(17) .inner {
    -webkit-animation: rotation 2180ms linear infinite;
    animation        : rotation 2180ms linear infinite;
}

.heart:nth-child(18) {
    transform: translateX(-339px) translateZ(419px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(18) .movable {
    -webkit-animation: drop 5000ms 645ms linear infinite;
    animation        : drop 5000ms 645ms linear infinite;
}

.heart:nth-child(18) .ring {
    -webkit-animation: wave 5000ms 4545ms ease-out infinite;
    animation        : wave 5000ms 4545ms ease-out infinite;
}

.heart:nth-child(18) .inner {
    -webkit-animation: rotation 2716ms linear infinite;
    animation        : rotation 2716ms linear infinite;
}

.heart:nth-child(19) {
    transform: translateX(-102px) translateZ(355px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(19) .movable {
    -webkit-animation: drop 5000ms -2424ms linear infinite;
    animation        : drop 5000ms -2424ms linear infinite;
}

.heart:nth-child(19) .ring {
    -webkit-animation: wave 5000ms 1476ms ease-out infinite;
    animation        : wave 5000ms 1476ms ease-out infinite;
}

.heart:nth-child(19) .inner {
    -webkit-animation: rotation 3368ms linear infinite;
    animation        : rotation 3368ms linear infinite;
}

.heart:nth-child(20) {
    transform: translateX(-134px) translateZ(714px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(20) .movable {
    -webkit-animation: drop 5000ms 1537ms linear infinite;
    animation        : drop 5000ms 1537ms linear infinite;
}

.heart:nth-child(20) .ring {
    -webkit-animation: wave 5000ms 5437ms ease-out infinite;
    animation        : wave 5000ms 5437ms ease-out infinite;
}

.heart:nth-child(20) .inner {
    -webkit-animation: rotation 2578ms linear infinite;
    animation        : rotation 2578ms linear infinite;
}

.heart:nth-child(21) {
    transform: translateX(-320px) translateZ(728px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(21) .movable {
    -webkit-animation: drop 5000ms -606ms linear infinite;
    animation        : drop 5000ms -606ms linear infinite;
}

.heart:nth-child(21) .ring {
    -webkit-animation: wave 5000ms 3294ms ease-out infinite;
    animation        : wave 5000ms 3294ms ease-out infinite;
}

.heart:nth-child(21) .inner {
    -webkit-animation: rotation 2357ms linear infinite;
    animation        : rotation 2357ms linear infinite;
}

.heart:nth-child(22) {
    transform: translateX(261px) translateZ(285px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(22) .movable {
    -webkit-animation: drop 5000ms 680ms linear infinite;
    animation        : drop 5000ms 680ms linear infinite;
}

.heart:nth-child(22) .ring {
    -webkit-animation: wave 5000ms 4580ms ease-out infinite;
    animation        : wave 5000ms 4580ms ease-out infinite;
}

.heart:nth-child(22) .inner {
    -webkit-animation: rotation 2295ms linear infinite;
    animation        : rotation 2295ms linear infinite;
}

.heart:nth-child(23) {
    transform: translateX(-371px) translateZ(-297px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(23) .movable {
    -webkit-animation: drop 5000ms -1132ms linear infinite;
    animation        : drop 5000ms -1132ms linear infinite;
}

.heart:nth-child(23) .ring {
    -webkit-animation: wave 5000ms 2768ms ease-out infinite;
    animation        : wave 5000ms 2768ms ease-out infinite;
}

.heart:nth-child(23) .inner {
    -webkit-animation: rotation 2082ms linear infinite;
    animation        : rotation 2082ms linear infinite;
}

.heart:nth-child(24) {
    transform: translateX(-169px) translateZ(663px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(24) .movable {
    -webkit-animation: drop 5000ms 493ms linear infinite;
    animation        : drop 5000ms 493ms linear infinite;
}

.heart:nth-child(24) .ring {
    -webkit-animation: wave 5000ms 4393ms ease-out infinite;
    animation        : wave 5000ms 4393ms ease-out infinite;
}

.heart:nth-child(24) .inner {
    -webkit-animation: rotation 4600ms linear infinite;
    animation        : rotation 4600ms linear infinite;
}

.heart:nth-child(25) {
    transform: translateX(83px) translateZ(-755px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(25) .movable {
    -webkit-animation: drop 5000ms 317ms linear infinite;
    animation        : drop 5000ms 317ms linear infinite;
}

.heart:nth-child(25) .ring {
    -webkit-animation: wave 5000ms 4217ms ease-out infinite;
    animation        : wave 5000ms 4217ms ease-out infinite;
}

.heart:nth-child(25) .inner {
    -webkit-animation: rotation 2607ms linear infinite;
    animation        : rotation 2607ms linear infinite;
}

.heart:nth-child(26) {
    transform: translateX(-119px) translateZ(501px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(26) .movable {
    -webkit-animation: drop 5000ms 1178ms linear infinite;
    animation        : drop 5000ms 1178ms linear infinite;
}

.heart:nth-child(26) .ring {
    -webkit-animation: wave 5000ms 5078ms ease-out infinite;
    animation        : wave 5000ms 5078ms ease-out infinite;
}

.heart:nth-child(26) .inner {
    -webkit-animation: rotation 2796ms linear infinite;
    animation        : rotation 2796ms linear infinite;
}

.heart:nth-child(27) {
    transform: translateX(4px) translateZ(-268px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(27) .movable {
    -webkit-animation: drop 5000ms -1114ms linear infinite;
    animation        : drop 5000ms -1114ms linear infinite;
}

.heart:nth-child(27) .ring {
    -webkit-animation: wave 5000ms 2786ms ease-out infinite;
    animation        : wave 5000ms 2786ms ease-out infinite;
}

.heart:nth-child(27) .inner {
    -webkit-animation: rotation 3196ms linear infinite;
    animation        : rotation 3196ms linear infinite;
}

.heart:nth-child(28) {
    transform: translateX(48px) translateZ(-611px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(28) .movable {
    -webkit-animation: drop 5000ms -2925ms linear infinite;
    animation        : drop 5000ms -2925ms linear infinite;
}

.heart:nth-child(28) .ring {
    -webkit-animation: wave 5000ms 975ms ease-out infinite;
    animation        : wave 5000ms 975ms ease-out infinite;
}

.heart:nth-child(28) .inner {
    -webkit-animation: rotation 2491ms linear infinite;
    animation        : rotation 2491ms linear infinite;
}

.heart:nth-child(29) {
    transform: translateX(-463px) translateZ(373px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(29) .movable {
    -webkit-animation: drop 5000ms 305ms linear infinite;
    animation        : drop 5000ms 305ms linear infinite;
}

.heart:nth-child(29) .ring {
    -webkit-animation: wave 5000ms 4205ms ease-out infinite;
    animation        : wave 5000ms 4205ms ease-out infinite;
}

.heart:nth-child(29) .inner {
    -webkit-animation: rotation 2700ms linear infinite;
    animation        : rotation 2700ms linear infinite;
}

.heart:nth-child(30) {
    transform: translateX(-404px) translateZ(568px) scale3d(0.5, 0.5, 0.5);
}

.heart:nth-child(30) .movable {
    -webkit-animation: drop 5000ms -1461ms linear infinite;
    animation        : drop 5000ms -1461ms linear infinite;
}

.heart:nth-child(30) .ring {
    -webkit-animation: wave 5000ms 2439ms ease-out infinite;
    animation        : wave 5000ms 2439ms ease-out infinite;
}

.heart:nth-child(30) .inner {
    -webkit-animation: rotation 3300ms linear infinite;
    animation        : rotation 3300ms 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);
    }
}
