style.css

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

html,
body {
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, $light-color 50%, $dark-color 50%);
  overflow: hidden;

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

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

.head {
  &-1 {
    z-index: 2;
    width: 30vmin;
    height: 20vmin;
    background: $dark-color;
    top: -80vmin;
    left: -4.5vmin;
    border-radius: 30% 0 0 0;

    &::before {
      width: 30vmin;
      height: 40vmin;
      background: $dark-color;
      top: 3.2vmin;
      left: -14.5vmin;
      border-radius: 60% 0 0 30%;
    }

    &::after {
      width: 20vmin;
      height: 20.5vmin;
      background: $dark-color;
      top: 35vmin;
      left: -19vmin;
      border-radius: 7vmin 0 0 100%;
    }
  }

  &-2 {
    width: 40vmin;
    height: 40vmin;
    background: $dark-color;
    top: 36vmin;
    left: -13vmin;

    &::before {
      width: 8vmin;
      height: 42vmin;
      background: $light-color;
      top: 1.5vmin;
      left: -6.4vmin;
      transform: rotate(-1deg);
      border-radius: 100%;
    }

    &::after {
      width: 40vmin;
      height: 40vmin;
      background: $dark-color;
      top: -30vmin;
      left: 4vmin;
    }
  }

  &-3 {
    z-index: 2;
    width: 25vmin;
    height: 6vmin;
    background: $dark-color;
    top: -96.8vmin;
    left: -4vmin;
    transform: rotate(-5deg);
    border-radius: 100%;
  }
}

.neck {
  &-1 {
    width: 25vmin;
    height: 20vmin;
    background: $light-color;
    top: 57vmin;
    left: 5.2vmin;
    transform: rotate(-2deg);
    border-radius: 30vmin 0 0 0;

    &::before {
      width: 34.5vmin;
      height: 32vmin;
      background: $dark-color;
      top: -12.8vmin;
      left: -3.4vmin;
      transform: rotate(0deg);
      border-radius: 0 0 100% 0;
    }

    &::after {
      width: 9vmin;
      height: 5vmin;
      background: $dark-color;
      top: 15vmin;
      left: -4.8vmin;
      transform: rotate(-36deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 11vmin;
    height: 7.4vmin;
    background: $dark-color;
    top: 84.3vmin;
    left: -17vmin;
    transform: rotate(23deg);
    border-radius: 0 2vmin 100% 0;

    &::before {
      width: 7vmin;
      height: 1.3vmin;
      background: $light-color;
      top: -0.5vmin;
      left: 4.3vmin;
      transform: rotate(2deg);
      border-radius: 3vmin 0 0 2vmin;
    }

    &::after {
      width: 6vmin;
      height: 2vmin;
      background: $light-color;
      top: -1vmin;
      left: 7.2vmin;
      transform: rotate(13deg);
    }
  }

  &-3 {
    z-index: 1;
    width: 28vmin;
    height: 15vmin;
    background: $light-color;
    top: 93vmin;
    left: 5.5vmin;
    transform: rotate(-5deg) skewX(-2deg);
    border-radius: 0 2.5vmin 80% 0;

    &::before {
      width: 16vmin;
      height: 3vmin;
      background: $light-color;
      top: -2vmin;
      left: 11.2vmin;
      transform: rotate(5deg) skewX(6deg);
    }
  }

  &-4 {
    width: 15vmin;
    height: 5vmin;
    background: $dark-color;
    top: 79.5vmin;
    left: -47.2vmin;
    transform: rotate(-17deg) skewX(-15deg);
    border-radius: 5vmin 0 0 0;

    &::before {
      width: 15vmin;
      height: 5vmin;
      background: $dark-color;
      top: 3.2vmin;
      left: -8vmin;
      transform: rotate(-2deg) skewX(-20deg);
      border-radius: 5vmin 0 0 0;
    }

    &::after {
      width: 12vmin;
      height: 3vmin;
      background: $light-color;
      top: 1.8vmin;
      left: -12vmin;
      transform: rotate(-15deg);
    }
  }

  &-5 {
    width: 14.5vmin;
    height: 30vmin;
    background: $dark-color;
    top: 78vmin;
    left: -35vmin;

    &::before {
      width: 18vmin;
      height: 10vmin;
      background: $dark-color;
      top: 20vmin;
      left: -16.3vmin;
      transform: skewX(-20deg);
      border-radius: 100% 0 0 0;
    }
  }
}

.face {
  &-1 {
    z-index: 2;
    width: 33vmin;
    height: 24vmin;
    background: $light-color;
    top: -48vmin;
    left: 3.5vmin;
    transform: skewX(15deg);
    border-radius: 50% 55% 0 7.5vmin;

    &::before {
      width: 22.8vmin;
      height: 5vmin;
      background: $light-color;
      top: -0.4vmin;
      left: 2.5vmin;
      transform: rotate(2deg);
      border-radius: 100%;
    }

    &::after {
      width: 10vmin;
      height: 10vmin;
      background: $light-color;
      top: -0.3vmin;
      left: 1vmin;
      transform: skewX(-9deg);
      border-radius: 4.5vmin 1vmin 0 0;
    }
  }

  &-2 {
    z-index: 2;
    width: 25vmin;
    height: 26.5vmin;
    background: $light-color;
    top: -40.5vmin;
    left: 20.5vmin;
    transform: skewX(6deg);
    border-radius: 0 5.5vmin 0 0;

    &::before {
      width: 15vmin;
      height: 2vmin;
      background: $light-color;
      top: -0.4vmin;
      left: 5vmin;
      transform: rotate(7deg);
    }

    &::after {
      width: 5.5vmin;
      height: 1vmin;
      background: $dark-color;
      top: -1vmin;
      left: 11.2vmin;
      transform: rotate(5deg);
      border-radius: 100%;
    }
  }

  &-3 {
    z-index: 2;
    width: 5vmin;
    height: 15vmin;
    background: $dark-color;
    top: -27.5vmin;
    left: 50.2vmin;
    transform: rotate(1deg);

    &::before {
      width: 10vmin;
      height: 26vmin;
      background: $light-color;
      top: 14vmin;
      left: -9.5vmin;
      transform: rotate(-2deg);
    }

    &::after {
      width: 3vmin;
      height: 7.5vmin;
      background: $dark-color;
      top: 11.8vmin;
      left: -0.1vmin;
      transform: rotate(-2deg);
      border-radius: 100%;
    }
  }

  &-4 {
    z-index: 2;
    width: 5vmin;
    height: 30vmin;
    background: $dark-color;
    top: 20vmin;
    left: 45.8vmin;
    transform: rotate(12deg);

    &::before {
      width: 2.5vmin;
      height: 12vmin;
      background: $light-color;
      top: 2.5vmin;
      left: -2.1vmin;
      transform: rotate(-1deg);
      border-radius: 100%;
    }

    &::after {
      width: 5vmin;
      height: 12vmin;
      background: $dark-color;
      top: 16vmin;
      left: -0.4vmin;
      transform: rotate(4deg);
    }
  }

  &-5 {
    z-index: 2;
    width: 21vmin;
    height: 10vmin;
    background: $light-color;
    top: 43vmin;
    left: 9vmin;
    transform: skewX(-10deg);
    border-radius: 0 0 5.5vmin 10vmin;

    &::before {
      width: 2.7vmin;
      height: 8.5vmin;
      background: $light-color;
      top: 0.3vmin;
      left: 19.4vmin;
      transform: rotate(35deg);
      border-radius: 100%;
    }

    &::after {
      width: 12vmin;
      height: 12vmin;
      background: $light-color;
      top: -4.2vmin;
      left: 0.2vmin;
      transform: rotate(-3deg) skewX(10deg);
      border-radius: 0 0 0 50%;
    }
  }

  &-6 {
    z-index: 2;
    width: 20vmin;
    height: 30vmin;
    background: $light-color;
    top: 5vmin;
    left: 11vmin;

    &::before {
      width: 20vmin;
      height: 25vmin;
      background: $light-color;
      top: 1vmin;
      left: -6vmin;
      transform: rotate(-40deg);
      border-radius: 1vmin 0 0 0;
    }

    &::after {
      width: 10vmin;
      height: 2vmin;
      background: $light-color;
      top: 0.8vmin;
      left: -7vmin;
      transform: skewX(-25deg);
      border-radius: 0.5vmin 0 0 0;
    }
  }

  &-7 {
    z-index: 2;
    width: 15vmin;
    height: 11vmin;
    background: $light-color;
    top: -9.3vmin;
    left: -18.5vmin;
    transform: skewX(2deg);
    border-radius: 1.5vmin 0 0 45%;

    &::before {
      width: 5vmin;
      height: 5vmin;
      background: $light-color;
      top: 18.4vmin;
      left: 7vmin;
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 5vmin;
      height: 7.2vmin;
      background: $dark-color;
      top: 17.75vmin;
      left: 6.05vmin;
      transform: skewX(-2deg) rotate(9deg);
      border-radius: 0 100% 0 0;
    }
  }
}

.eye-right {
  &-1 {
    z-index: 2;
    width: 12vmin;
    height: 5.6vmin;
    background: $dark-color;
    top: -25vmin;
    left: 34.5vmin;
    transform: skewX(-4deg) rotate(-3deg);
    border-radius: 100%;

    &::before {
      width: 1vmin;
      height: 3vmin;
      background: $light-color;
      top: 1vmin;
      left: -0.5vmin;
    }

    &::after {
      width: 3.3vmin;
      height: 2vmin;
      background: $dark-color;
      top: 4.2vmin;
      left: -0.2vmin;
      transform: rotate(28deg) skewX(-5deg);
      border-radius: 0 0 2vmin 0.4vmin;
    }
  }

  &-2 {
    z-index: 2;
    width: 3vmin;
    height: 1.5vmin;
    background: $light-color;
    top: -20.3vmin;
    left: 30.9vmin;
    transform: rotate(-24deg);
    border-radius: 100% 0 0 0;

    &::before {
      width: 3.5vmin;
      height: 3.5vmin;
      background: $dark-color;
      top: -0.4vmin;
      left: 1.5vmin;
      border-radius: 50%;
    }

    &::after {
      width: 0.5vmin;
      height: 0.5vmin;
      background: $light-color;
      top: 0.5vmin;
      left: 2.3vmin;
      border-radius: 50%;
    }
  }

  &-3 {
    z-index: 2;
    width: 2.1vmin;
    height: 2.1vmin;
    background: $dark-color;
    top: -19.1vmin;
    left: 40.9vmin;
    transform: rotate(-30deg);
    border-radius: 0vmin 0 0 1vmin;

    &::before {
      width: 3vmin;
      height: 2vmin;
      background: $light-color;
      top: -2.4vmin;
      left: 1vmin;
      transform: skewX(28deg);
      border-radius: 0.2vmin 50% 0.2vmin 0;
    }

    &::after {
      width: 1vmin;
      height: 1.7vmin;
      background: $light-color;
      top: -1vmin;
      left: 1.7vmin;
      transform: rotate(-25deg);
    }
  }

  &-4 {
    z-index: 2;
    width: 2vmin;
    height: 2vmin;
    background: $light-color;
    top: -23.2vmin;
    left: 43.3vmin;
    transform: rotate(2deg);
    border-radius: 0 0 0 50%;
  }
}

.eye-left {
  &-1 {
    z-index: 2;
    width: 18vmin;
    height: 8.7vmin;
    background: $dark-color;
    top: -29vmin;
    left: -3.8vmin;
    transform: rotate(25deg) skewX(-30deg);
    border-radius: 40% 6vmin 0 0;

    &::before {
      width: 7vmin;
      height: 4.3vmin;
      background: $light-color;
      top: 3.9vmin;
      left: 2.5vmin;
      transform: skewX(-15deg);
      border-radius: 100%;
    }

    &::after {
      width: 6vmin;
      height: 3.5vmin;
      background: $dark-color;
      top: 5.2vmin;
      left: 4.8vmin;
      transform: skewX(-15deg);
      border-radius: 100%;
    }
  }

  &-2 {
    z-index: 3;
    width: 2vmin;
    height: 3vmin;
    background: $dark-color;
    top: -29vmin;
    left: -3.3vmin;
    transform: rotate(-5deg);

    &::before {
      width: 9.5vmin;
      height: 3vmin;
      background: $light-color;
      top: 4.4vmin;
      left: -3.1vmin;
      transform: rotate(30deg) skewX(-10deg);
      border-radius: 1.5vmin 2.5vmin 0 0;
    }

    &::after {
      width: 2.6vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 4.3vmin;
      left: 1.6vmin;
      transform: skewY(25deg) skewX(-2deg);
      border-radius: 0 0 0.4vmin 0;
    }
  }

  &-3 {
    z-index: 3;
    width: 3.8vmin;
    height: 3vmin;
    background: $dark-color;
    top: -24.3vmin;
    left: -5.1vmin;
    border-radius: 50%;

    &::before {
      width: 0.5vmin;
      height: 0.5vmin;
      background: $light-color;
      top: 0.8vmin;
      left: 0.8vmin;
      border-radius: 50%;
    }

    &::after {
      width: 0.3vmin;
      height: 0.3vmin;
      background: $light-color;
      top: 0.5vmin;
      left: 1.8vmin;
      border-radius: 50%;
    }
  }

  &-4 {
    z-index: 2;
    width: 6vmin;
    height: 3vmin;
    background: $dark-color;
    top: -20.8vmin;
    left: -12.5vmin;
    border-radius: 0 0 0 60%;

    &::before {
      width: 2vmin;
      height: 1.5vmin;
      background: $light-color;
      top: 0.2vmin;
      left: 2.5vmin;
      border-radius: 0 0 0 1vmin;
    }

    &::after {
      width: 2.9vmin;
      height: 3vmin;
      background: $light-color;
      top: -0.2vmin;
      left: 4.05vmin;
      border-radius: 0.4vmin 0 0 100%;
    }
  }

  &-5 {
    z-index: 2;
    width: 1.5vmin;
    height: 3vmin;
    background: $light-color;
    top: -20vmin;
    left: -7.2vmin;
    transform: rotate(-45deg);
  }
}

.nose {
  &-1 {
    z-index: 2;
    width: 3.8vmin;
    height: 20vmin;
    background: $dark-color;
    top: -10vmin;
    left: 10.5vmin;
    transform: rotate(-5deg);

    &::before {
      width: 3vmin;
      height: 10vmin;
      background: $light-color;
      top: -0.3vmin;
      left: 3.8vmin;
    }

    &::after {
      width: 5vmin;
      height: 11vmin;
      background: $dark-color;
      top: 10.8vmin;
      left: -3vmin;
      transform: rotate(20deg);
      border-radius: 0 2vmin 2vmin 2vmin;
    }
  }

  &-2 {
    z-index: 2;
    width: 8.5vmin;
    height: 15.5vmin;
    background: $light-color;
    top: -6vmin;
    left: -1.2vmin;
    transform: rotate(25deg);
    border-radius: 0 65% 50% 0;

    &::before {
      width: 1vmin;
      height: 4vmin;
      background: $light-color;
      top: 11vmin;
      left: 6.8vmin;
    }

    &::after {
      width: 8.5vmin;
      height: 3vmin;
      background: $dark-color;
      top: 11.05vmin;
      left: 10vmin;
      transform: rotate(-24deg);
      border-radius: 0 0 100% 1vmin;
    }
  }

  &-3 {
    z-index: 2;
    width: 6.3vmin;
    height: 3vmin;
    background: $dark-color;
    top: 6vmin;
    left: 19.3vmin;
    transform: skewX(35deg);
    border-radius: 0 0 0.5vmin 0;

    &::before {
      width: 4.4vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 2.3vmin;
      left: 2vmin;
      transform: skewX(10deg) rotate(3deg);
      border-radius: 0 0 100% 0;
    }

    &::after {
      width: 5.5vmin;
      height: 2.2vmin;
      background: $light-color;
      top: -0.2vmin;
      left: 1.65vmin;
      transform: skewX(-35deg);
      border-radius: 0 0 0 100%;
    }
  }

  &-4 {
    z-index: 2;
    width: 2vmin;
    height: 3.5vmin;
    background: $light-color;
    top: 6.9vmin;
    left: 28.4vmin;
    transform: rotate(-30deg);

    &::before {
      width: 5vmin;
      height: 1vmin;
      background: $light-color;
      top: 2.1vmin;
      left: -4.2vmin;
      transform: rotate(30deg) skewX(-50deg);
      border-radius: 0.3vmin 0 0 0;
    }
  }
}

.mouth {
  &-1 {
    z-index: 2;
    width: 5.5vmin;
    height: 3.7vmin;
    background: $dark-color;
    top: 26.3vmin;
    left: 23.3vmin;
    transform: rotate(-4deg);
    border-radius: 0 4vmin 0.6vmin 0;

    &::before {
      width: 5vmin;
      height: 2.3vmin;
      background: $light-color;
      top: 1.8vmin;
      left: -0.9vmin;
      transform: skewX(25deg);
      border-radius: 0 2vmin 0 0;
    }

    &::after {
      width: 5.5vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 0.4vmin;
      left: -3.9vmin;
      transform: rotate(4deg);
      border-radius: 100%;
    }
  }

  &-2 {
    z-index: 2;
    width: 9vmin;
    height: 3vmin;
    background: $dark-color;
    top: 25.7vmin;
    left: 6.2vmin;
    transform: rotate(-20deg);
    border-radius: 0.5vmin 45% 0 100%;

    &::before {
      width: 3vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 1.4vmin;
      left: 7.8vmin;
      transform: rotate(40deg);
    }

    &::after {
      width: 3.5vmin;
      height: 1vmin;
      background: $light-color;
      top: 1.6vmin;
      left: 9.7vmin;
      transform: rotate(23deg);
      border-radius: 100%;
    }
  }

  &-3 {
    z-index: 2;
    width: 8vmin;
    height: 1.5vmin;
    background: $light-color;
    top: 28.7vmin;
    left: 4.6vmin;
    transform: rotate(-9deg);
    border-radius: 0 1vmin 0 0;

    &::before {
      width: 5.8vmin;
      height: 0.5vmin;
      background: $dark-color;
      top: -0.3vmin;
      left: 1vmin;
      transform: rotate(-1deg);
      border-radius: 100%;
    }

    &::after {
      width: 2.2vmin;
      height: 0.7vmin;
      background: $light-color;
      top: 0vmin;
      left: 5.8vmin;
      transform: rotate(2deg);
      border-radius: 100% 100% 0 0;
    }
  }

  &-4 {
    z-index: 2;
    width: 2vmin;
    height: 3vmin;
    background: $light-color;
    top: 27.5vmin;
    left: -4.3vmin;
    transform: rotate(-20deg);

    &::before {
      width: 1.5vmin;
      height: 1vmin;
      background: $light-color;
      top: 2vmin;
      left: 1vmin;
      transform: rotate(45deg);
    }

    &::after {
      width: 1.5vmin;
      height: 1vmin;
      background: $light-color;
      top: 3.9vmin;
      left: 8vmin;
      transform: rotate(45deg);
      border-radius: 0.4vmin;
    }
  }

  &-5 {
    z-index: 2;
    width: 12vmin;
    height: 4.6vmin;
    background: $dark-color;
    top: 33.8vmin;
    left: 14.4vmin;
    transform: rotate(2deg) skewX(5deg);
    border-radius: 1vmin 2vmin 0 20%;

    &::before {
      width: 9vmin;
      height: 2vmin;
      background: $light-color;
      top: -0.2vmin;
      left: 0.7vmin;
      transform: rotate(8deg);
      border-radius: 100%;
    }

    &::after {
      width: 6vmin;
      height: 2vmin;
      background: $light-color;
      top: -0.2vmin;
      left: 6.2vmin;
      transform: rotate(-12deg);
      border-radius: 100%;
    }
  }

  &-6 {
    z-index: 2;
    width: 3vmin;
    height: 1.5vmin;
    background: $light-color;
    top: 29vmin;
    left: 17vmin;

    &::before {
      width: 3vmin;
      height: 6vmin;
      background: $light-color;
      top: 1.5vmin;
      left: 4.6vmin;
      transform: rotate(34deg);
    }

    &::after {
      width: 2vmin;
      height: 0.5vmin;
      background: $light-color;
      top: 0.4vmin;
      left: -6.4vmin;
    }
  }
}