<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Heart Shaped Box</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Jacquarda+Bastarda+9+Charted&display=swap');
@import url(http://weloveiconfonts.com/api/?family=entypo);
html {

background-color: transparent;
border-bottom: solid 5px red;
border-top: solid 5px red;
overflow-x: hidden;
padding-bottom: 142px;
}

p {color:red;
font-family: "Jacquarda Bastarda 9 Charted", serif, cursive;
font-weight: 400;
font-size: 40px;

margin: 200px 139px;
position: absolute;
text-align: center;
animation: glow-text 1s ease-in-out infinite alternate;
}

.heart {
margin: 40px 10px;
--c: red;
width: 200px;
aspect-ratio: 1;
background:
    radial-gradient(circle at 60% 65%, var(--c) 64%, #0000 65%) top left/50% 50%,
    radial-gradient(circle at 40% 65%, var(--c) 64%, #0000 65%) top right/50% 50%,
    conic-gradient(from -45deg at 50% 85.5%, var(--c) 90deg, #0000 0) bottom/100% 50%;
background-repeat: no-repeat;
   animation: glow-heart 1.5s ease-in-out infinite alternate;
}

.heart-top {
background-color: red;
height:90px;
width: 0px;
border-radius: 100px 100px 0 0;
animation: spin1 2s infinite linear,glow-heart 1.5s ease-in-out infinite alternate;



}

.heart-bottom {
background-color: red;
height:100px;
width: 0px;
border-radius: 0 0 0 100px;
animation: spin2 2s infinite linear, glow-heart 1.5s ease-in-out infinite alternate;

}



.entypo-heart:before{
content:"\2665";
   font-family: 'entypo', sans-serif, cursive;
color: red;
font-weight: 400;
font-size: 60px;
opacity: 0.9;
position: relative;
display: inline-block;
animation: eat 1s linear 1s infinite, move 5s linear infinite;
}

/* Animations */

@keyframes glow-text {
0% { box-shadow: 0 0 5px red; }
100% { box-shadow: 0 0 20px red; }

}

@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}

@keyframes glow-heart {
0% { box-shadow: 0 0 0px red; }
100% { box-shadow: 0 0 10000px red; }
opacity: 100;
}

@keyframes spin1 {
0% { transform: rotate(0deg) translateX(-50%); }
50% { transform: rotate(-35deg) translateX(-50%); }
}

@keyframes spin2 {
0% { transform: rotate(0deg) translateX(-50%); }
50% { transform: rotate(35deg) translateX(-50%); }

}

@keyframes move {
0% { left: 0; }
100% { left: 90%; }
}

@keyframes eat {
0%, 100% {
    text-shadow:
      100px 65px 0 pink,
      300px 65px 0 pink,
      500px 65px 0 pink,
      700px 65px 0 pink,
      900px 65px 0 pink,
      1100px 65px 0 pink,
      1300px 65px 0 0pink;
}
50% {
    text-shadow:
      0px 65px   pink,
      100px 65px 0 pink,
      300px 65px 0 pink,
      500px 65px 0 pink,
      700px 65px 0 pink,
      900px 65px 0 pink,
      1100px 65px 0 pink;
}

</style>
</head>
<body>
<div class="heart">
   <div class="heart-top"></div>
<div class="heart-bottom"></div>


</div>
<div class="entypo-heart"></div>
<p>Welcome to my heart shaped box</p>
</body>
</html>