#chocolate_rains {
    transform: rotateX(-15deg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    overflow: clip;
    z-index: -1;
    transform-style: preserve-3d;
}
#chocolate_rains > div {
    top: 97%;
    left: 50%;
}
#chocolate_rains div {
    position: absolute;
    transform-style: preserve-3d;
}
.heart .ring {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    border: 1px solid #d84a5a;
    box-shadow: 0 0 10px rgba(216, 74, 90, 0.5);
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    display: block;
    opacity: 0;
}
.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(409px) translateZ(442px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(1) .movable {
    -webkit-animation: drop 20000ms -28ms linear infinite;
    animation: drop 20000ms -28ms linear infinite;
}
.heart:nth-child(1) .ring {
    -webkit-animation: wave 20000ms 3872ms ease-out infinite;
    animation: wave 20000ms 3872ms ease-out infinite;
}
.heart:nth-child(1) .inner {
    -webkit-animation: rotation 2223ms linear infinite;
    animation: rotation 2223ms linear infinite;
}
.heart:nth-child(2) {
    transform: translateX(-288px) translateZ(-432px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(2) .movable {
    -webkit-animation: drop 20000ms 1082ms linear infinite;
    animation: drop 20000ms 1082ms linear infinite;
}
.heart:nth-child(2) .ring {
    -webkit-animation: wave 20000ms 4982ms ease-out infinite;
    animation: wave 20000ms 4982ms ease-out infinite;
}
.heart:nth-child(2) .inner {
    -webkit-animation: rotation 3491ms linear infinite;
    animation: rotation 3491ms linear infinite;
}
.heart:nth-child(3) {
    transform: translateX(-455px) translateZ(448px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(3) .movable {
    -webkit-animation: drop 20000ms 218ms linear infinite;
    animation: drop 20000ms 218ms linear infinite;
}
.heart:nth-child(3) .ring {
    -webkit-animation: wave 20000ms 4118ms ease-out infinite;
    animation: wave 20000ms 4118ms ease-out infinite;
}
.heart:nth-child(3) .inner {
    -webkit-animation: rotation 4962ms linear infinite;
    animation: rotation 4962ms linear infinite;
}
.heart:nth-child(4) {
    transform: translateX(-426px) translateZ(745px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(4) .movable {
    -webkit-animation: drop 20000ms -235ms linear infinite;
    animation: drop 20000ms -235ms linear infinite;
}
.heart:nth-child(4) .ring {
    -webkit-animation: wave 20000ms 3665ms ease-out infinite;
    animation: wave 20000ms 3665ms ease-out infinite;
}
.heart:nth-child(4) .inner {
    -webkit-animation: rotation 3985ms linear infinite;
    animation: rotation 3985ms linear infinite;
}
.heart:nth-child(5) {
    transform: translateX(498px) translateZ(-171px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(5) .movable {
    -webkit-animation: drop 20000ms -591ms linear infinite;
    animation: drop 20000ms -591ms linear infinite;
}
.heart:nth-child(5) .ring {
    -webkit-animation: wave 20000ms 3309ms ease-out infinite;
    animation: wave 20000ms 3309ms ease-out infinite;
}
.heart:nth-child(5) .inner {
    -webkit-animation: rotation 4758ms linear infinite;
    animation: rotation 4758ms linear infinite;
}
.heart:nth-child(6) {
    transform: translateX(-43px) translateZ(-210px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(6) .movable {
    -webkit-animation: drop 20000ms -1334ms linear infinite;
    animation: drop 20000ms -1334ms linear infinite;
}
.heart:nth-child(6) .ring {
    -webkit-animation: wave 20000ms 2566ms ease-out infinite;
    animation: wave 20000ms 2566ms ease-out infinite;
}
.heart:nth-child(6) .inner {
    -webkit-animation: rotation 3346ms linear infinite;
    animation: rotation 3346ms linear infinite;
}
.heart:nth-child(7) {
    transform: translateX(-387px) translateZ(322px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(7) .movable {
    -webkit-animation: drop 20000ms -2192ms linear infinite;
    animation: drop 20000ms -2192ms linear infinite;
}
.heart:nth-child(7) .ring {
    -webkit-animation: wave 20000ms 1708ms ease-out infinite;
    animation: wave 20000ms 1708ms ease-out infinite;
}
.heart:nth-child(7) .inner {
    -webkit-animation: rotation 3592ms linear infinite;
    animation: rotation 3592ms linear infinite;
}
.heart:nth-child(8) {
    transform: translateX(-125px) translateZ(-672px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(8) .movable {
    -webkit-animation: drop 20000ms -561ms linear infinite;
    animation: drop 20000ms -561ms linear infinite;
}
.heart:nth-child(8) .ring {
    -webkit-animation: wave 20000ms 3339ms ease-out infinite;
    animation: wave 20000ms 3339ms ease-out infinite;
}
.heart:nth-child(8) .inner {
    -webkit-animation: rotation 2010ms linear infinite;
    animation: rotation 2010ms linear infinite;
}
.heart:nth-child(9) {
    transform: translateX(-62px) translateZ(-403px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(9) .movable {
    -webkit-animation: drop 20000ms -2875ms linear infinite;
    animation: drop 20000ms -2875ms linear infinite;
}
.heart:nth-child(9) .ring {
    -webkit-animation: wave 20000ms 1025ms ease-out infinite;
    animation: wave 20000ms 1025ms ease-out infinite;
}
.heart:nth-child(9) .inner {
    -webkit-animation: rotation 3578ms linear infinite;
    animation: rotation 3578ms linear infinite;
}
.heart:nth-child(10) {
    transform: translateX(48px) translateZ(-535px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(10) .movable {
    -webkit-animation: drop 20000ms -301ms linear infinite;
    animation: drop 20000ms -301ms linear infinite;
}
.heart:nth-child(10) .ring {
    -webkit-animation: wave 20000ms 3599ms ease-out infinite;
    animation: wave 20000ms 3599ms ease-out infinite;
}
.heart:nth-child(10) .inner {
    -webkit-animation: rotation 4594ms linear infinite;
    animation: rotation 4594ms linear infinite;
}
.heart:nth-child(11) {
    transform: translateX(301px) translateZ(154px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(11) .movable {
    -webkit-animation: drop 20000ms -2369ms linear infinite;
    animation: drop 20000ms -2369ms linear infinite;
}
.heart:nth-child(11) .ring {
    -webkit-animation: wave 20000ms 1531ms ease-out infinite;
    animation: wave 20000ms 1531ms ease-out infinite;
}
.heart:nth-child(11) .inner {
    -webkit-animation: rotation 3785ms linear infinite;
    animation: rotation 3785ms linear infinite;
}
.heart:nth-child(12) {
    transform: translateX(198px) translateZ(343px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(12) .movable {
    -webkit-animation: drop 20000ms -2711ms linear infinite;
    animation: drop 20000ms -2711ms linear infinite;
}
.heart:nth-child(12) .ring {
    -webkit-animation: wave 20000ms 1189ms ease-out infinite;
    animation: wave 20000ms 1189ms ease-out infinite;
}
.heart:nth-child(12) .inner {
    -webkit-animation: rotation 3400ms linear infinite;
    animation: rotation 3400ms linear infinite;
}
.heart:nth-child(13) {
    transform: translateX(-262px) translateZ(-375px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(13) .movable {
    -webkit-animation: drop 20000ms -72ms linear infinite;
    animation: drop 20000ms -72ms linear infinite;
}
.heart:nth-child(13) .ring {
    -webkit-animation: wave 20000ms 3828ms ease-out infinite;
    animation: wave 20000ms 3828ms ease-out infinite;
}
.heart:nth-child(13) .inner {
    -webkit-animation: rotation 3560ms linear infinite;
    animation: rotation 3560ms linear infinite;
}
.heart:nth-child(14) {
    transform: translateX(-34px) translateZ(-705px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(14) .movable {
    -webkit-animation: drop 20000ms 707ms linear infinite;
    animation: drop 20000ms 707ms linear infinite;
}
.heart:nth-child(14) .ring {
    -webkit-animation: wave 20000ms 4607ms ease-out infinite;
    animation: wave 20000ms 4607ms ease-out infinite;
}
.heart:nth-child(14) .inner {
    -webkit-animation: rotation 3040ms linear infinite;
    animation: rotation 3040ms linear infinite;
}
.heart:nth-child(15) {
    transform: translateX(-322px) translateZ(464px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(15) .movable {
    -webkit-animation: drop 20000ms -2968ms linear infinite;
    animation: drop 20000ms -2968ms linear infinite;
}
.heart:nth-child(15) .ring {
    -webkit-animation: wave 20000ms 932ms ease-out infinite;
    animation: wave 20000ms 932ms ease-out infinite;
}
.heart:nth-child(15) .inner {
    -webkit-animation: rotation 2736ms linear infinite;
    animation: rotation 2736ms linear infinite;
}
.heart:nth-child(16) {
    transform: translateX(473px) translateZ(-277px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(16) .movable {
    -webkit-animation: drop 20000ms 874ms linear infinite;
    animation: drop 20000ms 874ms linear infinite;
}
.heart:nth-child(16) .ring {
    -webkit-animation: wave 20000ms 4774ms ease-out infinite;
    animation: wave 20000ms 4774ms ease-out infinite;
}
.heart:nth-child(16) .inner {
    -webkit-animation: rotation 4394ms linear infinite;
    animation: rotation 4394ms linear infinite;
}
.heart:nth-child(17) {
    transform: translateX(-224px) translateZ(369px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(17) .movable {
    -webkit-animation: drop 20000ms -327ms linear infinite;
    animation: drop 20000ms -327ms linear infinite;
}
.heart:nth-child(17) .ring {
    -webkit-animation: wave 20000ms 3573ms ease-out infinite;
    animation: wave 20000ms 3573ms ease-out infinite;
}
.heart:nth-child(17) .inner {
    -webkit-animation: rotation 2865ms linear infinite;
    animation: rotation 2865ms linear infinite;
}
.heart:nth-child(18) {
    transform: translateX(377px) translateZ(-787px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(18) .movable {
    -webkit-animation: drop 20000ms -2810ms linear infinite;
    animation: drop 20000ms -2810ms linear infinite;
}
.heart:nth-child(18) .ring {
    -webkit-animation: wave 20000ms 1090ms ease-out infinite;
    animation: wave 20000ms 1090ms ease-out infinite;
}
.heart:nth-child(18) .inner {
    -webkit-animation: rotation 3970ms linear infinite;
    animation: rotation 3970ms linear infinite;
}
.heart:nth-child(19) {
    transform: translateX(-460px) translateZ(-35px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(19) .movable {
    -webkit-animation: drop 20000ms -770ms linear infinite;
    animation: drop 20000ms -770ms linear infinite;
}
.heart:nth-child(19) .ring {
    -webkit-animation: wave 20000ms 3130ms ease-out infinite;
    animation: wave 20000ms 3130ms ease-out infinite;
}
.heart:nth-child(19) .inner {
    -webkit-animation: rotation 2786ms linear infinite;
    animation: rotation 2786ms linear infinite;
}
.heart:nth-child(20) {
    transform: translateX(168px) translateZ(489px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(20) .movable {
    -webkit-animation: drop 20000ms -2886ms linear infinite;
    animation: drop 20000ms -2886ms linear infinite;
}
.heart:nth-child(20) .ring {
    -webkit-animation: wave 20000ms 1014ms ease-out infinite;
    animation: wave 20000ms 1014ms ease-out infinite;
}
.heart:nth-child(20) .inner {
    -webkit-animation: rotation 3971ms linear infinite;
    animation: rotation 3971ms linear infinite;
}
.heart:nth-child(21) {
    transform: translateX(-413px) translateZ(242px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(21) .movable {
    -webkit-animation: drop 20000ms -323ms linear infinite;
    animation: drop 20000ms -323ms linear infinite;
}
.heart:nth-child(21) .ring {
    -webkit-animation: wave 20000ms 3577ms ease-out infinite;
    animation: wave 20000ms 3577ms ease-out infinite;
}
.heart:nth-child(21) .inner {
    -webkit-animation: rotation 2311ms linear infinite;
    animation: rotation 2311ms linear infinite;
}
.heart:nth-child(22) {
    transform: translateX(257px) translateZ(-647px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(22) .movable {
    -webkit-animation: drop 20000ms 759ms linear infinite;
    animation: drop 20000ms 759ms linear infinite;
}
.heart:nth-child(22) .ring {
    -webkit-animation: wave 20000ms 4659ms ease-out infinite;
    animation: wave 20000ms 4659ms ease-out infinite;
}
.heart:nth-child(22) .inner {
    -webkit-animation: rotation 2371ms linear infinite;
    animation: rotation 2371ms linear infinite;
}
.heart:nth-child(23) {
    transform: translateX(-462px) translateZ(319px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(23) .movable {
    -webkit-animation: drop 20000ms -2501ms linear infinite;
    animation: drop 20000ms -2501ms linear infinite;
}
.heart:nth-child(23) .ring {
    -webkit-animation: wave 20000ms 1399ms ease-out infinite;
    animation: wave 20000ms 1399ms ease-out infinite;
}
.heart:nth-child(23) .inner {
    -webkit-animation: rotation 3941ms linear infinite;
    animation: rotation 3941ms linear infinite;
}
.heart:nth-child(24) {
    transform: translateX(372px) translateZ(539px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(24) .movable {
    -webkit-animation: drop 20000ms -1395ms linear infinite;
    animation: drop 20000ms -1395ms linear infinite;
}
.heart:nth-child(24) .ring {
    -webkit-animation: wave 20000ms 2505ms ease-out infinite;
    animation: wave 20000ms 2505ms ease-out infinite;
}
.heart:nth-child(24) .inner {
    -webkit-animation: rotation 3654ms linear infinite;
    animation: rotation 3654ms linear infinite;
}
.heart:nth-child(25) {
    transform: translateX(-473px) translateZ(210px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(25) .movable {
    -webkit-animation: drop 20000ms 60ms linear infinite;
    animation: drop 20000ms 60ms linear infinite;
}
.heart:nth-child(25) .ring {
    -webkit-animation: wave 20000ms 3960ms ease-out infinite;
    animation: wave 20000ms 3960ms ease-out infinite;
}
.heart:nth-child(25) .inner {
    -webkit-animation: rotation 4937ms linear infinite;
    animation: rotation 4937ms linear infinite;
}
.heart:nth-child(26) {
    transform: translateX(-173px) translateZ(474px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(26) .movable {
    -webkit-animation: drop 20000ms 71ms linear infinite;
    animation: drop 20000ms 71ms linear infinite;
}
.heart:nth-child(26) .ring {
    -webkit-animation: wave 20000ms 3971ms ease-out infinite;
    animation: wave 20000ms 3971ms ease-out infinite;
}
.heart:nth-child(26) .inner {
    -webkit-animation: rotation 4617ms linear infinite;
    animation: rotation 4617ms linear infinite;
}
.heart:nth-child(27) {
    transform: translateX(-142px) translateZ(-13px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(27) .movable {
    -webkit-animation: drop 20000ms -2652ms linear infinite;
    animation: drop 20000ms -2652ms linear infinite;
}
.heart:nth-child(27) .ring {
    -webkit-animation: wave 20000ms 1248ms ease-out infinite;
    animation: wave 20000ms 1248ms ease-out infinite;
}
.heart:nth-child(27) .inner {
    -webkit-animation: rotation 3521ms linear infinite;
    animation: rotation 3521ms linear infinite;
}
.heart:nth-child(28) {
    transform: translateX(-151px) translateZ(593px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(28) .movable {
    -webkit-animation: drop 20000ms -322ms linear infinite;
    animation: drop 20000ms -322ms linear infinite;
}
.heart:nth-child(28) .ring {
    -webkit-animation: wave 20000ms 3578ms ease-out infinite;
    animation: wave 20000ms 3578ms ease-out infinite;
}
.heart:nth-child(28) .inner {
    -webkit-animation: rotation 3702ms linear infinite;
    animation: rotation 3702ms linear infinite;
}
.heart:nth-child(29) {
    transform: translateX(-459px) translateZ(611px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(29) .movable {
    -webkit-animation: drop 20000ms -851ms linear infinite;
    animation: drop 20000ms -851ms linear infinite;
}
.heart:nth-child(29) .ring {
    -webkit-animation: wave 20000ms 3049ms ease-out infinite;
    animation: wave 20000ms 3049ms ease-out infinite;
}
.heart:nth-child(29) .inner {
    -webkit-animation: rotation 3596ms linear infinite;
    animation: rotation 3596ms linear infinite;
}
.heart:nth-child(30) {
    transform: translateX(-239px) translateZ(462px) scale3d(0.5, 0.5, 0.5);
}
.heart:nth-child(30) .movable {
    -webkit-animation: drop 20000ms 1040ms linear infinite;
    animation: drop 20000ms 1040ms linear infinite;
}
.heart:nth-child(30) .ring {
    -webkit-animation: wave 20000ms 4940ms ease-out infinite;
    animation: wave 20000ms 4940ms ease-out infinite;
}
.heart:nth-child(30) .inner {
    -webkit-animation: rotation 2652ms linear infinite;
    animation: rotation 2652ms 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(-4000px);
        opacity: 0;
    }
    85% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-40px);
        opacity: 1;
    }
}
@keyframes drop {
    0% {
        transform: translateY(-4000px);
        opacity: 0;
    }
    85% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-40px);
        opacity: 1;
    }
}
@-webkit-keyframes wave {
    0% {
        transform: translate(-50%, -50%) rotateX(90deg) scale(0.1)
            translateZ(-37px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(90deg) scale(2)
            translateZ(-37px);
        opacity: 1;
    }
}
@keyframes wave {
    0% {
        transform: translate(-50%, -50%) rotateX(90deg) scale(0.1)
            translateZ(-37px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) rotateX(90deg) scale(2)
            translateZ(-37px);
        opacity: 1;
    }
}
@-webkit-keyframes wing {
    0% {
        transform: rotateY(70deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}
@keyframes wing {
    0% {
        transform: rotateY(70deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}