<section>
  <div class="shoulder"></div>
  <div class="hair-bottom"></div>
  <div class="neck"></div>
  <div class="ear"></div>
  <div class="hair-left"></div>
  <div class="face">
    <div class="forehead"></div>
    <div class="chin"></div>
    <div class="mouth"></div>
    <div class="eyebrow"></div>
    <div class="eyebrow"></div>
    <div class="eye-line"></div>
    <div class="eye-line"></div>
    <div class="eye"></div>
    <div class="eye"></div>
    <div class="nose"></div>
  </div>
  <div class="hair-side"></div>
  <div class="ear"></div>
  <div class="sideburn"></div>
</section>

body { overflow: clip;}
section {
  --skin: #ffe7d8;
  --skin-dark: #f9dacb; #ecdaca;
  --skin-semi: #a001;
  --skin-semi2: #aa000008;
  --skin-semi3: #aa000004;
  --shirt: #369;
  --hair: #963;
  --hair-dark: #753;
  --eye: #5f7c61; #5f9c61; #0f619c;

  /*   --skin: #963;
  --skin-dark: #741c;
  --skin-semi: #5205;
  --skin-semi2: #55220008;
  --skin-semi3: #55220004;
  --shirt: #ddd;
  --hair: #531;
  --hair-dark: #432;
  --eye: #3c1f21; */

  font-size: 1vmin; calc(100vh / 80); 1vmin;
  width: 80em;
  aspect-ratio: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  /*   font-size: calc(100vh / 80);
  top: 0;
  left: auto;
  right: 0;
  transform: none; */

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

  .hair-left {
    width: 30%;
    height: 65%;
    border: 0.5em solid;
    border-left: 0.8em solid;
    border-radius: 100% / 70% 70% 120% 120%;
    background: var(--hair-dark);
    transform: rotate(-8deg);
    top: -15%;
    left: 20%;
  }

  .hair-side {
    width: 50%;
    height: 50%;
    background: var(--hair-dark);
    border-radius: 40%/100%;
    border: 0.6em solid;
    border-left: 0.75em solid;
    transform: rotate(-3deg);
    top: -20%;
    left: 83%;
  }

  .hair-bottom {
    width: 21%;
    height: 45%;
    border: 0.5em solid;
    border-right: 0.8em solid;
    border-radius: 100% / 70% 70% 120% 120%;
    background: var(--hair-dark);
    transform: rotate(30deg);
    top: 29%;
    left: 75%;
  }

  .neck {
    bottom: 2%;
    right: 7%;
    width: 60%;
    height: 44%;
    border-radius: 100% / 20%;
    transform: skewY(-3deg);
    background: 
      radial-gradient(50% 80% at -20% 50%, #000 99%, #0000) 0 0 / 60% 100% no-repeat,
      radial-gradient(40% 90% at 120% 15%, #000 99%, #0000) 100% 0 / 60% 100% no-repeat,
      /*       radial-gradient(40% 120% at 50% -10%, var(--skin-dark) 80%, #0000 0),
      radial-gradient(46% 135% at 46% -20%, var(--skin-dark) 80%, #0000 0), */
      linear-gradient(45deg, #0000 75%, var(--skin-dark) 80%),
      linear-gradient(-55deg, #0000 60%, var(--skin-dark) 65%),
      var(--skin);
    -webkit-mask:
      radial-gradient(46% 100% at -20% 50%, #0000 99%, #000) 0 0 / 60% 100% no-repeat,
      radial-gradient(37% 90% at 120% 15%, #0000 99%, #000) 100% 0 / 60% 100% no-repeat;
    mask:
      radial-gradient(46% 100% at -20% 50%, #0000 99%, #000) 0 0 / 60% 100% no-repeat,
      radial-gradient(37% 90% at 120% 15%, #0000 99%, #000) 100% 0 / 60% 100% no-repeat;

    &::before {
      content: "";
      width:57%;
      height: 130%;
      border-radius: 100% / 60% 60% 130% 130%;
      background: var(--skin-dark);
      transform: rotate(20deg);
      top: -40%;
      left: 23%;
      filter: blur(1em);
      box-shadow: 1.5em 4em 0 -1em #6001;
    }
  }

  .shoulder {
    bottom: -6%;
    left: 28%;
    width: 70%;
    height: 20%;

    &::before {
      content: "";
      width: 140%;
      height: 100%;
      top: 35%;
      border: 0.35em solid;
      border-top: 0.75em solid;
      border-radius: 100%;
      transform: translate(-50%) rotate(-15deg);
      background: var(--shirt);
    }

    &::after {
      content: "";
      width: 100%;
      height: 100%;
      border: 0.4em solid;
      border-top: 0.75em solid;
      border-bottom: 1em solid;
      border-radius: 50% / 100% 80% 30% 0;
      transform: rotate(-5deg);
      background: var(--skin);
      box-shadow:
        -7em 1em var(--shirt),
        -7.5em 0.5em,
        5em 1.5em var(--shirt),
        6em 1.25em;
    }
  }

  /*   .sideburn {
  width: 12%;
  height: 18%;
  background: #f005;
  border-radius: 50% / 0 0 100% 100%;
  border: 0.5em solid;
  border-left-width:0.6em;
  background: 
  radial-gradient(100% 100% at 100% 70%, #000 60%, var(--hair-dark) 61%);
  -webkit-mask: 
  radial-gradient(100% 100% at 100% 69%, #0000 53%, var(--hair-dark) 54%);
  mask: 
  radial-gradient(100% 100% at 100% 69%, #0000 53%, var(--hair-dark) 54%);
  clip-path: polygon(0 0%, 100% 40%, 100% 100%, 0 100%);
  top: 17.5%;
  left: 83%;
  rotate: 11deg;
} */
  .sideburn {
    width: 13%;
    height: 18%;
    border-radius: 50% / 0 0 100% 100%;
    border: 0.5em solid;
    border-left-width:0.6em;
    background: 
      radial-gradient(100% 100% at 100% 70%, #000 60%, var(--hair-dark) 61%);
    -webkit-mask: 
      radial-gradient(100% 100% at 100% 69%, #0000 53%, var(--hair-dark) 54%);
    mask: 
      radial-gradient(100% 100% at 100% 69%, #0000 53%, var(--hair-dark) 54%);
    clip-path: polygon(0 45%, 100% 40%, 100% 100%, 0 100%);
    top: 15.2%;
    left: 84.85%;
    rotate: 19deg;
  }

  .ear {
    top: 15%;
    left: 21%;
    width: 30%;
    height: 45%;

    border: 0.7em solid;
    border-left: 1em solid;
    border-radius: 100% / 70% 70% 120% 120%;
    background: var(--skin-dark);
    transform: rotate(-15deg);


    & ~ & {
      border-radius: 100% / 70% 70% 130% 120%;
      width: 23%;
      height: 40%;
      left: 84.4%;
      top: 18.5%;
      background: linear-gradient(90deg, #0000, var(--skin) 5%) no-repeat;
      border: 1em solid;
      border-left: 0.5em solid #0000;
      transform: rotate(12deg) scale(0.92);

      clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 24% 100%, 22% 80%, 0 80%);
      background: 
        radial-gradient(50% 50% at 0% 60%, #0000 20%,var(--skin) 0) no-repeat;

      &::after {
        content: "";
        width: 80%;
        height: 60%;
        border-radius: 100% / 80% 80% 120% 150%;
        border: 0.5em solid;
        border-left-width: 0.66em;
        border-bottom: 1.25em solid #0000;
        top: 10%;
        left: 19%;
        transform: rotate(5deg);
        background: 
          radial-gradient(100% 50% at 3% 100%, #0000 92%, #000 93% 99%, #0000) 0% -40% / 55% 80% no-repeat,
          linear-gradient(var(--skin-dark) 20%, #0000) no-repeat;
      }

      &::before {
        content:"";
        width: 60%;
        height: 70%;
        transform: rotate(-2deg);
        top: 15%;
        left: 15.5%;

        background:
          radial-gradient(50% 50% at 100% 0%, #0000 82%, #000 83% 99%, var(--skin)) -13% 114% / 50% 30%,
          /*           radial-gradient(100% 50% at 2% 100%, #0000 92%, #000 93% 99%, #0000) 40% -100% / 60% 80%, */
          radial-gradient(at 5% 50%, var(--skin) 23%, #000 24% 30%, vaR(--skin-dark) 31%, #0000 60%) 47% 98% / 60% 60%
          ;
        background-repeat: no-repeat;
      }
    }
  }

  .face {
    width: 80%;
    aspect-ratio: 1;
    top: 0;
    right: 0;

    .eye {
      --x1: 34%;
      --x2: 25%;
      top: 31%;
      left: 8%;
      width: 22%;
      height: 6.5%;
      background: #fff9;
      border-radius: 50% / 80% 80% 10% 20%;
      border-radius: 50% / 80% 80% 40% 50%;
      border-radius: 50% 50% 50% 50% / 30% 20% 80% 90%;
      border: 0.25em solid var(--skin);
      border-top: 0.75em solid;
      border-bottom: 0.35em solid;
      border-left: 0.25em solid;

      aoverflow: hidden;
      transform: rotate(-1deg);
      box-shadow: 
        inset 1em 0 0 -0.5em #000,
        -0.75em -0.3em 0 -0.25em #000,
        0 -2em 1em 1.5em var(--skin-semi2),
        1em 1em 0.5em -0.25em var(--skin-semi3);

      &::before {
        content: "";
        width: 45%;
        aspect-ratio: 1.1;
        border: 0.5em solid;
        border-left: 0.6em solid;
        border-right: 0.7em solid;
        border-radius: 50%;
        left: 50%;
        top: 35%;
        transform: translate(-50%, -50%);
        background:
          radial-gradient(circle at var(--x1) 40%, #fff 14%, #0000 14.5%),
          radial-gradient(circle at var(--x2) 60%, #fff 8%, #0000 8.5%),
          radial-gradient(circle at 50% 55%, #000 24%, #fa53 0, #0000 50%),
          repeating-conic-gradient(at 50% 55%, #0000 0 11deg, #fff2 0 13deg),
          repeating-conic-gradient(at 50% 55%, #0000 0 7deg, #0002 0 11deg),
          repeating-conic-gradient(at 50% 55%, #0000 0 15deg, #fff1 0 17deg),
          var(--eye);
        clip-path: polygon(0 30%, 100% 30%, 100% 86%, 0 86%);
      }

      &::after {
        content: "";
        width: 107%;
        height: 50%;
        left: 50%;
        transform: translate(-55%, -100%) skewX(50deg) rotate(1deg);
        border-radius: 100% 30% 40% 0%;
        border-bottom: 0;
        border-right: 0.6em solid;
        border-top: 0.25em solid;
        mask: linear-gradient(90deg, #0000 10%, #000);
      }

      & ~ & {
        --x1: 66%;
        --x2: 75%;
        transform: scaleX(-1) rotate(-1deg);
        left: 48%;
        &::before {
          left: 52%;
        }
      }
    }

    .eye {
      border-radius: 50% / 80% 80% 40% 50%;
      border-top: 0.55em solid;
      border-bottom: 0.35em solid;
      box-shadow: 
        inset 1em 0 0 -0.5em #000,
        -0.25em -0.3em 0 -0.25em #000,
        0 -2em 1em 1.5em var(--skin-semi2),
        1em 1em 0.5em -0.25em var(--skin-semi2);

      &::before {
        clip-path: polygon(0 29%, 100% 29%, 100% 89%, 0 89%);
      }

      &::after {
        left: 47%;
        top: 46%;
        height: 90%;
        transform: translate(-55%, -100%) rotate(-2deg) skewX(40deg) rotate(-4deg);
        border-radius: 50% / 100% 50% 0 0;
        mask: linear-gradient(90deg, #0000 10%, #000 98%, #0000);
      }
    }

    /*     .eye-line {
    width: 20%;
    height: 9%;
    border-radius: 50% / 80% 80% 10% 20%;
    border-radius: 50% 50% 50% 50% / 14% 20% 80% 80%;
    border: 0.25em solid #0000;
    border-top: 0.5em solid vaR(--skin-dark);
    top: 28.75%;
    left: 9%;
    transform: rotate(-1deg);
    opacity: 0.4;


    & ~ & {
    transform: scaleX(-1);
    left: 48%;
  }
  } 

    .eye {
    width: 22%;
    height: 7%;
    background: #fffa;
    border-radius: 50% / 80% 80% 10% 20%;
    border-radius: 50% / 80% 80% 40% 50%;
    border-radius: 50% 50% 50% 50% / 30% 20% 80% 80%;

    border: 0.25em solid var(--skin);
    border-top: 0.5em solid;
    border-bottom: 0.6em solid;
    top: 30%;
    left: 8%;
    overflow: hidden;
    box-shadow: 0 -2em 1em 1.5em var(--skin-semi2);
    transform: rotate(-1deg);

    &::before {
    content:"";
    width: 50%;
    aspect-ratio: 1;
    border: 0.5em solid;
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: 
    radial-gradient(circle at 30% 35%, #fff 10%, #0000 11%),
    radial-gradient(circle at 25% 52%, #fff 5%, #0000 6%),
    radial-gradient(circle, #000 30%, #798 31%)
  }

    & ~ & {
    transform: scaleX(-1) rotate(-1deg);
    left: 48%;
    &::before {
    transform: translate(-50%, -50%) scaleX(-1);
  }
  }
  } */

    .forehead {
      width: 85%;
      height: 45%;
      border-left: 1em solid;
      border-right: 1em solid #0000;
      border-radius: 10% / 100%;
      left: 3%;
      top: -5%;
      background: 
        radial-gradient(12.25% 100% at -10% 120%, #000 99%, #0000) no-repeat,
        var(--skin);
      -webkit-mask: radial-gradient(13% 90% at -10% 120%, #0000 99%, #000) no-repeat;
      mask: radial-gradient(13% 90% at -10% 120%, #0000 99%, #000) no-repeat;
    }

    .eyebrow {
      width: 25%;
      height:4%;
      left: 5.5%;
      top: 18%;
      top: 20.5%;
      filter: drop-shadow(0 2em 1em var(--skin-semi));
      transform: rotate(-1deg);


      &::before, &::after {
        content: "";
        top: 7%;
        left: 0;
        width: 100%;
        height: 100%;
        background:  black;
        border-radius: 50% / 100% 50% 10% 0%;
        transform: rotate(-3deg) skewX(10deg) scale(1.1) scaleY(1.3);
        -webkit-mask: radial-gradient(200% 110% at 60% 110%, #0000 30%, #000 31%);
        mask: radial-gradient(180% 150% at 45% 110%, #0000 35%, #000 36%);

      }

      &::after {
        top: 0;
        background: 
          repeating-conic-gradient(at 90% 500%, #0000 0 0.3%, #0002 0 0.4%),
          var(--hair-dark);
        transform:rotate(-3deg)  skewX(10deg);
        box-shadow: inset 0 0 0.5em 0.5em var(--hair-dark);
      }

      & ~ & {
        width: 27%;
        transform: scaleX(-1) rotate(-1deg);
        left: 47%;
      }
    }

    .chin {
      width: 100%;
      height: 100%;
      border-left: 1em solid;
      border-top: 0.25em solid;
      border-bottom: 0.5em solid;
      border-right: 1em solid #0000;
      border-radius: 100%  50% 120% 35%;
      transform: rotate(-35deg) skewY(-5deg) skewX(2deg);
      top: -10%;
      clip-path: polygon(80% 70%, 60% 95%, -100% 120%, 0 120%, 0% 5%);
      box-shadow: -0.2em 0.3em;
      background: 
        radial-gradient(circle at 5% 45%, #ff000008, #0000 25%),
        radial-gradient( at 50% 75%, #ff000008, #0000 25%),
        var(--skin);

      &::before {
        content: "";
        width: 9%;
        height: 4%;
        top: 79%;
        left: 8.5%;
        border-radius:50% / 50% 120% 0 120%;
        transform: rotate(40deg);
        background: 
          linear-gradient(185deg, #000 25%, #0000 0),
          radial-gradient(farthest-side at 100% 0, var(--skin-semi), #0000);
        background-repeat: no-repeat;
      }
    }

    .mouth {
      width: 12%;
      height: 5%;
      top: 76%;
      left: 29%;
      border-radius:50% / 50% 120% 0 120%;
      background: 
        linear-gradient(185deg, #000 25%, #0000 27%);
      background-repeat: no-repeat;
      box-shadow: 0.2em -1em 0 -0.5em var(--skin-semi2);


      &::before {
        content:"";
        width: 120%;
        height: 100%;
        border-radius:50% / 50% 120% 0 120%;
        background: 
          linear-gradient(185deg, #000 28%, #0000 20%);
        background-repeat: no-repeat;
        transform: scaleX(-1) rotate(-5deg);
        left: 75%;
        top: 6%;
        box-shadow: 0.2em -1em 0 -0.5em var(--skin-semi2);

      }

      &::after {
        content:"";
        width: 180%;
        height: 90%;
        background: 
          repeating-linear-gradient(90deg, #0000 0 1%, var(--skin-semi3) 0 2%),
          linear-gradient(#f000, var(--skin-semi2));
        border-radius: 50% / 10% 10% 130% 150%;
        border-radius: 50% / 0 0 100% 100%;
        left: 95%;
        top: 5%;
        background-repeat: no-repeat;
        transform: translate(-50%, 0) rotate(2deg);
        /*         box-shadoW: 0.1em 1.2em 0 -0.9em; */
        /*         border: 6.25em solid #0000;
        border-top: 0;
        border-bottom: 0.7em solid; */

      }
    }

    .nose {
      width: 4%;
      height: 1%;
      border-radius: 50% / 100% 100% 0 0;
      border: 0.24em solid #0000;
      border-top: 0.5em solid;
      top: 63%;
      left: 41%;
      transform: rotate(4deg) scale(1.25);


      &::before {
        content: "";
        width: 60%;
        height: 120%;
        border-radius: 50% / 100% 100% 0 0;
        border: 0.24em solid #0000;
        border-top: 0.5em solid;
        top:-290%;
        left: -180%;
        transform: rotate(15deg);
      }

      &::after {
        content: "";
        width: 300%;
        right:0;
        height: 2.5em;
        background: var(--skin-semi);
        border-radius: 50% / 20% 20% 100% 110%;
        transform: translate(0, -30%);
        box-shadow: 0 -0.25em 0.25em var(--skin-dark);
      }
    }

    /*     .nose {
    width: 14%;
    height: 36%;
    top: 29%;
    left: 26%;
    filter: drop-shadow(-1.25em 1em 0.5em var(--skin-semi));

    &::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f004;
    background:
    linear-gradient(#0000 96%, #000 96.5%),
    radial-gradient(100% 109% at -5% -5%, #0000 95%, #000 96% 99%, var(--skin));
    background-repeat: no-repeat;
    transform: skewY(20deg) rotate(-9deg);
    border-radius: 100% / 20% 20% 10% 30%;
    -webkit-mask: radial-gradient(94% 104% at 100% 100%, #000 89%, #0000 0);
    mask: radial-gradient(94% 104% at 100% 100%, #000 89%, #0000 0);
  }

  } */

    /*     .nose {
    width: 7.5%;
    height: 6%;
    top: 62%;
    left: 31%;
    border-radius:50% 100% 40% 60% / 100%;
    transform: rotate(10deg) skewY(6deg) ;
    background: 
    radial-gradient(100% 75% at 25% 75%, #0000 85%, #000 87%),
    radial-gradient(85% 75% at 75% 25%, var(--skin-semi) 40%, #a000)
    var(--skin);
    background-repeat: no-repeat;
    abox-shadow: -1em -1em 1em -1em var(--skin-semi);

    &::before {
    content: "";
    width: 120%;
    height: 400%;
    background: #f002;
    transform-origin: 0 100%;
    transform:skewY(-6deg) rotate(-10deg) skewY(10deg) ;
    bottom: 90%;
    left: -25%;
    background:
    radial-gradient(100% 130% at 0 -10%,#0000 80%, var(--skin-semi) 90%, #000 91% 99%, #0000 );
    box-shadow: 0 1.5em 0.5em -1em var(--skin-semi)

  } 
  }
    */
  }
}