<div class="cloud cloud-3"></div>
<div class="cloud cloud-4"></div>
<div class="cloud cloud-1"></div>
<div class="cloud cloud-2"></div>
<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>
<div class="star star-5"></div>
<div class="star star-6"></div>

<div class="heart heart-1"></div>
<div class="heart heart-2"></div>
<div class="heart heart-3"></div>

<div class="cupid">
  <div class="body">
    <div class="wing"></div>
    <div class="wing"></div>
    <div class="leg"></div>
    <div class="leg"></div>
    <div class="robe"></div>
    <div class="chest"></div>
    <div class="arm arm-bottom"></div>
    <div class="bow"></div>
    <div class="arrow-head"></div>
    <div class="arrow"></div>
    <div class="arm arm-top"></div>
    <div class="neck"></div>
  </div>
  <div class="head">
    <div class="face">
      <div class="mouth"></div>
      <div class="eye"></div>
      <div class="eye"></div>
      <div class="cheek"></div>
      <div class="cheek"></div>
    </div>
    <div class="hair"></div>
    <div class="ear"></div>
  </div>
</div>

<a id="youtube" href="https://www.youtube.com/watch?v=z-lcS17IScU" target="_blank">
  <span>See how this drawing was made</span>
</a>

/*
Inspired by Ian Mikraz: A cupid
https://unsplash.com/illustrations/a-cupid-cupid-cupid-cupid-cupid-cupid-cupid-cup-clQmyiGfeKo
*/
:root {
  --skin: #fa9;
  --skin-dark: #e77;
  --robe: #fff8e8;
  --robe-dark: #eee8d8;
  --hair: #edb;
  --hair-dark: #da9;
  --hair-light: #fff8e8;
  --wings: #fff8e8;
  --wings-dark: #edb;
  /* pintor, si pintas con amor... */
/*   --skin: #963;
  --skin-dark: #741;
  --hair: #222;
  --hair-dark: #000;
  --hair-light: #666; */
}

body {
  margin: 0;
  background: #9cd;
  overflow: hidden;
  font-size: 1vmin;
}

body * {
  &, &::before, &::after {
    position: absolute;
    box-sizing: border-box;
  }
}

@keyframes pop {
  0% { transform: rotate(var(--rotate)) scale(0); opacity: 0; }
  25%, 75% { transform: rotate(var(--rotate)) scale(1); opacity: 1; }
  100% { transform: rotate(var(--rotate)) scale(2); opacity: 0;}
}

.heart {
  --rotate:115deg;
  width: 4em;
  height: 4em;
  background: #f34;
  border-radius: 0 0.5em 0 0;
  transform: rotate(var(--rotate));
  left: 126%;
  top: 2.5%;
  z-index:1;
  animation:pop 4s infinite ;

  &::before, &::after{
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: inherit;
    transform: translateX(-50%);
    z-index: -1;
  }

  &::after {
    transform: translateY(50%);
    background:
      radial-gradient(circle at 50% 70%, #fff8e888 0.5em, #0000 0),
      #f34;
  }
  
  &.heart-1 {
    top: 20%;
    left: calc(50% - 30em);
    --rotate: 115deg;
     animation-delay:0s;
  }
  
  &.heart-2 {
    top: 30%;
    left: calc(50% + 20em);
    --rotate: 145deg;
     animation-delay:-2s;
  }
  
  &.heart-3 {
    top: 50%;
    left: calc(50% - 25em);
    --rotate: 125deg;
     animation-delay:-5s;
  }
}

.cloud {
  bottom: 0;

  &.cloud-1,
  &.cloud-2,
  &.cloud-3,
  &.cloud-4 {
    --extra: ;
    --c: #fff8e8;
    left: 0;
    width: 50em;
    height: 50em;
    background: #f005;
    background:
      var(--extra)
      radial-gradient(10% 10% at 90% 100%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(15% 12% at 73% 90%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(8% 7% at 60% 80%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(18% 17% at 40% 70%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(14% 14% at 25% 60%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(18% 17% at 10% 40%, var(--c) calc(100% - 1px), #0000),
      linear-gradient(to top right, var(--c) 40%, #0000 0);
  }

  &.cloud-2, &.cloud-4 {
    --extra: radial-gradient(13% 12% at 25% 45%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(14% 14% at 80% 90%, var(--c) calc(100% - 1px), #0000),
      radial-gradient(14% 14% at 65% 80%, var(--c) calc(100% - 1px), #0000),;
  }

  &.cloud-2,
  &.cloud-3 {
    left: auto;
    right: 0;
    transform: scaleX(-1);
  }

  &.cloud-3, &.cloud-4 {
    --c: #cef;
    height: 57em;
    width: 55em;
  }

  &.cloud-4 {
    height: 54em;
    width: 52em;
    left: -1%;
  }
}

@keyframes twinkle {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.25); opacity: 1; }
}


.star {
  width: 1em;
  aspect-ratio: 1;
  background: #fff8e8;
  border-radius: 50%;
  animation: twinkle 2.3s linear infinite;

  &.star-1 { top: 20%; left: 15%; animation-delay: -0.4s; }
  &.star-2 { top: 72%; left: 40%; animation-delay: -0.0s; }
  &.star-3 { top: 70%; left: 43%; animation-delay: -0.15s; }
  &.star-4 { top: 40%; left: 90%; animation-delay: -1.1s; }
  &.star-5 { top: 10%; left: 80%; animation-delay: -0.7s; }
  &.star-6 { top: 90%; left: 50%; animation-delay: -0.9s; }
}

@keyframes float {
  0%, 100% { transform: translate(-50%, -65%); }
  50% { transform: translate(-50%, -60%); }
}

@keyframes flap1 {
  0% { transform: translate(-50%, 0) rotate(0deg); }
  100% { transform: translate(-50%, 0) rotate(10deg); }
}

@keyframes flap2 {
  0% { transform: translate(-50%, 0) scaleX(-1) rotate(25deg); }
  100% { transform: translate(-50%, 0) scaleX(-1) rotate(30deg); }
}


.cupid {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
  width: 60em;
  height: 60em;
  animation: float 6s infinite;

  .body {
    width: 60%;
    height: 50%;
    left: 53%;
    bottom: 0;
    transform-origin: 50% 0;
    transform: translate(-50%) rotate(10deg);
    
    .wing {
      width: 75%;
      height: 50%;
      transform-origin: 100% 50%;
      top: 2%;
      left: 2%;
      transform: translate(-50%, 0) rotate(0deg);
      border-radius: 50% / 30% 50% 60% 100%;
      background:
        radial-gradient(23% 80% at 92% 105%, var(--wings-dark) 99%, #0000),
        radial-gradient(50% 29% at 50.5% 25%, var(--wings) calc(100% - 1px), #0000),
        radial-gradient(40% 40% at 56% 48%, var(--wings) calc(100% - 1px), #0000),
        radial-gradient(30% 15% at 72% 85%, var(--wings) calc(100% - 1px), #0000),
        radial-gradient(50% 31% at 50% 30%, var(--wings-dark) calc(100% - 1px), #0000),
        radial-gradient(40% 40% at 54% 55%, var(--wings-dark) calc(100% - 1px), #0000),
        radial-gradient(30% 25% at 70% 80%, var(--wings-dark) calc(100% - 1px), #0000),
        #0000;
      animation: flap1 0.7s alternate linear infinite;
      
      &::before {
        content: "";
        width: 40%;
        height: 50%;
        border-radius: 30% 0 0 100%;
        box-shadow: -0.5em 0.5em var(--wings-dark);
        top: 10%;
        left: 10%;
        clip-path: polygon(-10% -10%, 80% 100%, 0 90%);
      }
      
      &::after {
        content: "";
        width: 22%;
        aspect-ratio: 1;
        border-radius: 30% 0 0 100%;
        box-shadow: -0.5em 0.5em var(--wings-dark);
        transform: rotate(-18deg);
        top: 35%;
        left: 32%;
        filter: drop-shadow(4.25em 5em var(--wings-dark));
      }
      
      & ~ & {
        top: 6%;
        left: 10%;
        transform: translate(-50%, 0) scaleX(-1) rotate(30deg);
        animation: flap2 0.7s alternate linear infinite;
        
        &::after {
          background: var(--wings);
        }
      }
    }

    .neck {
      width: 13%;
      height: 30%;
      background: var(--skin-dark);
      border-radius: 100% / 120% 120% 30% 30%;
      left: 43%;
      top: 1%;
      transform: translate(-50%, -70%);
      mask: radial-gradient(20% 120% at 0 0, #0000 calc(100% - 1px), #000);

      
    }

    .robe {
      width: 32%;
      left: 50%;
      top: 10%;
      height: 75%;
      border-radius: 100%; / 120% 120% 60% 60%;
      transform: translate(-50%)rotate(10deg);
      background: var(--robe);

      &::before, &::after {
        content: "";
        width: 100%;
        height: 100%;
        background: var(--robe);
        border-radius: 50%;
        transform-origin: 50% 20%;
        transform: rotate(-30deg);
      }

      &::after {
        transform: rotate(30deg);
        background:
          radial-gradient(45% 70% at 10% 5%, var(--robe-dark) calc(100% - 1px), #0000),
          var(--robe);
      }
    }

    .chest {
      width: 30%;
      left: 50%;
      top: 5%;
      height: 20%;
      border-radius: 50%;
      transform: translate(-50%);
      background: var(--skin);
    }

    .arm-top {
      top: 9%;
      left: 5%;
      width: 45%;
      height: 30%;
      background: var(--skin);
      border-radius: 100% 50% 50% 60%;
      transform: rotate(-7deg);


      &::before {
        content:"";
        width: 70%;
        height: 50%;
        border-radius: 0 5em 100% 5em;
        bottom: 0;
        right: 0;
        box-shadow: 0 -0.5em var(--robe);
        clip-path: polygon(20% -10%, 100% -10%, 100% 100%);
      }
    }

    .arm-bottom {
      width: 40%;
      height: 15%;
      background: var(--skin);
      border-radius: 0% 0% 0 0;
      transform:rotate(12deg);
      top: 10%;
      left: 50%;

      &::before {
        content: "";
        width: 120%;
        height: 100%;
        background: 
          radial-gradient(closest-side circle at 90% 53%, var(--skin) 99%, #0000),
          radial-gradient(closest-side circle at calc(90% - 0.25em) 50%, var(--skin-dark) 90%, #0000),
          var(--skin);
        transform: rotate(-22deg);
        border-radius: 0 3em 2em 100%;
        top: 15%;
        left: 35%;
      }
    }

    .bow {
      width: 32%;
      height: 90%;
      border-radius: 0 100% 100% 0 / 50%;
      transform: rotate(-10deg);
      left: 86%;
      top: -29%;
      box-shadow: inset -2em 0 gold;

      &::before, &::after {
        content:"";
        width: 0.25em;
        height: 80%;
        background: #753;
        transform-origin: 50% 0;
        border-radius: 1em;
        transform:rotate(47deg);
      }

      &::after {
        bottom: 0;
        transform-origin: 50% 100%;
        transform: rotate(-47deg);
      }
    }

    .arrow {
      width: 85%;
      height: 4em;
      transform: rotate(-10deg);
      left: 40%;
      top: 13%;
      border-radius: 10em;
      background: 
        repeating-linear-gradient(60deg, #0000 0 0.5em, #000 0 1em) 4em 20% / 2.9em 50% no-repeat,
        repeating-linear-gradient(-60deg, #0000 0 0.5em, #000 0 1em) 4em 80% / 2.9em 50% no-repeat,
        linear-gradient(#000 0 0) 50% 50% / 100% 1em no-repeat;
    }

    .arrow-head {
      width: 4em;
      height: 4em;
      background: #f34;
      border-radius: 0 0.5em 0 0;
      transform: rotate(35deg);
      left: 126%;
      top: 2.5%;
      z-index:1;

      &::before, &::after{
        content: "";
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: inherit;
        transform: translateX(-50%);
        z-index: -1;
      }

      &::after {
        transform: translateY(50%);
      }
    }

    .leg {
      width: 15%;
      height: 50%;
      background: 
        radial-gradient(100% 50% at 10% 20%, var(--skin-dark) calc(100% - 1px), #0000),
        var(--skin);
      border-radius: 0 100% 100% 0 / 50%;
      transform: rotate(50deg) scale(1.2);
      top: 52%;
      left: 23%;

      &::before {
        content: "";
        width: 68%;
        height: 45%;
        background: var(--skin);
        border-radius: 100% 70% 120% 70%;
        top: 100%;
        left: 0;
        transform: translate(-60%, -40%) ;     
        box-shadow:
          inset -1em -0.25em var(--skin),
          inset 1em 0.5em 0 -0.5em var(--robe);
      }

      & ~ & {
        transform: rotate(10deg) scale(1.2);
        left: 50%;
        top: 60%;
        background: 
          radial-gradient(100% 50% at 30% 10%, var(--skin-dark) calc(100% - 1px), #0000),
          radial-gradient(50% 70% at 0% 40%, var(--skin-dark) calc(100% - 1px), #0000),
          var(--skin);

        &::before {
          border-radius: 100% / 60% 0% 140% 120%;
          background: var(--skin-dark);
          box-shadow: none;
        }
      }
    }
  }

  .head {
    width: 55%;
    height: 50%;
    left: 50%;
    transform: translate(-50%);

    .ear {
      width: 25%;
      height: 23%;
      background: var(--skin);
      border-radius: 80% 120% 120% 80% / 100%;
      top: 57%;
      left: -7%;

      &::before {
        content: "";
        width: 50%;
        height: 40%;
        border-radius: 80% 120% 120% 80% / 100%;
        background: var(--skin-dark);
        clip-path: polygon(0 0, 100% 0, 100% 50%, 20% 100%, 0 100%);
        transform: rotate(-10deg);
        top: 40%;
        left: 28%;
      }
    }

    .hair {
      background: var(--hair);
      width: 35%;
      height: 36%;
      top: 13%;
      left: 10%;
      border-radius: 50%;
      box-shadow: 
        10em -1em 0 -1em var(--hair),
        11em -1em 0 -1em var(--hair),
        12em -1em 0 -1em var(--hair),
        18.5em 0.25em 0 -1em var(--hair),
        15em -5.5em 0 0em var(--hair),
        7.5em -9em 0 2em var(--hair),
        /*         10em -0.35em 0 -1em var(--hair-dark),
        11em -0.35em 0 -1em var(--hair-dark),
        12em -0.35em 0 -1em var(--hair-dark), */
        19em -0.5em 0 -0.5em var(--hair-light),
        16em -6.5em 0 0em var(--hair-light),
        8em -10em 0 2em var(--hair-light),
        -7em -5em 0 -0.5em var(--hair),
        -1em -8em 0 -1em var(--hair),
        -6.5em -5.5em 0 -0.5em var(--hair-light),
        -10.5em -0.5em 0 -2em var(--hair),
        -10em 0em 0 -2em var(--hair-dark),
        -7em 4.5em 0 -0.25em var(--hair),
        /*         0.5em 0.6em 0 0.1em var(--hair-dark), */
        0 0 0 #0000;

      &::before {
        content: "";
        width: 100%;
        height: 100%;
        top: -0.5em;
        left: -0.5em;
        border-radius: 50%;
        box-shadow: 1em 1em 0 -0.25em var(--hair-dark)
      }

      &::after {
        content: "";
        width: 70%;
        height: 65%;
        top: -3.5em;
        left: 5em;
        border-radius: 50%;
        background: var(--hair);

        transform: rotate(20deg);
        box-shadow: 
          12em -0.5em 0 0.5em var(--hair),
          13em 0.25em var(--hair-dark),
          1em 1em 0 -0.5em var(--hair-dark);
      }
    }

    .face {
      width: 80%;
      height: 80%;
      border-radius: 60% 50% 55% 45% / 60% 75% 45% 55%;
      bottom:0;
      left: 50%;
      transform: translate(-50%);
      background: 
        radial-gradient(40% 20% at 65% 20%, var(--skin-dark) 70%, #0000 0),
        radial-gradient(30% 25% at 90% 19%, var(--skin-dark) 70%, #0000 0),
        radial-gradient(40% 30% at 15% 20%, var(--skin-dark) 75%, #0000 0),
        var(--skin);

      .mouth {
        width: 25%;
        height: 14%;
        border-radius: 50% / 0 0 100% 100%;
        box-shadow: 0 1em 0;
        top: 65%;
        left: 62%;
        clip-path: polygon(0 50%, 100% 50%, 100% 200%, 0 200%);
        transform: translate(-50%,-50%) rotate(-6deg);
      }

      .eye {
        width: 12%;
        height: 25%;
        top: 58%;
        left: 39%;
        transform: translate(-50%, -50%) rotate(2deg);
        border-radius: 100% / 80% 80% 120% 120%;
        box-shadow: 0 -1em 0 0.25em;
        clip-path: polygon(-100% -100%, 200% -100%, 200% 30%, -100% 30%);
        & ~ & {
          left: 80%;
          top: 56%;
          transform: translate(-50%, -50%) rotate(-5deg);
        }
      }

      .cheek {
        width: 16%;
        aspect-ratio: 1;
        background: var(--skin-dark);
        border-radius: 50%;
        top: 57%;
        left:25%;

        & ~ & {
          left: 80%;
          top: 54%;
          width: 15.75%;
        }
      }
    }
  }
}

@media (prefers-reduced-motion) {
  * { animation: none !important; }
}




/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  bottom: 20px;
  right: 20px;
  background: red;
  border-radius: 50% / 11%;
  transition: transform 0.5s;
}

#youtube:hover,
#youtube:focus {
  transform: scale(1.1);
}

#youtube::before {
  content: "";
  display: block;
  position: absolute;
  top: 7.5%;
  left: -6%;
  width: 112%;
  height: 85%;
  background: red;
  border-radius: 9% / 50%;
}

#youtube::after {
  content: "";
  display: block;
  position: absolute;
  top: 20px;
  left: 40px;
  width: 45px;
  height: 30px;
  border: 15px solid transparent;
  box-sizing: border-box;
  border-left: 30px solid white;
}

#youtube span {
  font-size: 0;
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}