:root {
  --dark-brown: rgba(100, 48, 10, 1);
  --dark-brown-fade: rgba(100, 48, 10, 0.5);
  --black-fade: rgba(0, 0, 0, 0.3);
}

*::before,
*::after{
   content:"";
   position:absolute;
}
body{
   background:linear-gradient(red 25%, pink 50%, white)no-repeat white;
   overflow:hidden;
   padding:10px 20px;
}
h1{width:100%;
text-align:center;
font-weight:700; 
font-size:3em;
font-family:arial; 
color:white; 
background: darkred; 
border:2px solid white;
box-shadow:0 5px 10px 2px black; 
-webkit-text-stroke:2px red;
position:relative ; 
z-index:-1;
}

.head{
   position:relative;
   margin:100px auto;
   width:250px;
   height:250px;
   background:radial-gradient(circle at 50% 30%, white, orange 50%, var(--dark-brown) 95%);
   border-radius:50%;
   box-shadow:inset 0 0 20px 5px var(--dark-brown);
}
.head::before{
   z-index:2;
   width:100%;
   height:100%;
   background:radial-gradient(circle at 50% 0, white, orange, transparent 80%);
   border-radius:50%;
   top:1%;
   filter:blur(5px);
}
.left-eye{
   width:40px;
   height:40px;
   background:linear-gradient(var(--dark-brown)30%, transparent 90%);
   border-radius:50%;
   position:absolute;
   top:90px;
   z-index:3;
   left:65px;
   box-shadow:inset 0 2px 5px 2px var(--dark-brown);
}
.right-eye{
   width:40px;
   height:40px;
   background:linear-gradient(var(--dark-brown)30%, transparent 90%);
   border-radius:50%;
   position:absolute;
   top:90px;
   z-index:3;
   right:65px;
   box-shadow:inset 0 2px 5px 2px var(--dark-brown);
}
.mouth{
   z-index:3;
   width:120px;
   height:100px;
   background:radial-gradient(circle at 50% 0,transparent 70%, var(--dark-brown) 70%, var(--dark-brown-fade)80%, var(--dark-brown) 90%);
   position:absolute;
   top:100px;
   left:65px;
   border-radius:50%;
}

.heart{
   position:absolute;
   width:100px;
   height:90px;
   top:-25px;
   left:-30px;
   filter:drop-shadow(0 0 1px darkred)drop-shadow(0 0 2px black);
   opacity:0;
}
#heart-1{
   transform:rotate(-25deg);
}
#heart-2{
   transform:rotate(25deg);
}
.heart::before,
.heart::after{
   width:50px;
   height:80px;
   border-radius:50px 50px 0 0;
   filter:blur(1px);
}
.heart::before{
   left:50px;
   background:radial-gradient(circle at 95% 15%, pink 5%, red 30%);
   transform-origin:0  100%;
   transform:rotate(-45deg);
}
.heart::after{
   left:0;
   background:radial-gradient(circle at 35% 10%, pink 5%, red 30%);
   transform-origin:100%  100%;
   transform:rotate(45deg);
}
.head:hover{
   animation:turn 500ms linear 2;
}
.head:hover #heart-1{
   animation:jump-out 500ms linear 2;
}
.head:hover #heart-2{
   animation:jump-out2 500ms linear 2;
}

@keyframes turn{
   50%{
      transform:scale(0.8);
   }
}
@keyframes jump-out{
   0%{
      opacity:1;
      transform:rotatez(-25deg)scale(0);
   }
   25%{
      transform:rotatez(-25deg)scale(2.3);  
   }
   50%{
      transform:rotatez(-65deg)scale(1);
   }
   75%{
      transform:rotatez(35deg)scale(1.3);
   }
   100%{
       opacity:1;
      transform:rotatez(-25deg)scale(1);
   }
}
@keyframes jump-out2{
   0%{
      opacity:1;
      transform:rotatez(25deg)scale(0);
   }
   25%{
      transform:rotatez(25deg)scale(2.3);  
   }
   50%{
      transform:rotatez(65deg)scale(1);
   }
   75%{
      transform:rotatez(-35deg)scale(1.3);
   }
   100%{
       opacity:1;
      transform:rotatez(25deg)scale(1);
   }
}