<div id="cartoon" role="img" aria-labelledby="description">
  <div id="description">Cartoon of a young man with curly hair</div>
<!--   <div class="hair-neck"></div> -->
  <div class="body"></div>
  <div class="ear"></div>
  <div class="ear"></div>
  <div class="neck"></div>
  <div class="hair-back"></div>
  <div class="face">
    <div class="cheeks"></div>
    <div class="eye"><div class="pupil"></div></div>
    <div class="eye"><div class="pupil"></div></div>
    <div class="mouth"></div>
    <div class="freckles"></div>
    <div class="nose"></div>
  </div>
  <div class="hair-top"></div>
</div>

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

html, body {
  overflow: hidden;
}

#cartoon {
  --line: #222;
  --skin: #fca;
  --hair: #963;
  --iris: #69c;
  --shirt: #fff;
  --shadow: #5002;
  width: 80vmin;
  height: 80vmin;
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  color: var(--line);
}

#description {
  width: 1px;
  height: 1px;
  overflow: hidden;
  position: absolute;
  left: -200vw;
}

#cartoon div,
#cartoon div.ha,
#cartoon div.hb {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.neck {
  width: 20%;
  height: 20%;
  background: var(--skin);
  background-image: radial-gradient(circle at 50% -20%, var(--shadow) 65%, #0000 0);
  top: 70%;
  left: 50%;
  transform: translate(-50%);
  border: 0.5vmin solid;
  border-bottom: 0;
  clip-path: polygon(0 0, 0 100%, 100% 95%, 100% 0);
}

.face {
  width: 45%;
  height: 60%;
  background: var(--skin);
  left: 50%;
  top: 20%;
  transform: translate(-50%, 0);
  border-radius: 100% / 50% 50% 120% 120%;
  border: 0.5vmin solid;
  border-bottom-width: 0.85vmin;
  border-top-width: 0.33vmin;
  box-shadow:
    inset -1.25vmin 0 var(--shadow),
    inset 0.75vmin 0 var(--shadow)
}

.mouth {
  width: 50%;
  height: 12%;
  border-radius: 100%;
  box-shadow: -0.5vmin 1.4vmin 0 -1vmin;
  top: 68%;
  left: 50%;
  transform: translateX(-50%) rotate(5deg);
}

.ear {
  width: 15%;
  height: 25%;
  background: var(--skin);
  border: 0.5vmin solid;
  border-radius: 100% / 50% 50% 20% 120%;
  box-shadow: -0.125vmin -0.25vmin;
  top: 42%;
  left: 20%;
  transform: rotate(-15deg);
}

.ear::before {
  content: "";
  display: block;
  width: 5vmin;
  height: 5vmin;
  border: 0.5vmin solid;
  border-left-width: 0.85vmin;
  border-radius: 50%;
  top: 47%;
  left: 38%;
  position: absolute;
}

.ear::after {
  content: "";
  display: block;
  width: 80%;
  height: 70%;
  border: 0.5vmin solid;
  border-left: 0.25vmin solid var(--skin);
  border-radius: 70%;
  top: 15%;
  left: 10%;
  position: absolute;
  transform: rotate(-5deg);
  box-shadow: inset -6vmin 1vmin var(--shadow);
}

.ear + .ear {
  left: auto;
  right: 21%;
  transform: scaleX(-1) rotate(-17deg);
}

.ear + .ear::before {
  left: 33%;
}

.eye {
  width: 30%;
  height: 30%;
  background: #fff;
  border: 0.5vmin solid;
  border-right-width: 0.33vmin;
  top: 30%;
  left: 12%;
  border-radius: 100% / 100% 60% 10% 15%;
  overflow: hidden;
  transform: rotate(-4deg);
  box-shadow: 
    0 -0.125vmin,
    0 -2vmin 0 1vmin var(--skin),
    -0.25vmin -6vmin 0 -0.5vmin;
}

.eye + .eye {
  left: auto;
  right: 12%;
  transform: scaleX(-1) rotate(-4deg);
}

.pupil {
  left: 18%;
  top: 40%;
  width: 7vmin;
  height: 7vmin;
  background: var(--iris);
  border-radius: 50%;
  border: 0.33vmin solid;
  background-image: 
    radial-gradient(circle at 30% 32%, #fff 7%, #0000 0),
    radial-gradient(circle at 40% 27%, #fff 4%, #0000 0),
    radial-gradient(var(--line) 35%, #0000 0);
}

.eye + .eye .pupil {
  transform: scaleX(-1);
}

.nose {
  width: 20%;
  height: 12%;
  border-radius: 50%;
  top: 60%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 0.5vmin -0.5vmin;
  background: var(--skin);
}

.cheeks {
  width: 80%;
  height: 6%;
  background: #f002;
  border-radius: 50%;
  top: 57%;
  left: 50%;
  transform: translate(-50%, 0);
  filter: blur(1vmin)
}

.freckles {
  width: 0.75vmin;
  height: 0.75vmin;
  background: var(--shadow);
  color: var(--shadow);
  top: 62%;
  border-radius: 50%;
  left: 25%;
  box-shadow: 
    2vmin 0.5vmin 0 -0.125vmin,
    3.5vmin -0.125vmin 0 -0.175vmin,
    -2vmin 0.75vmin 0 -0.125vmin,
    17vmin 0,
    19vmin 0.5vmin 0 -0.125vmin,
    15vmin 0.5vmin 0 -0.05vmin,
    13.5vmin -0.5vmin 0 -0.125vmin
}

.hair-top,
.hair-back,
.hair-neck {
  width: 15%;
  height: 15%;
  background: var(--hair);
  border-radius: 50%;
  left: 50%;
  top: 12%;
  transform: translate(-50%, 0);
  filter: 
    drop-shadow(0 0.75vmin var(--line))
    drop-shadow(0 1vmin var(--shadow));
  color: var(--hair);
  box-shadow:
    -6vmin 0vmin 0 -2.25vmin,
    -6vmin 1vmin 0 -2vmin var(--shadow),
    -6vmin 1vmin 0 -2vmin,
    -14vmin 2vmin 0 -1vmin,
    7vmin 0.5vmin 0 -2vmin,
    7vmin 1.25vmin 0 -1.75vmin var(--shadow),
    7vmin 1.25vmin 0 -1.75vmin,
    14vmin 2.25vmin 0 -1.75vmin,
    inset -1vmin -1vmin var(--shadow)
}

.hair-back {
  filter: 
    drop-shadow(-0.5vmin 0 var(--line))
    drop-shadow(0.5vmin 0 var(--line))
    drop-shadow(0 -0.5vmin var(--line));
  box-shadow: 
    -15vmin 18vmin,
    -17vmin 10vmin 0 2vmin,
    -20vmin 1vmin 0 -2vmin,
    -12vmin -3vmin 0 1vmin,
    -2vmin -5vmin 0 2vmin,
    1vmin -6vmin 0 4vmin,
    10vmin -7vmin 0 -1vmin,
    15vmin -5vmin,
    18vmin 3vmin 0 -1vmin,
    21vmin 9vmin,
    20vmin 15vmin 0 -3vmin,
    15vmin 19vmin 0 -1vmin
}

.hair-neck {
  filter: 
    drop-shadow(-0.5vmin 0 var(--line))
    drop-shadow(0.5vmin 0 var(--line))
    drop-shadow(0 0.5vmin var(--line));
  box-shadow: 
    12vmin 37vmin 0 -2vmin,
    10vmin 41vmin 0 -3.5vmin,
    -12vmin 37vmin 0 -2vmin,
    -9vmin 40.5vmin 0 -3vmin
    ;
}

.body {
  background: var(--shirt);
  width: 80%;
  height: 40%;
  border-radius: 100% / 75% 80%;
  top: 87%;
  left: 50%;
  transform: translate(-50%, 0);
  box-shadow: 
    0 -0.5vmin 0 0.125vmin,
    inset 0 0.5vmin var(--shadow);
  background-image:
    radial-gradient(circle at 50% -20%, var(--skin) 27%, var(--line) 0 28%, transparent 0);
}


/***/

#youtube {
  z-index: 2;
  display: block;
  width: 100px;
  height: 70px;
  position: absolute;
  bottom: 30px;
  right: 30px;
  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;
}