:root {
  --bg: #554f3f;
  --gear: #aeb397;
  --black: #332d1f;
  --face: #e6d6c7;
  --hightlight: #cec2b6;
  --white: #f8f4e8;
  --dark-hightlight: #908275;
  --hair: #2e2916;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  overflow: hidden;
  margin: 0;
}

div {
  position: absolute;
}

.charliechaplin {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(90vmin);
  /* transform: translateY(250vmin); */
  scale: 0.15;
}

.head {
  width: 360vmin;
  height: 240vmin;
  transform: translate(15vmin, -260vmin);
}

.gear {
  width: 200vmin;
  height: 200vmin;
  margin: auto;
  background: var(--gear);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 0.6;
}

.gear .center {
  z-index: 10;
  width: 170vmin;
  height: 170vmin;
  background: var(--bg);
  border-radius: 50%;
}
.tooth {
  top: -25vmin;
  left: 75vmin;
  z-index: 1;
  width: 45vmin;
  height: 250vmin;
  background: var(--gear);
}
.tooth:nth-child(2) {
  transform: rotate(45deg);
}

.tooth:nth-child(3) {
  transform: rotate(90deg);
}

.tooth:nth-child(4) {
  transform: rotate(135deg);
}
.first {
  scale: 0.2;
  top: -70vmin;
  right: 80vmin;
}
.second {
  scale: 0.5;
  right: 0;
  top: -44vmin;
  animation-duration: 4.5s !important;
}
.third {
  scale: 0.4;
  right: 0;
  top: 64vmin;
  animation-duration: 4s !important;
}
.fourth {
  scale: 0.2;
  right: -60vmin;
  top: 24vmin;
}
.fifth {
  scale: 0.6;
  right: 110vmin;
  top: 24vmin;
  animation-duration: 4.5s !important;
}
.sixth {
  scale: 0.4;
  left: -70vmin;
  top: 54vmin;
  animation-duration: 4.5s !important;
}

.seventh {
  bottom: -55vmin;
  left: -15vmin;
  scale: 0.15;
}

.eighth {
  scale: 0.2;
  bottom: -70vmin;
  left: 100vmin;
}
.spin-right {
  animation: spinRightAnimation 3s infinite linear;
}

.spin-left {
  animation: spinLeftAnimation 3s infinite linear;
}

@keyframes spinRightAnimation {
  to {
    transform: rotate(360deg);
  }
}

@keyframes spinLeftAnimation {
  to {
    transform: rotate(-360deg);
  }
}

.hat {
  width: 470vmin;
  height: 77vmin;
  transform: translate(-60vmin, 183vmin);
  overflow: hidden;
  z-index: 2;
}

.hat::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 370%;
  border: 22vmin solid var(--black);
  border-radius: 50%;
  left: -100vmin;
  top: -255vmin;
}
.body {
  width: 344vmin;
  height: 550vmin;
  transform: translate(0vmin, 250vmin);
  display: flex;
  align-items: center;
  justify-content: center;
}

.face {
  width: 82%;
  height: 62.5%;
  top: 0;
}

.side {
  width: 50%;
  height: 100%;
  background: var(--face);
  display: flex;
  align-items: center;
  justify-content: center;
}

.right {
  right: 0;
  transform: scale(-1, 1);
}

.eye {
  width: 103vmin;
  height: 129vmin;
  transform: translate(7vmin, -60vmin);
  overflow: hidden;
}

.eyebrow {
  background: var(--black);
  width: 84%;
  height: 63vmin;
  border-radius: 50vmin 50vmin 0 0;
  overflow: hidden;
}

.eyebrow::after {
  position: absolute;
  content: "";
  background: var(--hightlight);
  border-radius: 100vmin 100vmin 0 0;
  width: 120%;
  height: 140%;
  top: 30vmin;
  left: -4vmin;
  rotate: -10deg;
}

.right-hightlight {
  background: var(--hightlight);
  right: 0;
  height: 80%;
  bottom: 0;
  width: 50vmin;
  border-radius: 0 88% 0 0;
  overflow: hidden;
}

.right-hightlight::after {
  position: absolute;
  content: "";
  background: var(--face);
  height: 100%;
  width: 100%;
  transform: rotate(-25deg);
  top: 20vmin;
  left: -17vmin;
}

.top-hightlight {
  background: var(--hightlight);
  width: 60%;
  height: 62vmin;
  top: 27vmin;
  left: 14vmin;
  transform: rotate(-40deg);
}
.eye-core {
  width: 58%;
  right: 23vmin;
  top: 45vmin;
  height: 58vmin;
}

.eye-top {
  background: var(--black);
  top: 0;
  height: 30vmin;
  width: 94%;
  border-radius: 50vmin 45vmin 0 0;
  overflow: hidden;
}

.eye-top::after {
  position: absolute;
  content: "";
  background: var(--hightlight);
  width: 100%;
  height: 100%;
  top: 10vmin;
  rotate: -10deg;
  left: 2vmin;
  border-radius: 50vmin 45vmin 0 0;
}

.eye-core-top {
  background: var(--black);
  top: 10vmin;
  height: 30vmin;
  width: 100%;
  border-radius: 100vmin 100vmin 0 0;
  rotate: 7deg;
  overflow: hidden;
}
.eye-core-top::after {
  position: absolute;
  content: "";
  background: var(--hightlight);
  width: 100%;
  height: 100%;
  border-radius: 100vmin 100vmin 0 0;

  top: 12vmin;
  transform: rotate(-10deg);
  transform-origin: left;
}
.eye-core-bottom {
  width: 50%;
  bottom: 0;
  height: 21vmin;
  background: var(--black);
  border-radius: 0 0 0 150%;
}

.eye-core-bottom::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 0 0 0 150%;
  background: var(--hightlight);
  top: -7vmin;
  right: -2vmin;
}
.eye-core-bottom-second {
  width: 50%;
  bottom: 0;
  height: 27vmin;
  right: 0;
  overflow: hidden;
}
.eye-core-bottom-second::after {
  position: absolute;
  content: "";
  width: 170%;
  height: 110%;
  border: 7.2vmin solid var(--black);
  border-radius: 50%;
  left: -22vmin;
  top: -23.2vmin;
  transform: rotate(-49deg);
}

.eye-white {
  width: 92%;
  height: 35vmin;
  top: 16vmin;
  left: 1vmin;
  transform: rotate(-3deg);
}

.white-top {
  width: 100%;
  height: 55%;
  overflow: hidden;
}
.white-top::after {
  position: absolute;
  content: "";
  width: 110%;
  height: 200%;
  background: var(--white);
  border-radius: 100vmin 100vmin 0 0;
  left: 50%;
  transform: translate(-50%);
}
.white-bottom {
  width: 100%;
  height: 45%;
  bottom: 0;
  overflow: hidden;
}

.white-bottom::after {
  position: absolute;
  content: "";
  width: 110%;
  height: 200%;
  background: var(--white);
  border-radius: 0 0 100vmin 100vmin;
  left: 50%;
  transform: translate(-50%);
  top: -15vmin;
}

.eye-black {
  background: var(--black);
  width: 25vmin;
  height: 25vmin;
  border-radius: 50%;
  left: 5vmin;
  top: -1vmin;
}
.right .eye-black {
  left: 25vmin;
}

.eye-black-hight {
  background: #cec2b6;
  width: 78%;
  height: 21vmin;
  left: 3vmin;
  bottom: -9vmin;
  border-radius: 0 0 50vmin 50vmin;
}

.divider {
  width: 100%;
  height: 75%;
  background: blue;
  top: 0;
  border-radius: 0 63% 0 0;
  background: linear-gradient(#000000, var(--face));
  opacity: 0.1;
}

.over {
  background: var(--bg);
  height: 95%;
  width: 40vmin;
  left: -23vmin;
  rotate: -7deg;
  z-index: 1;
}
.over-two {
  height: 30%;
  width: 120%;
  left: -33vmin;
  rotate: 43deg;
  bottom: -55vmin;
  background: var(--bg);
}

.moustache {
  background: #251e16;
  width: 72vmin;
  height: 59vmin;
  z-index: 1;
  transform: rotate(-13deg);
  left: 107vmin;
  bottom: 90vmin;
  border-radius: 17%;
}
.moustache::after {
  position: absolute;
  content: "";
  width: 10vmin;
  height: 100%;
  background: var(--face);
  rotate: 16deg;
  left: -5vmin;
  top: -4vmin;
}

.moustache::before {
  position: absolute;
  content: "";
  width: 10vmin;
  height: 100%;
  background: var(--face);
  rotate: -16deg;
  right: -5vmin;
  top: -4vmin;
}

.nose {
  width: 30vmin;
  height: 30vmin;
  right: 0;
  z-index: 2;
  transform: translateY(33vmin);
}
.first-circle {
  background: var(--face);
  bottom: 0;
  width: 16vmin;
  height: 100%;
  right: 0;
  border-radius: 20vmin 0 0 20vmin;
}
.second-circle {
  background: var(--face);
  bottom: 10vmin;
  width: 23vmin;
  height: 23vmin;
  top: -2vmin;
  border-radius: 50%;
}

.nose-hole {
  background: #060200;
  width: 50%;
  rotate: 26deg;
  height: 5vmin;
  bottom: 2vmin;
  left: 4vmin;
  border-radius: 50%;
}
.right {
  z-index: 1;
}
.moustach-2 {
  width: 43vmin;
  height: 60vmin;
  right: 0;
  transform: translateY(53vmin);
  overflow: hidden;
}
.moustach-2::after {
  position: absolute;
  content: "";
  background: var(--face);
  top: -4vmin;
  left: 0vmin;
  width: 12vmin;
  height: 27vmin;
  rotate: 29deg;
}
.nose-ex {
  background: #251e16;
  width: 120%;
  height: 110%;
  border-radius: 0 0 0 17%;
  rotate: 13deg;
  bottom: 3vmin;
  left: 8vmin;
}

.mouth {
  width: 70vmin;
  height: 20vmin;
  z-index: 2;
  transform: translate(120vmin, 252vmin);
}
.mouth-center {
  left: 50%;
  transform: translate(-50%);
  width: 75%;
  height: 100%;
  overflow: hidden;
}

.line {
  border: 4vmin solid var(--black);
  width: 130%;
  rotate: -15deg;
  height: 120%;
  border-radius: 50%;
  top: -14vmin;
  left: -10vmin;
}

.hair {
  width: 77vmin;
  height: 50vmin;
  top: 0;
  left: 0;
  overflow: hidden;
}

.first-hair {
  background: var(--hair);
  width: 45vmin;
  height: 40vmin;
  border-radius: 50%;
  right: 0;
  top: -20vmin;
}
.second-hair {
  background: var(--hair);
  width: 62vmin;
  height: 62vmin;
  border-radius: 50%;
  top: -12vmin;
  left: -19vmin;
}
.hair-extra {
  background: var(--hair);
  width: 90vmin;
  border-radius: 20vmin;
  height: 20vmin;
  transform: translate(-13vmin, -10vmin);
  z-index: 2;
}
.hair-extra-two {
  background: var(--hair);
  width: 35vmin;
  height: 60vmin;
  z-index: 2;
  transform: translate(-8vmin, -30vmin);
}
.outter-hair {
  width: 80vmin;
  rotate: -6deg;
  height: 235vmin;
  transform: translate(-70vmin, -50vmin);
  overflow: hidden;
  z-index: 2;
  border-radius: 0 40vmin 0 0;
}
.out-first {
  left: 5vmin;
  top: -10vmin;
  width: 140%;
  height: 42%;
  border-radius: 50%;
  rotate: 20deg;
  background: var(--hair);
}
.out-second {
  background: var(--hair);
  width: 100%;
  height: 50%;
  top: 50vmin;
  border-radius: 50%;
  right: -40vmin;
}
.out-third {
  background: var(--hair);
  width: 50%;
  height: 50%;
  bottom: 14vmin;
  right: -25vmin;
  border-radius: 50%;
}
.right-block {
  transform: scale(-1, 1) translate(-279vmin, 4vmin) rotate(-13deg);
}

.right-extra {
  transform: translate(260vmin, -10vmin);
  border-radius: 50%;
}