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

<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>

<div class="eye-right-1"></div>
<div class="eye-right-2"></div>

<div class="eye-left"></div>

<div class="nose"></div>

<div class="mustache-1"></div>
<div class="mustache-2"></div>

// colors
$bg-color: #fff;
$dark-color: #000;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

    &:before,
    &:after {
      content: "";
      position: absolute;
    }
  }
}

.hair {
  &-1 {
    width: 26vmin;
    height: 60vmin;
    background: $dark-color;
    top: 0.5vmin;
    left: -4vmin;
    border-radius: 10vmin 10vmin 17vmin 20.5vmin;

    &::before {
      width: 42vmin;
      height: 57.8vmin;
      background: $dark-color;
      top: -3vmin;
      left: -3vmin;
      border-radius: 55% 75% 0 100% / 100% 99% 1% 18%;
    }

    &::after {
      width: 36vmin;
      height: 42vmin;
      background: $dark-color;
      top: -2.3vmin;
      left: -11vmin;
      border-radius: 58% 52% 100% 0 / 91% 100% 0 9%;
    }
  }

  &-2 {
    width: 10vmin;
    height: 10vmin;
    background: $dark-color;
    top: 42vmin;
    left: 15.8vmin;
    transform: rotate(-28deg);

    &::before {
      width: 10vmin;
      height: 13vmin;
      background: $dark-color;
      top: -10vmin;
      left: -15.7vmin;
      transform: rotate(-25deg);
      border-radius: 55% 75% 0 100% / 100% 99% 1% 18%;
    }

    &::after {
      width: 0;
      height: 0;
      border-bottom: 3vmin solid $dark-color;
      border-left: 1vmin solid transparent;
      border-right: 1vmin solid transparent;
      top: -5.2vmin;
      left: -17vmin;
      transform: rotate(195deg);
    }
  }

  &-3 {
    width: 20vmin;
    height: 30vmin;
    background: $dark-color;
    top: -5vmin;
    left: -43vmin;
    transform: rotate(-16deg);
    border-radius: 100% 0 0 0;

    &::before {
      width: 12vmin;
      height: 14vmin;
      background: $dark-color;
      top: 27vmin;
      left: -0.4vmin;
      transform: rotate(5deg);
    }

    &::after {
      width: 8.5vmin;
      height: 15vmin;
      background: $dark-color;
      top: 37vmin;
      left: -3vmin;
      transform: rotate(37deg);
      border-radius: 0 0 10vmin 0;
    }
  }

  &-4 {
    width: 8vmin;
    height: 14vmin;
    background: $dark-color;
    top: 44vmin;
    left: -44.8vmin;

    &::before {
      width: 5vmin;
      height: 5vmin;
      background: $dark-color;
      top: 11.6vmin;
      left: -1.5vmin;
      transform: rotate(-20deg) skewX(23deg);
    }

    &::after {
      width: 8vmin;
      height: 10vmin;
      background: $bg-color;
      top: 13vmin;
      left: -7.5vmin;
      transform: rotate(-20deg) skewX(23deg);
    }
  }

  &-5 {
    width: 9.4vmin;
    height: 14vmin;
    background: $dark-color;
    top: 50.4vmin;
    left: 36.9vmin;
    transform: rotate(-35deg);

    &::before {
      width: 8vmin;
      height: 17vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: 10.4vmin;
      transform: rotate(30deg);
      border-radius: 5vmin 0 0 5vmin;
    }

    &::after {
      width: 0;
      height: 0;
      border-bottom: 8vmin solid $dark-color;
      border-left: 0.8vmin solid transparent;
      border-right: 0.8vmin solid transparent;
      top: -1vmin;
      left: 13.2vmin;
      transform: rotate(205deg);
    }
  }

  &-6 {
    width: 4.7vmin;
    height: 6vmin;
    background: $dark-color;
    top: 61vmin;
    left: 38vmin;
    transform: rotate(-40deg);

    &::before {
      width: 6.5vmin;
      height: 9vmin;
      background: $dark-color;
      top: -4vmin;
      left: -0.7vmin;
      transform: rotate(-39deg);
      border-radius: 7vmin 0 0 1.5vmin;
    }

    &::after {
      width: 8vmin;
      height: 24vmin;
      background: $dark-color;
      top: -38.5vmin;
      left: 22.5vmin;
      transform: rotate(25deg);
      border-radius: 0 80% 60% 0;
    }
  }
}

.face {
  &-1 {
    z-index: 2;
    width: 23vmin;
    height: 20vmin;
    background: $bg-color;
    top: -27vmin;
    left: -8vmin;
    transform: skewX(22.5deg);
    border-radius: 14.5vmin 4vmin 0 0;

    &::before {
      width: 15vmin;
      height: 15.5vmin;
      background: $bg-color;
      top: 17.8vmin;
      left: 6.3vmin;
      transform: skewX(-22.5deg);
      border-radius: 0 8vmin 5vmin 0;
    }

    &::after {
      width: 20vmin;
      height: 28vmin;
      background: $bg-color;
      top: 19vmin;
      left: -7.35vmin;
      transform: rotate(4deg) skewX(-22.5deg);
      border-radius: 0 0 45% 50%;
    }
  }

  &-2 {
    z-index: 2;
    width: 12vmin;
    height: 18vmin;
    background: $bg-color;
    top: 0.55vmin;
    left: -25vmin;
    transform: rotate(-9deg);
    border-radius: 100% 0 100% 20%;

    &::before {
      width: 10vmin;
      height: 15vmin;
      background: $bg-color;
      left: 1.2vmin;
      transform: rotate(20deg);
      border-radius: 0 0 0 45%;
    }

    &::after {
      width: 10vmin;
      height: 25vmin;
      background: $bg-color;
      top: -11vmin;
      left: 3.5vmin;
      transform: rotate(5deg);
      border-radius: 50% 0 0 0;
    }
  }

  &-3 {
    width: 10vmin;
    height: 18vmin;
    background: $bg-color;
    top: 26.5vmin;
    left: 6.5vmin;
    transform: rotate(7deg);
    border-radius: 0 0 10vmin 5vmin;

    &::before {
      width: 11vmin;
      height: 10vmin;
      background: $bg-color;
      top: 4.6vmin;
      left: 2vmin;
      transform: rotate(34deg);
      border-radius: 0 10vmin 0 0;
    }

    &::after {
      width: 4vmin;
      height: 9vmin;
      background: $dark-color;
      top: 3.5vmin;
      left: 10.1vmin;
      transform: rotate(-10deg);
      border-radius: 2.2vmin 0 0 0;
    }
  }

  &-4 {
    z-index: 2;
    width: 4vmin;
    height: 4vmin;
    background: $bg-color;
    top: 38.2vmin;
    left: 9.3vmin;
    transform: rotate(6deg);

    &::before {
      width: 12.5vmin;
      height: 4vmin;
      background: $bg-color;
      top: 3.6vmin;
      left: -11vmin;
      transform: rotate(-12deg);
      border-radius: 0 0 0 2.5vmin;
    }
  }
}

.eye-right {
  &-1 {
    z-index: 2;
    width: 13vmin;
    height: 5.2vmin;
    background: $dark-color;
    top: -10.4vmin;
    left: 11vmin;
    transform: rotate(-7deg);
    border-radius: 2.5vmin 0 0 2.5vmin;

    &::before {
      width: 10.2vmin;
      height: 8vmin;
      background: $bg-color;
      top: 2.7vmin;
      left: 1.1vmin;
      transform: rotate(20deg);
      border-radius: 5vmin;
    }

    &::after {
      width: 4vmin;
      height: 3vmin;
      background: $dark-color;
      top: 0.4vmin;
      left: 3.2vmin;
      transform: rotate(40deg);
      border-radius: 5vmin 0 1vmin 0;
    }
  }

  &-2 {
    z-index: 2;
    width: 4vmin;
    height: 4vmin;
    background: $bg-color;
    top: -4.9vmin;
    left: 5vmin;
    transform: rotate(-40deg);
    border-radius: 0 100% 100% 0;

    &::before {
      width: 3vmin;
      height: 3vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: -1vmin;
      transform: rotate(25deg);
    }
  }
}

.eye-left {
  z-index: 2;
  width: 11.5vmin;
  height: 2.4vmin;
  background: $dark-color;
  top: -12.5vmin;
  left: -21.5vmin;
  transform: rotate(5deg);
  border-radius: 100% 0 0 0;

  &::before {
    width: 2.7vmin;
    height: 2.7vmin;
    background: $dark-color;
    top: 1vmin;
    left: 5.3vmin;
    transform: rotate(-45deg);
  }

  &::after {
    width: 2vmin;
    height: 3vmin;
    background: $dark-color;
    top: 0.4vmin;
    left: 9vmin;
    transform: rotate(-88deg) skewX(-20deg);
    border-radius: 0 0 1vmin 0;
  }
}

.nose {
  z-index: 2;
  width: 6.5vmin;
  height: 2.1vmin;
  background: $dark-color;
  top: 15.6vmin;
  left: -5.95vmin;
  transform: rotate(20deg);
  border-radius: 4vmin 0 5vmin 0;

  &::before {
    width: 6.5vmin;
    height: 0.7vmin;
    background: $dark-color;
    top: -0.65vmin;
    left: 1.1vmin;
    transform: rotate(-20deg);
  }

  &::after {
    width: 4.1vmin;
    height: 7vmin;
    background: $dark-color;
    top: 0.2vmin;
    left: 1.8vmin;
    transform: rotate(-18deg) skewX(-40deg);
  }
}

.mustache {
  &-1 {
    z-index: 2;
    width: 16.9vmin;
    height: 6vmin;
    background: $dark-color;
    top: 29vmin;
    left: -3.5vmin;
    border-radius: 4vmin 5vmin 0 0;

    &::before {
      width: 18vmin;
      height: 4.3vmin;
      background: $bg-color;
      top: 3.5vmin;
      left: -0.6vmin;
      border-radius: 60% 55% 100% 0 / 100% 100% 0 9%;
    }

    &::after {
      width: 2vmin;
      height: 5vmin;
      background: $dark-color;
      top: -2.7vmin;
      left: 4vmin;
      transform: rotate(48deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 10vmin;
    height: 3.8vmin;
    background: $dark-color;
    top: 23.3vmin;
    left: 4.3vmin;
    transform: rotate(25deg);
    border-radius: 0 100% 0 0;

    &::before {
      width: 2vmin;
      height: 4vmin;
      background: $dark-color;
      top: 4vmin;
      left: -3.5vmin;
      transform: rotate(35deg);
    }

    &::after {
      width: 5.4vmin;
      height: 2.5vmin;
      background: $dark-color;
      top: 9.2vmin;
      left: 2vmin;
      transform: rotate(-25deg);
      border-radius: 81% 19% 43% 57% / 0 41% 59% 100%;
    }
  }
}

// no js