.hearts {
    position: fixed;
    left: 25px;
    bottom: 0;
    width: 100px;
    height: 100vh;
    z-index: 10;
}

.heart {
    position: absolute;
    height: 20%;
    min-height: 25px;
    width: 20%;
    min-width: 25px;
    background-color: yellow;
    -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
    mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z"></path></svg>');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: bottom;
    mask-position: bottom;
    opacity: 0;
    animation: floating-heart 10s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

.heart-api-call {
    background-color: rgb(123, 77, 255, 0.3);
}

.heart-tagsearch {
    background-color: rgba(234, 96, 223, 0.3);
}

.heart-insert {
    background-color: rgba(18, 165, 237, 0.3);
    animation: floating-heart 60s infinite cubic-bezier(0.5, 0.5, 0.5, 0.5);
}

@keyframes floating-heart {
    0% {
        opacity: 0;
        bottom: 0%;
        left: 0%;
    }

    10% {
        opacity: 1;
        bottom: 20%;
        left: 70%;
    }

    20% {
        bottom: 40%;
        left: 10%;
    }

    30% {
        bottom: 60%;
        left: 50%;
    }

    40% {
        opacity: 1;
        bottom: 80%;
        left: 5%;
    }

    48% {
        opacity: 0;
        bottom: 100%;
        left: 60%;
    }

    100% {
        opacity: 0;
        bottom: 100%;
        left: 90%;
    }
}