*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-size;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100Vh;
    background: radial-gradient( #4c0c0c ,#000) ;
}

.container{
    position: relative;
    height: 430px;
    width: 100%;
    display: flex;
    justify-content: center;
    border-bottom:1px solid rgb(255,255,255, 0.05) ;
    -webkit-box-reflect: below 1px linear-gradient(transparent , #0005);
}
.heart{
    position: relative;
    width: 300px;
    height: 300px;
    animation: move 2s linear infinite;
    -webkit-animation: move 2s linear infinite;
}

@keyframes move {
    0%{
        transform: translateX(0px);
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        scale: 1;
}
   25% {
       transform: translateX(10px);
       -webkit-transform: translateX(10px);
       -moz-transform: translateX(10px);
       -ms-transform: translateX(10px);
       -o-transform: translateX(10px);
}
   50% {
       transform: translateX(0px);
       -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
       -ms-transform: translateX(0px);
       -o-transform: translateX(0px);
       margin-top: 20px ;
       scale: 1.2;
   }
   75% {
       transform: translateX(-10px);
       -webkit-transform: translateX(-10px);
       -moz-transform: translateX(-10px);
       -ms-transform: translateX(-10px);
       -o-transform: translateX(-10px);
       
}
   100% {
       transform: translateX(0px);
       -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
       -ms-transform: translateX(0px);
       -o-transform: translateX(0px);
    scale: 1;
   }
}

.heart::before{
    content: '';
    position: absolute;
    top: -50px;
    left:20px;
    width: 200px;
    height: 300px;
    background: #6a1629;
    border-top-left-radius: 100px ;
    border-top-right-radius: 100px;
    rotate: 315deg;
    z-index: 100;
    animation: animationheart 2s steps(1) infinite;
    -webkit-animation: animationheart 2s steps(1) infinite;
}


.heart::after {
    content: '';
    position: absolute;
    top: -50px;
    left: 92px;
    width: 200px;
    height: 300px;
    background: #6a1629;
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    rotate: 45deg;
    z-index: 100;
}

@keyframes animationheart {
    0% ,94% ,100%{
        filter: none;
        -webkit-filter: none;
       
}

    95%{
    filter: drop-shadow(0 0 50px #f00 ) drop-shadow(0 0 150px #f00);
    -webkit-filter: drop-shadow(0 0 50px #f00 ) drop-shadow(0 0 150px #f00);
}
}

.drop{
    position: absolute;
    width: 30px;
    top: 50px;
    filter: drop-shadow(5px 5px 10px #000) drop-shadow(0px 0px 10px #f00);
    -webkit-filter: drop-shadow(5px 5px 10px #000) drop-shadow(0px 0px 10px #f00);
    transform-origin: bottom ;
    animation: animat;
    -webkit-animation: animat 4s linear forwards;
}
@keyframes animat{
    0%{
        top: 40px;
        opacity: 1;
        scale: 1;
    }
    70%{
        top : 400px;
        opacity: 1;
    }
    80%{
        top: 400px
    }
    100%{
    top: 400px;
    opacity: 0;
    scale: 0;
    }

}


.drop::after{
    content: '';
    position: absolute;
    width: 20px;
    height: 30px;
    background: #f00;
    border-top-right-radius:20px ;
    border-top-left-radius: 20px;
    transform-origin: bottom center ;
    rotate: -45deg;
   z-index: .5;
}

.drop::before {
    content: '';
    position: absolute;
    width: 20px;
    right: 23px;
    height: 30px;
    background: #f00;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    transform-origin: bottom center;
    rotate: 45deg;
    z-index: .5;
   
}