:root {
    --heart: #ff0066;
}

#hearts-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    overflow: visible;
}

.heart {
    --duration: 3s;
    --width: 10vw;
    --scaley: 1;
    --top: 50%;
    --top-step: 0%;
    --heart-color: var(--heart);
    width: var(--width);
    height: calc(var(--width) * 0.9);
    left: calc(0px - (var(--width) * 2));
    position: absolute;
    transform-origin: 50% 50%;
    animation-name: rotating;
    animation-duration: var(--duration);
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 100;
}

.heart:before,
.heart:after {
    content: "";
    position: absolute;
    top: 0;
    width: calc(var(--width) * 0.5);
    height: calc(var(--width) * 0.8);
    background: var(--heart-color);
    border-radius: calc(var(--width) * 0.5) calc(var(--width) * 0.5) 0 0;
}

.heart:before {
    left: calc(var(--width) * 0.5);
    transform: rotate(-45deg);
    transform-origin: 0 100%;
}

.heart:after {
    left: 0;
    transform: rotate(45deg);
    transform-origin: 100% 100%;
}

.heart:nth-child(3) {
    --width: 8vw;
    --top: 25%;
    --top-step: 40%;
    --heart-color: linear-gradient(225deg, #ff1744 0%, #f50057 49%, #f50057 51%, #ff1744 100%);
    animation-delay: 0.5s;
}

.heart:nth-child(4) {
    --width: 10vw;
    --top: 45%;
    --top-step: 30%;
    --heart-color: linear-gradient(225deg, #c51162 0%, #f50057 49%, #f50057 51%, #c51162 100%);
    animation-delay: 1.5s;
}

.heart:nth-child(5) {
    --width: 10vw;
    --top: 55%;
    --top-step: -10%;
    --heart-color: linear-gradient(225deg, #ff4081 0%, #f50057 49%, #f50057 51%, #ff4081 100%);
    animation-delay: 0.5s;
    animation-name: loop;
}

.heart:nth-child(6) {
    --width: 8vw;
    --scaley: 1.3;
    --top: 45%;
    --top-step: -30%;
    --heart-color: linear-gradient(225deg, #e91e63 0%, #f50057 45%, #f50057 55%, #e91e63 100%);
    animation-delay: 1s;
    animation-name: turning;
}

.heart:nth-child(7) {
    --width: 5vw;
    --scaley: 1.1;
    --top: 85%;
    --heart-color: linear-gradient(225deg, #ff80ab 0%, #ff4081 45%, #ff4081 55%, #ff80ab 100%);
    animation-delay: 1.5s;
    animation-name: loop;
}

.heart:nth-child(8) {
    --width: 5vw;
    --scaley: 1.1;
    --top: 35%;
    --heart-color: linear-gradient(225deg, #f06292 0%, #ec407a 45%, #ec407a 55%, #f06292 100%);
    animation-delay: 0.5s;
    animation-name: turning;
}

.heart:nth-child(9) {
    --width: 6vw;
    --scaley: 1.1;
    --duration: 2.7s;
    --top: 75%;
    --top-step: -30%;
    --heart-color: linear-gradient(225deg, #d81b60 0%, #c2185b 45%, #c2185b 55%, #d81b60 100%);
    animation-delay: 1.5s;
    animation-name: loop;
}

.heart:nth-child(10) {
    --width: 7vw;
    --duration: 2.7s;
    --top: 58%;
    --top-step: -10%;
    animation-name: turning;
}

.heart:nth-child(10) {
    --width: 9vw;
    --scaley: 1.5;
    --top: 65%;
    --heart-color: linear-gradient(225deg, #880e4f 0%, #ad1457 45%, #ad1457 55%, #880e4f 100%);
    animation-delay: 2.5s;
    animation-name: turning;
}

@keyframes rotating {
    0% {
        top: var(--top);
        left: calc(0px - (var(--width) * 2));
        transform: rotate(0deg) scaleY(var(--scaley));
    }

    100% {
        top: calc(var(--top) + var(--top-step));
        left: calc(100% + (var(--width) * 2));
        transform: rotate(900deg) scaleY(var(--scaley));
    }
}

@keyframes loop {
    0% {
        top: var(--top);
        left: calc(0px - (var(--width) * 2));
        transform: rotate(0deg);
    }

    33% {
        transform: rotate(-720deg);
        transform-origin: -5vw -5vw;
    }

    66% {
        transform: rotate(-1080deg);
        transform-origin: -5vw -5vw;
    }

    100% {
        top: calc(var(--top) + var(--top-step));
        left: calc(100% + (var(--width) * 2));
        transform: rotate(-1800deg);
    }
}

@keyframes turning {
    0% {
        top: var(--top);
        left: calc(0px - (var(--width) * 2));
        transform: rotate(-45deg) rotateY(0deg) rotateX(0deg);
    }

    100% {
        top: calc(var(--top) + var(--top-step));
        left: calc(100% + (var(--width) * 2));
        transform: rotate(-45deg) rotateY(720deg) rotateX(720deg);
    }
}

@media (max-width: 1000px) {
    .heart {
        --duration: 2s;
    }
}

@media (max-width: 50px) {
    .heart {
        --duration: 1s;
    }
}