Body {
    Background: #dea9c2;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

.heart {
    position: absolute;
    Width: 50px;
    Aspect-ratio: 1;
    Border-image: radial-gradient(#f50257 69%, #0000 70%) 84.5%/50%;
    Clip-path: polygon(-43% 0%, 50% 91%, 142% 0);
}

img {
    border: 1px solid red;
    width: 180px;
    aspect-ratio: 1;
    object-fit: cover;
    --_m: radial-gradient(#000 69%, #0000 70%) 84.5%/50%;
    //-webkit-mask-box-image: var(--_m);
    mask-border: var(--_m);
    clip-path: polygon(-41% 0, 50% 92%, 141% 0);
}

@keyframes particle-animation-1 {
    100% {
        transform: translatey();
    }
}

@keyframes particle-animation-2 {
    100% {
        transform: translate(0, calc(150vh * -1));
    }

    75% {
        transform: translate(-20px, calc(150vh * 0.75 * -1));
    }

    50% {
        transform: translate(0, calc(150vh * 0.5 * -1));
    }

    25% {
        transform: translate(-20px, calc(150vh * 0.25 * -1));
    }

}

.large-heart-container {
    display: flex;
    position: relative;
    flex: 1;
}

.rise {
    Position: absolute;
    Animation: particle-animation-2 20s linear;
}

.above {
    z-index: 5;
}

.below {
    z-index: 1;
}


.container {
    Position: absolute;
    Top: 10px;
    Left: 10px;
    Right: 10px;
    Bottom: 10px;
    Display: flex;
    Justify-content: center;
    Align-items: center;
}

.above {
    z-index: 3;
}

.content {
    z-index: 10;
    Flex: 1;
    Background: white;
    Padding: 0 30px;
    Margin: 20px;
    Border-radius: 10px;
    font-size: 2em;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(10px);
    min-height: 200px;
}