body
          .container
            .heart
              .left-half
              .right-half
            .pizza
              .crust
              .eye-left
              .eye-right
              .mouth
              .cheese-1
              .cheese-2
              .cheese-3
              .cheese-4
              .salami-1
              .salami-2
              .salami-3
              .salami-4
              .salami-5
              .olive-1
              .olive-2
              .olive-3
              .olive-4
              .olive-5
            .p-leg-left
              .p-foot-left
            .p-leg-right
              .p-foot-right
            .p-arm-left
              .p-hand-left
            .p-arm-right
              .p-hand-right
            .coffee
              .sticker
                p Coffee
              .eye-left
              .eye-right
              .mouth
            .cap-top
            .cap-bottom
            .c-leg-left
              .c-foot-left
            .c-leg-right
              .c-foot-right
            .c-arm-left
              .c-hand-left
            .c-arm-right
              .c-hand-right

body
    background #24A0D6

.container
    position relative
    background none
    width 400px
    height 400px
    margin auto

.heart
    position absolute
    background none
    width 100%
    height 100%
    animation heartbeat
    animation-duration 1s
    animation-direction alternate
    animation-iteration-count infinite
    animation-timing-function cubic-bezier(0, .99, 0.81, 1)

.left-half
    position absolute
    width 60%
    height 100%
    background red
    border-radius 50% 50% 50% 50%
    transform-origin right
    transform rotate(-30deg)

.right-half
    position absolute
    width 60%
    height 100%
    right 0%
    background red
    border-radius 50%
    transform-origin left
    transform rotate(30deg)
    background-image linear-gradient(to right, red 50%, #ff4747)

.pizza
    position absolute
    width 50%
    height 90%
    bottom 0%
    background #CA9A6C
    border-radius 50%/10%
    clip-path polygon(50% 0%, 100% 90%, 100% 100%, 0 100%, 0 90%)
    z-index 1

.crust
    position absolute
    width 100%
    height 95%
    background #F9F7BE
    border 2px solid brown
    opacity 0.8
    border-radius 50%/10%
    clip-path polygon(50% 0%, 100% 90%, 100% 100%, 0 100%, 0 90%)

.coffee
    position absolute
    width 55%
    height 80%
    bottom 5%
    right 0%
    background #CFD3D4
    font-family 'Leckerli One', cursive
    font-size 34px
    text-align center
    color #CFD3D4
    clip-path polygon(0 0, 100% 0, 70% 100%, 30% 100%)
    z-index 1
.cap-top
    position absolute
    width 51%
    height 10%
    top 11%
    right 2%
    background white
    clip-path polygon(5% 0%, 95% 0%, 100% 100%, 0% 100%)
.cap-bottom
    position absolute
    width 58%
    height 8%
    top 13%
    right -1.5%
    background white
    clip-path polygon(3.5% 0%, 96.5% 0%, 100% 100%, 0% 100%)
    z-index 1
.sticker
    position absolute
    width 100%
    height 35%
    bottom 35%
    background brown
    border 2px solid brown

.eye-left
    position absolute
    width 10px
    height 10px
    bottom 20%
    left 35%
    background black
    border-radius 50%

.eye-right
    position absolute
    width 10px
    height 10px
    bottom 20%
    right 35%
    background black
    border-radius 50%

.mouth
    position absolute
    width 30%
    height 10%
    bottom 10%
    left 35%
    background none
    border-radius 50%
    border 2px solid black
    clip-path polygon(0 70%, 100% 70%, 100% 100%, 0 100%)

.p-leg-left
    position absolute
    width 3px
    height 5.5%
    bottom -5%
    left 20%
    background black
.p-foot-left
    position absolute
    width 20px
    height 10px
    bottom -5px
    right 0%
    background black
    border-radius 50%
.p-leg-right
    position absolute
    width 3px
    height 5.5%
    bottom -5%
    left 31%
    background black
.p-foot-right
    position absolute
    width 20px
    height 10px
    bottom -5px
    left 0%
    background black
    border-radius 50%

.p-arm-left
    position absolute
    width 7%
    height 3px
    bottom 15%
    left -5%
    background black
    transform-origin right
    transform rotate(-45deg)
    animation-name armwave
    animation-duration 3s
    animation-direction normal
    animation-iteration-count infinite
    animation-timing-function linear
    animation-delay 3s
.p-hand-left
    position absolute
    width 20px
    height 20px
    bottom -8px
    left -70%
    background black
    border-radius 50%
.p-arm-right
    position absolute
    width 7%
    height 3px
    bottom 15%
    left 47.5%
    background black
    transform-origin left
    transform rotate(55deg)
.p-hand-right
    position absolute
    width 20px
    height 20px
    bottom -8px
    right -70%
    background black
    border-radius 50%

.c-leg-left
    position absolute
    width 3px
    height 10%
    bottom -5%
    right 22%
    background black
.c-foot-left
    position absolute
    width 20px
    height 10px
    bottom -5px
    left 0%
    background black
    border-radius 50%
.c-leg-right
    position absolute
    width 3px
    height 10%
    bottom -5%
    right 31%
    background black
.c-foot-right
    position absolute
    width 20px
    height 10px
    bottom -5px
    right 0%
    background black
    border-radius 50%

.c-arm-left
    position absolute
    width 7%
    height 3px
    bottom 16.5%
    left 52%
    background black
    transform-origin right
    transform rotate(-73deg)
.c-hand-left
    position absolute
    width 20px
    height 20px
    bottom -8px
    left -70%
    background black
    border-radius 50%
.c-arm-right
    position absolute
    width 7%
    height 3px
    bottom 16.5%
    left 85%
    background black
    transform-origin left
    transform rotate(73deg)
.c-hand-right
    position absolute
    width 20px
    height 20px
    bottom -8px
    right -70%
    background black
    border-radius 50%

.cheese-1
    position absolute
    width 27%
    height 15%
    top 12%
    left 44%
    background #fff082
    clip-path polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
    transform rotate(-45deg)
.cheese-2
    position absolute
    width 27%
    height 15%
    top 40%
    left 12%
    background #fff082
    clip-path polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
    transform rotate(30deg)
.cheese-3
    position absolute
    width 27%
    height 15%
    top 60%
    left 64%
    background #fff082
    clip-path polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
    transform rotate(60deg)
.cheese-4
    position absolute
    width 27%
    height 15%
    top 75%
    left 6%
    background #fff082
    clip-path polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)
    transform rotate(-90deg)

.salami-1
    position absolute
    width 18%
    height 10%
    top 50%
    left 50%
    background #EF2028
    border-radius 50%
.salami-2
    position absolute
    width 18%
    height 10%
    top 80%
    right 10%
    background #EF2028
    border-radius 50%
.salami-3
    position absolute
    width 18%
    height 10%
    top 65%
    left 7%
    background #EF2028
    border-radius 50%
.salami-4
    position absolute
    width 18%
    height 10%
    top 30%
    left 17%
    background #EF2028
    border-radius 50%
.salami-5
    position absolute
    width 18%
    height 10%
    top 10%
    left 50%
    background #EF2028
    border-radius 50%

.olive-1
    position absolute
    width 3%
    height 3%
    top 55%
    left 30%
    background none
    border 7px solid olive
    border-radius 50%
    transform rotate(45deg)
.olive-2
    position absolute
    width 3%
    height 3%
    top 85%
    left 15%
    background none
    border 7px solid olive
    border-radius 50%
    transform rotate(-45deg)
.olive-3
    position absolute
    width 3%
    height 3%
    top 65%
    left 75%
    background none
    border 7px solid olive
    border-radius 50%
    transform rotate(-30deg)
.olive-4
    position absolute
    width 3%
    height 3%
    top 30%
    left 50%
    background none
    border 7px solid olive
    border-radius 50%
    transform rotate(70deg)
.olive-5
    position absolute
    width 3%
    height 3%
    top 2%
    left 45%
    background none
    border 7px solid olive
    border-radius 50%
    transform rotate(-45deg)

@keyframes heartbeat {
  0% {
    width 110%
    height 110%
    left -5%
    top -5%
  }
  100% {
    width 80%
    height 80%
    left 10%
    top 10%
  }
}
@keyframes armwave {
  0% {
    transform rotate(-45deg)
  }
  6% {
    transform rotate(0deg)
  }
  12% {
    transform rotate(45deg)
  }
  18% {
    transform rotate(85deg)
  }
  24% {
    transform rotate(45deg)
  }
  30% {
    transform rotate(85deg)
  }
  36% {
    transform rotate(45deg)
  }
  42% {
    transform rotate(0deg)
  }
  48% {
    transform rotate(-45deg)
  }
}