@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

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

body
{
  font-size: 2vmin;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: radial-gradient(
    circle,
    #f8e0d8 30%,
    #f5c5b5
  );
}

h1 {
  font-family: Poppins;
  font-size: 5em;
  color: transparent;
  background-image: linear-gradient(
    #eaa4ac,
    #db4557
  );
  background-size: cover;
  -webkit-background-clip: text;
  background-clip: text;
/*  -webkit-text-stroke: .04em #FFF; */
/*  filter: drop-shadow( 0 0 .3em rgba(0,0,0,.2) ); */
}

.cupcake
{ 
  height: 40em;
  width: 36em;
  position: relative;
  isolation: isolate;
  filter: drop-shadow( 0 0 4em rgba( 0,0,0,.3 ) );
  background-image: radial-gradient(
    ellipse 100% 100%,
    #092536 42%,
    transparent 45%
  );
  background-repeat: no-repeat;
  animation: 
    shadow 1.4s infinite both, 
    bounce 1.4s infinite both;
}

.cupcake::before,
.cupcake::after
{
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  transform: translateX( -50% );
}

.cupcake::before
{
  height: 20em;
  width: 26em;
  bottom: 16em;
  background:
    /* cherry -- branch */
    radial-gradient(
      ellipse 250% 200% at -20% 110%,
      transparent 41%,
      #0c2437 42%,
      #0c2437 47%,
      transparent 48%
    ) 28% -5% / 5em 4em,
    
    /* cherry */
    radial-gradient(
      circle,
      #ef9ea8 48%,
      transparent 50%
    ) 48% 8% / 1.5em 1.5em,
    
    radial-gradient(
      circle,
      #dc5564 50%,
      transparent 50%
    ) 47% 7% / 3em 3em,
    
    radial-gradient(
      circle,
      #db4557 48%,
      transparent 50%
    ) 40% -5% / 10em 10em,
    
    /* bottom divider */
    linear-gradient(
      #000,
      #000
    ) left 30% bottom .6em / 24.9em .6em,
    
    /* candies */
    linear-gradient( -60deg,
      transparent .5em,
      #db838f .5em,
      #db838f 1em,
      transparent 1em
    ) left 11em bottom 3em / 2em 2em,
    
    linear-gradient( 60deg,
      transparent .5em,
      #db838f .5em,
      #db838f 1em,
      transparent 1em
    ) right 9em top 7em / 2em 2em,
    
    linear-gradient( 60deg,
      transparent .5em,
      #f1bbc2 .5em,
      #f1bbc2 1em,
      transparent 1em
    ) left 7em top 6em / 2em 2em,
    
    linear-gradient( -60deg,
      transparent .5em,
      #f1bbc2 .5em,
      #f1bbc2 1em,
      transparent 1em
    ) right 7em top 5em / 2em 2em,
    
    linear-gradient( -60deg,
      transparent .5em,
      #f1bbc2 .5em,
      #f1bbc2 1em,
      transparent 1em
    ) left 10em bottom 8em / 2em 2em,
    
    linear-gradient( 60deg,
      transparent .5em,
      #f1bbc2 .5em,
      #f1bbc2 1em,
      transparent 1em
    ) right 3em bottom 6em / 2em 2em,
    
    linear-gradient( 60deg,
      transparent .5em,
      #f1bbc2 .5em,
      #f1bbc2 1em,
      transparent 1em
    ) right 9em bottom 4.5em / 2em 2em,
    
    linear-gradient( 60deg,
      transparent .5em,
      #f1bbc2 .5em,
      #f1bbc2 1em,
      transparent 1em
    ) left 8em bottom 3.5em / 2em 2em,
    
    linear-gradient(
      #db838f,
      #db838f
    ) left 6em bottom 9em / 2em .5em,
    
    linear-gradient(
      #db838f,
      #db838f
    ) right 8em bottom 8em / 2em .5em,
    
    linear-gradient(
      #db838f,
      #db838f
    ) right 4em bottom 3em / 2em .5em,
    
    linear-gradient(
      #db838f,
      #db838f
    ) left 4em bottom 4em / 2em .5em,
    
    /* cream -- top/right */
    radial-gradient(
      ellipse 100% 100%,
      #eaa4ac 50%,
      transparent 50%
    ) right 25% top 15% / 12em 11em,
    
    /* cream -- bottom/center */
    radial-gradient(
      ellipse 100% 100%,
      #eaa4ac 50%,
      transparent 50%
    ) 25% 30% / 10em 8em,
    
    radial-gradient(
      ellipse 100% 100% at 50% 40%,
      #eaa4ac 50%,
      transparent 50%
    ) 30% 90% / 20em 12em,
    
    /* cream -- bottom/right */
    radial-gradient(
      ellipse 100% 100%,
      #eaa4ac 50%,
      transparent 50%
    ) right 0 top 100% / 10em 10em,
    
    /* cream -- bottom/left */
    radial-gradient(
      ellipse 100% 100%,
      #eaa4ac 50%,
      transparent 50%
    ) 0 120% / 10em 9em,

    /* cream -- bottom/center */
    radial-gradient(
      ellipse 100% 100% at 50% 100%,
      #eaa4ac 50%,
      transparent 50%
    ) 50% 100% / 24.5em 20em;
  background-repeat: no-repeat;
  z-index: -1;
}

.cupcake::after
{
  width: 26em;
  height: 13em;
  background:
    
    /* mouth -- inner */
    radial-gradient(
      ellipse 100% 180% at 50% 0,
      transparent 48%,
      #f4b477 50%,
      #f4b477 60%,
      transparent 60%
    ) left 50% bottom 18% / 6em 2.5em,
    
    radial-gradient(
      ellipse 100% 80% at 50% 100%,
      #db0c46 48%,
      transparent 50%
    ) left 50% bottom 25% / 4em 4.2em,
    
    /* mouth -- outer */
    radial-gradient(
      ellipse 100% 70% at 50% 0,
      #092536 48%,
      transparent 50%
    ) left 50% bottom -65% / 6em 8em,
    
    /* eyes -- left */
    radial-gradient(
      circle at center,
      #FFF 45%,
      transparent 52%
    ) 28.5% 38% / 1.5em 1.5em,
    
    radial-gradient(
      circle at center,
      #092536 47%,
      transparent 50%
    ) 28% 41% / 5em 5em,
    
    /* eyes -- right */
    radial-gradient(
      circle at center,
      #FFF 45%,
      transparent 52%
    ) right 33.5% top 38% / 1.5em 1.5em,
    
    radial-gradient(
      circle at center,
      #092536 47%,
      transparent 50%
    ) right 28% top 41% / 5em 5em,
    
    /* stripes -- 1st */
    linear-gradient( 73deg,
      transparent calc( 50% - .25em ),
      #e19962 calc( 50% - .2em ),
      #e19962 calc( 50% + .2em ),
      transparent calc( 50% + .25em )
    ) 18% 80% / 5em 85%,
    
    /* stripes -- 2nd */
    linear-gradient( 80deg,
      transparent calc( 50% - .25em ),
      #e19962 calc( 50% - .2em ),
      #e19962 calc( 50% + .2em ),
      transparent calc( 50% + .25em )
    ) 35% 80% / 5em 85%,
    
    /* stripes -- 3rd */
    linear-gradient( 90deg,
      transparent calc( 50% - .25em ),
      #e19962 calc( 50% - .2em ),
      #e19962 calc( 50% + .2em ),
      transparent calc( 50% + .25em )
    ) 50% 80% / 5em 85%,
    
    /* stripes -- 4th */
    linear-gradient( -80deg,
      transparent calc( 50% - .25em ),
      #e19962 calc( 50% - .2em ),
      #e19962 calc( 50% + .2em ),
      transparent calc( 50% + .25em )
    ) right 35% top 80% / 5em 85%,
    
    /* stripes -- 5th */
    linear-gradient( -73deg,
      transparent calc( 50% - .25em ),
      #e19962 calc( 50% - .2em ),
      #e19962 calc( 50% + .2em ),
      transparent calc( 50% + .25em )
    ) right 18% top 80% / 5em 85%,
    
    /* background color */
    linear-gradient(
      #f4b477,
      #f4b477
    ) 50% 50% / 50% 100%,
    
    /* right diagonal */
    conic-gradient( from 23deg,
      transparent 0,
      transparent 50%,
      #f4b477 51%,
      #f4b477 99.6%,
      transparent 100%
    ) 100% 50% / 25% 100%,
    
    /* left diagonal */
    conic-gradient( from -23deg,
      #f4b477 0,
      #f4b477 50%,
      transparent 51%,
      transparent 99.6%,
      #f4b477 100%
    ) 0 50% / 25% 100%;
  background-repeat: no-repeat;
  bottom: 3.5em;
}

@keyframes shadow {
  0%, 80%, 100% {
    background-size: 55% 6%;
    background-position: left 50% bottom 6%;
  }
  
  10% {
    background-size: 58% 6%;
    background-position: left 50% bottom 6%;
  }
  
  30% {
    background-size: 45% 6%;
    background-position: left 50% bottom 0;
  }
  
  60% {
    background-size: 58% 6%;
    background-position: left 50% bottom 6%;
  }
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scaleY( 1 ) scaleX( 1 );
    transform-origin: center bottom;
  }
  
  10% {
    transform: scaleY( .9 ) scaleX( 1.05 );
    transform-origin: center bottom;
  }
  
  30% {
    transform: scaleY( 1.1 ) scaleX( .95 ) translateY( -3% );
    transform-origin: center bottom;
  }
  
  60% {
    transform: scaleY( .9 ) scaleX( 1.05 );
    transform-origin: center bottom;
  }
}