html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, #fff 50%, #000 50%);
}
html *,
body * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
  content: "";
  position: absolute;
}

.hat-1 {
  width: 40vmin;
  height: 40vmin;
  background: #000;
  top: -70vmin;
  left: -5.5vmin;
  transform: rotate(-15deg);
  border-radius: 15vmin 0 0 20%;
}
.hat-1::before {
  width: 25vmin;
  height: 8.5vmin;
  background: #000;
  top: 30.4vmin;
  left: -9.7vmin;
  transform: rotate(-16deg) skewX(55deg);
  border-radius: 0 0 0 6vmin;
}
.hat-2 {
  width: 14.2vmin;
  height: 10vmin;
  background: #ee1c25;
  top: -60.1vmin;
  left: 60.7vmin;
  transform: rotate(-14deg);
  border-radius: 0 100% 100% 0/100% 15% 85% 0;
}
.hat-2::before {
  width: 5vmin;
  height: 1vmin;
  background: #000;
  top: 0.1vmin;
  left: 11vmin;
  transform: rotate(25deg);
}
.hat-2::after {
  width: 5vmin;
  height: 1vmin;
  background: #000;
  top: 0.5vmin;
  left: 11.8vmin;
  transform: rotate(50deg);
}
.hat-3 {
  width: 7vmin;
  height: 14vmin;
  background: #000;
  top: -58vmin;
  left: 45.5vmin;
  transform: rotate(-16deg);
  border-radius: 0 100% 0 0;
}
.hat-3::before {
  width: 12vmin;
  height: 5vmin;
  background: #000;
  top: 8.5vmin;
  left: 6vmin;
  transform: rotate(-15deg);
}
.hat-3::after {
  width: 8vmin;
  height: 4vmin;
  background: #000;
  top: 7.2vmin;
  left: 11.5vmin;
  transform: rotate(-20deg);
}
.hat-4 {
  width: 8vmin;
  height: 4vmin;
  background: #000;
  top: -64.5vmin;
  left: 74vmin;
  transform: rotate(-42deg);
}
.hat-4::before {
  width: 4vmin;
  height: 2vmin;
  background: #000;
  top: -0.2vmin;
  left: 3vmin;
  transform: rotate(-10deg);
}
.hat-5 {
  z-index: 2;
  width: 15vmin;
  height: 10vmin;
  background: #000;
  top: -45vmin;
  left: -17.5vmin;
  transform: rotate(-38deg);
}

.ear {
  width: 2vmin;
  height: 10vmin;
  background: #fff;
  top: -34vmin;
  left: 43.5vmin;
  transform: rotate(10deg);
  border-radius: 1vmin 1.5vmin 0 0;
}
.ear::before {
  width: 3.3vmin;
  height: 9vmin;
  background: #fff;
  top: 4.5vmin;
  left: -1.2vmin;
  transform: rotate(3deg);
  border-radius: 40%;
}
.ear::after {
  width: 3vmin;
  height: 10vmin;
  background: #fff;
  top: 2vmin;
  left: -2vmin;
}

.earring {
  width: 3.8vmin;
  height: 3.8vmin;
  background: #f7941d;
  top: -17.8vmin;
  left: 41.1vmin;
  border-radius: 50%;
  overflow: hidden;
}
.earring::before {
  width: 4.2vmin;
  height: 4.2vmin;
  background: #fcb041;
  top: -0.5vmin;
  left: 1vmin;
  border-radius: 50%;
}

.face-1 {
  width: 15vmin;
  height: 6vmin;
  background: #fff;
  top: -51vmin;
  left: 22vmin;
  transform: rotate(-24deg);
  border-radius: 3vmin 0 0.5vmin 0;
}
.face-1::before {
  width: 5vmin;
  height: 10vmin;
  background: #fff;
  top: 4.3vmin;
  left: 8.5vmin;
  transform: rotate(20deg);
  border-radius: 0 0.5vmin 0 0;
}
.face-1::after {
  width: 2vmin;
  height: 3.5vmin;
  background: #000;
  top: 11vmin;
  left: 12.5vmin;
  transform: rotate(20deg);
  border-radius: 0 0 100% 0;
}
.face-2 {
  width: 8vmin;
  height: 13.4vmin;
  background: #fff;
  top: -9.6vmin;
  left: 27.3vmin;
  transform: rotate(8deg);
  border-radius: 0 0 4.8vmin 0;
}
.face-2::before {
  width: 15vmin;
  height: 8vmin;
  background: #fff;
  top: -7vmin;
  left: -7.4vmin;
  transform: rotate(6deg);
}
.face-2::after {
  width: 10vmin;
  height: 8vmin;
  background: #fff;
  top: -13vmin;
  left: -6vmin;
}
.face-3 {
  width: 12vmin;
  height: 5vmin;
  background: #fff;
  top: -42.8vmin;
  left: 4vmin;
  transform: rotate(-30deg);
}
.face-3::before {
  width: 10vmin;
  height: 2vmin;
  background: #000;
  top: -1.6vmin;
  left: -2vmin;
  transform: rotate(-6deg);
}
.face-3::after {
  width: 10vmin;
  height: 3vmin;
  background: #fff;
  top: 1.4vmin;
  left: -9vmin;
  transform: rotate(-9deg);
}
.face-4 {
  width: 4vmin;
  height: 3vmin;
  background: #fff;
  top: -23.8vmin;
  left: -24vmin;
  transform: rotate(-32deg);
}
.face-4::before {
  width: 20vmin;
  height: 20vmin;
  background: #fff;
  top: 1vmin;
  left: 3vmin;
}
.face-4::after {
  width: 30vmin;
  height: 8.7vmin;
  background: #fff;
  top: 26.6vmin;
  left: -8vmin;
  transform: rotate(-10deg);
  border-radius: 50%;
}
.face-5 {
  width: 20vmin;
  height: 12vmin;
  background: #fff;
  top: 12vmin;
  left: 9vmin;
  transform: rotate(-40deg);
}
.face-5::before {
  width: 2vmin;
  height: 5.7vmin;
  background: #000;
  top: 9vmin;
  left: 21.7vmin;
  transform: rotate(19deg);
  border-radius: 21%;
}
.face-5::after {
  width: 5vmin;
  height: 5vmin;
  background: #000;
  top: 10vmin;
  left: 23vmin;
  transform: rotate(10deg);
}

.shirt {
  width: 10vmin;
  height: 14vmin;
  background: #fff;
  top: 55.5vmin;
  left: -5vmin;
  transform: rotate(-21deg);
}
.shirt::before {
  width: 25vmin;
  height: 35vmin;
  background: #000;
  top: 9.5vmin;
  left: -2.9vmin;
  transform: rotate(10deg);
  border-radius: 12vmin 0 0 0;
}
.shirt::after {
  width: 5vmin;
  height: 2vmin;
  background: #000;
  top: 9vmin;
  left: 8vmin;
  transform: rotate(-15deg);
}

.eyebrow-1 {
  width: 12vmin;
  height: 7vmin;
  background: #000;
  top: -47.5vmin;
  left: 21.5vmin;
  transform: rotate(-23deg) skewX(-4deg);
  border-radius: 1vmin 5vmin 2vmin 80%;
}
.eyebrow-1::before {
  width: 13.5vmin;
  height: 6vmin;
  background: #000;
  top: -0.5vmin;
  left: -2.6vmin;
  transform: rotate(0deg) skewX(4deg);
  border-radius: 50%;
}
.eyebrow-1::after {
  width: 7vmin;
  height: 10vmin;
  background: #fff;
  top: 0.6vmin;
  left: -3.2vmin;
  transform: rotate(-35deg);
}
.eyebrow-2 {
  width: 9vmin;
  height: 7vmin;
  background: #fff;
  top: -46.8vmin;
  left: 24.9vmin;
  transform: rotate(-15deg);
  border-radius: 5vmin 9vmin 5vmin 80%;
}
.eyebrow-2::before {
  width: 9.5vmin;
  height: 4vmin;
  background: #fff;
  top: 0.1vmin;
  left: -3vmin;
  transform: rotate(-10deg);
  border-radius: 50%;
}
.eyebrow-2::after {
  width: 1vmin;
  height: 1.6vmin;
  background: #000;
  top: -0.3vmin;
  left: -2.6vmin;
  transform: rotate(-40deg);
  border-radius: 50%;
}

.eye {
  width: 11.9vmin;
  height: 5.2vmin;
  background: #000;
  top: -40.7vmin;
  left: 19vmin;
  transform: rotate(1deg);
  border-radius: 100%;
}
.eye::before {
  width: 14vmin;
  height: 5vmin;
  background: #fff;
  top: -0.5vmin;
  left: -0.7vmin;
  transform: rotate(-7deg);
  border-radius: 100%;
}
.eye::after {
  width: 3vmin;
  height: 3vmin;
  background: #fff;
  top: 1.4vmin;
  left: 10vmin;
  transform: rotate(35deg);
}
.eye-inner-1 {
  z-index: 2;
  width: 6vmin;
  height: 2.75vmin;
  background: #000;
  top: -1.9vmin;
  left: -2.5vmin;
  transform: rotate(-16deg) skewX(-40deg);
  border-radius: 10vmin 10vmin 0 0;
}
.eye-inner-1::before {
  width: 4vmin;
  height: 3.1vmin;
  background: #000;
  top: -0.2vmin;
  left: 4vmin;
  transform: rotate(-3.5deg) skewX(40deg);
  border-radius: 0 100% 0 0;
}
.eye-inner-1::after {
  width: 3vmin;
  height: 1vmin;
  background: #000;
  top: 2.35vmin;
  left: 8vmin;
  transform: rotate(22deg);
  border-radius: 20% 10% 0 0;
}
.eye-inner-2 {
  z-index: 2;
  width: 0.8vmin;
  height: 2.7vmin;
  background: #000;
  top: -0.4vmin;
  left: 9.5vmin;
  transform: rotate(35deg);
  border-radius: 100%;
}
.eye-inner-2::before {
  width: 2.2vmin;
  height: 1.5vmin;
  background: #000;
  top: 1.4vmin;
  left: -1.9vmin;
}
.eye-inner-3 {
  z-index: 2;
  width: 2vmin;
  height: 1vmin;
  background: #fff;
  top: 0.8vmin;
  left: -5.1vmin;
  transform: rotate(-20deg) skewX(-45deg);
  border-radius: 100% 0 0 0;
}
.eye-inner-3::before {
  width: 0.8vmin;
  height: 3.2vmin;
  background: #fff;
  top: 0.6vmin;
  left: 7.4vmin;
  transform: rotate(-15deg) skewX(40deg);
  border-radius: 0 100% 0 0.4vmin;
}
.eye-inner-4 {
  z-index: 2;
  width: 4.2vmin;
  height: 4.2vmin;
  background: #000;
  top: 0.2vmin;
  left: -0.5vmin;
  border-radius: 50%;
}
.eye-inner-4::before {
  width: 0.9vmin;
  height: 0.9vmin;
  background: #fff;
  top: 1.75vmin;
  left: 3vmin;
  border-radius: 50%;
}
.eye-inner-4::after {
  width: 1.1vmin;
  height: 1.1vmin;
  background: #fff;
  top: 2.9vmin;
  left: -0.1vmin;
  border-radius: 50%;
}
.eye-left {
  top: -41.1vmin;
  left: -16.8vmin;
  transform: scaleX(-1) rotate(-3deg);
}

.nose {
  width: 2.5vmin;
  height: 1.3vmin;
  background: #000;
  top: -20.9vmin;
  left: -3.9vmin;
  transform: rotate(35deg);
  border-radius: 1.6vmin 100% 100% 0.4vmin;
}
.nose::before {
  width: 1.7vmin;
  height: 1.3vmin;
  background: #fff;
  left: 1.3vmin;
  border-radius: 50%;
}
.nose::after {
  width: 0.5vmin;
  height: 1.5vmin;
  background: #fff;
  top: 0.5vmin;
  left: 1.5vmin;
  transform: rotate(40deg);
}
.nose-right {
  top: -20.7vmin;
  left: 2.7vmin;
  transform: scaleX(-1) rotate(35deg);
}
.nose-right::after {
  top: 0.4vmin;
}

.mouth-1 {
  width: 4.5vmin;
  height: 6vmin;
  background: #ee1c25;
  top: -2.6vmin;
  left: 5vmin;
  transform: skewX(-10deg) rotate(19deg);
  border-radius: 0 0 100% 0;
}
.mouth-1::before {
  width: 4vmin;
  height: 2vmin;
  background: #ee1c25;
  top: -1.4vmin;
  left: -2.5vmin;
  transform: skewX(5deg);
  border-radius: 1.8vmin 40% 0 0;
}
.mouth-1::after {
  width: 4vmin;
  height: 2vmin;
  background: #ee1c25;
  top: -0.7vmin;
  left: 0.2vmin;
  transform: rotate(19deg);
}
.mouth-2 {
  width: 4.5vmin;
  height: 5.8vmin;
  background: #ee1c25;
  top: -2.5vmin;
  left: -5vmin;
  transform: skewX(10deg) rotate(-19deg);
  border-radius: 0 0 0 100%;
}
.mouth-2::before {
  width: 4vmin;
  height: 2vmin;
  background: #ee1c25;
  top: -1.6vmin;
  left: 3vmin;
  transform: skewX(5deg);
  border-radius: 60% 1.8vmin 0 0;
}
.mouth-2::after {
  width: 4vmin;
  height: 2vmin;
  background: #ee1c25;
  top: -0.7vmin;
  left: 0.2vmin;
  transform: rotate(-19deg);
}
.mouth-3 {
  width: 4vmin;
  height: 5vmin;
  background: #ee1c25;
  top: -5.5vmin;
}
.mouth-3::before {
  width: 2vmin;
  height: 1vmin;
  background: #ee1c25;
  top: -0.9vmin;
  left: 1.2vmin;
  transform: rotate(-5deg);
}
.mouth-3::after {
  width: 0.8vmin;
  height: 0.7vmin;
  background: #fff;
  top: -1.5vmin;
  left: 1.6vmin;
  border-radius: 50%;
}
.mouth-4 {
  width: 8.2vmin;
  height: 2.5vmin;
  background: #000;
  top: -6.5vmin;
  left: -0.1vmin;
  border-radius: 1vmin;
  overflow: hidden;
}
.mouth-4::before {
  width: 7vmin;
  height: 4vmin;
  background: #fff;
  top: -2.5vmin;
  left: 0.9vmin;
  transform: rotate(-5deg);
  border-radius: 50%;
}
.mouth-4::after {
  width: 7.5vmin;
  height: 4vmin;
  background: #ee1c25;
  top: -3.75vmin;
  left: 0.8vmin;
  transform: rotate(-8deg);
  border-radius: 50%;
}
.mouth-5 {
  z-index: 2;
  width: 1.4vmin;
  height: 4.9vmin;
  background: #ee1c25;
  top: -8vmin;
  left: -7vmin;
  transform: rotate(55deg);
  border-radius: 50%;
}
.mouth-5::before {
  width: 1.4vmin;
  height: 4.9vmin;
  background: #ee1c25;
  top: -5.7vmin;
  left: 4vmin;
  transform: rotate(-114deg);
  border-radius: 50%;
}
.mouth-6 {
  width: 2vmin;
  height: 1vmin;
  background: #ee1c25;
  top: -3.7vmin;
  left: 1.4vmin;
  border-radius: 2vmin 0 0 0;
}
.mouth-6::before {
  width: 2vmin;
  height: 1vmin;
  background: #ee1c25;
  left: -1.6vmin;
  border-radius: 0 2vmin 0 0;
}
.mouth-7 {
  width: 2.5vmin;
  height: 0.8vmin;
  background: #ee1c25;
  top: -4.3vmin;
  left: 5.7vmin;
  transform: rotate(-10deg);
}
.mouth-7::before {
  width: 2.5vmin;
  height: 0.8vmin;
  background: #ee1c25;
  top: -1vmin;
  left: -5.7vmin;
  transform: rotate(20deg);
}
.mouth-8 {
  width: 2.4vmin;
  height: 0.7vmin;
  background: #000;
  top: -5.3vmin;
  left: 5.6vmin;
  transform: rotate(-5deg);
  border-radius: 100%;
}
.mouth-8::before {
  width: 2.4vmin;
  height: 0.7vmin;
  background: #000;
  top: -0.5vmin;
  left: -5.7vmin;
  transform: rotate(15deg);
  border-radius: 100%;
}