html, body {
  --sky: #d6effd;
  overflow: hidden;
  background: var(--sky);
}

#desc {
  width: 0;
  height: 0;
  overflow: hidden;
  left: -10000in;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 100vmin;
  height: 100vmin;
}


.cartoon div {
  position: absolute;
  box-sizing: border-box;
}

.b {
  border: 1vmin solid black;
}

.r {
  border-radius: 100%;
}

.hb::before,
.ha::after {
  content: "";
  display: block;
  position: absolute;
}

/****/
.cartoon {
  --yellow: #ffef96;
  --brown: #dca35f;
  --hair: #523e3a;
  --mouth: #c78d80;
  --sky: #d6effd;
  --eyes: #6e5130;
}

.mouth {
  width: 7%;
  height: 14%;
  background: var(--mouth);
  border-radius: 100% / 120% 120% 80% 80%;
  transform: rotate(-110deg);
  top: 20%;
  left: 50%;
}

.mouth::after {
  width: 0.75vmin;
  height: 0.75vmin;
  background: var(--hair);
  border-radius: 50%;
  right: -0.25vmin;
  top: 75%;
  box-shadow: 0 0 0 0.5vmin var(--mouth), 0 -5vmin var(--hair), 0 -5vmin 0 0.5vmin var(--mouth);
}

.head {
  width: 9.5%;
  height: 16%;
  border-radius: 100% 6vmin 60% 60%;
  background: var(--brown);
  box-shadow: inset -1vmin -20vmin 0 -14vmin var(--yellow);
  transform: rotate(-20deg);
  top: 14%;
  left: 42.5%;
}

.head::before {
  top: 33.5%;
  left:100%;
  width: 100%;
  height: 50%;
  border-radius: 50%;
  box-shadow: -1.8vmin 1.9vmin 0 -1vmin var(--yellow);;
}

.eyes {
  width: 1vmin;
  height: 1vmin;
  background: var(--eyes);
  top: 50%;
  left: 45%;
  box-shadow: 2.5vmin -0.125vmin var(--eyes);
}

.ear {
  width: 8%;
  height: 2.5%;
  background: var(--eyes);
  border-radius: 100% / 100% 80% 80% 100%;
  border: 0.7vmin solid var(--brown);
  border-left: 1.5vmin solid var(--brown);
  border-right: 0.25vmin solid var(--brown);
  transform: rotate(-25deg);
  top: 21%;
  left: 35.25%;
}

.ear + .ear {
  transform:  scaleX(-1) rotate(4deg);
  top: 17.5%;
  left: 50.25%;
}

.horn {
  width: 1.25%;
  height: 5%;
  background: var(--brown);
  transform: rotate(10deg);
  left: 47%;
  top: 10%;
}

.horn ~ .horn {
  top: 10.5%;
  left: 42.5%;
  transform: rotate(-30deg);
}

.horn:after {
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.5vmin;
  height: 2.5vmin;
  background: var(--brown);
  border-radius: 50%;
}

.hair {
  width: 5%;
  height: 4.5%;
  box-shadow: inset -1vmin 2vmin var(--hair);
  top: 12.5%;
  left: 44.5%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 84% 100%, 85% 60%, 70% 100%, 0% 100%)
}

.neck {
  width: 4%;
  height: 80%;
  background: var(--yellow);
  left: 43.5%;
  top: 22%;
  clip-path: polygon(40% 0%, 85% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
}

.neck::after {
  width: 5vmin;
  height: 5vmin;
  background: var(--brown);
  color: var(--brown);
  border-radius: 50%;
  top: 5.5vmin;
  left: -2vmin;
  box-shadow: 4.5vmin 7vmin, -2vmin 15vmin 0 2vmin, 3vmin 22vmin 0 -1vmin, 3.75vmin 25vmin 0 -1.25vmin, 3vmin 34vmin 0 2vmin, 1.5vmin 40vmin 0 -1.5vmin, 0 46vmin, 1.75vmin 48.5vmin 0 -1.25vmin, 4vmin 53vmin 0 -1vmin, 0 56vmin 0 -0.25vmin, 0.5vmin 60vmin 0 -1.2vmin, 5vmin 67vmin 0 2vmin;
}

.mane {
   width: 6%;
  height: 80%;
  background: var(--hair);
  left: 40.5%;
  top: 20%;
  clip-path: polygon(36% 0%, 100% 0%, 100% 100%, 18% 100%, 20% 81%, 30% 80.5%,22% 80%,34% 79.5%, 20% 79.2%, 29% 79%, 20% 78.5%, 21% 75%, 30% 74.75%, 21% 74.25%, 24% 50%, 40% 49.5%, 24% 49%, 32% 48.5%, 24% 48.25%, 27% 25%, 34% 24.5%, 27% 24.4%, 27% 24%, 40% 23.5%, 27% 23%, 30% 10%, 45% 9.6%, 30% 9.2%);
}

.body {
  width: 40%;
  height: 20%;
  border-radius: 100% 0 0 0 / 100% 0 0 0;
  background: var(--yellow);
  bottom: -15%;
  left: 04%;
  overflow: hidden;
}

.body::after {
  width: 7vmin;
  height: 7vmin;
  background: var(--brown);
  color: var(--brown);
  border-radius: 50%;
  left: 60%;
  top: -10%;
  
}

.cloud {
  width: 80%;
  height: 40%;
  overflow: hidden;
}

.cloud-1 {
  top: -5%;
  left: 20%;
  filter: drop-shadow(-40vmin -72.025vmin white) drop-shadow(15vmin -170vmin white) drop-shadow(5vmin -260vmin #94c6dd);
}

.cloud-1::after {
  color: #fff; #94c6dd;
  border-radius: 50%;
  width: 15%;
  height: 30%;
  background: #fff; #94c6dd;
  bottom: -15%;
  left: 0;
  box-shadow: 5vmin -7vmin 0 -3vmin, 21vmin -16vmin 0 10vmin,  40vmin -28vmin 0 3vmin, 52vmin -24vmin 0 -1.75vmin, 56vmin -10vmin 0 6vmin, 65vmin 0 0 3vmin, 40vmin 0 0 20vmin, 12vmin 0 0 5vmin;
}

.cloud-2 {
  top: -2%;
  left: 65%;
  filter: drop-shadow(-52vmin 35vmin white) drop-shadow(-20vmin -75vmin white) drop-shadow(35vmin -170vmin #94c6dd) drop-shadow(5vmin -260vmin #fff);
}

.cloud-2::after {
  color: #94c6dd;
  border-radius: 50%;
  width: 12%;
  height: 30%;
  background: #94c6dd;
  bottom: -20%;
  left: 2%;
  box-shadow: 9vmin -4.25vmin 0 3.75vmin, 18.5vmin -1.5vmin, 23.5vmin 0.25vmin 0 -2.5vmin; 
}

.sun {
  background: #fe0;
  width: 30vmin;
  height: 30vmin;
  box-shadow: 0 0 30vmin 5vmin yellow;
  top: -100vmin;
  left: 10vmin
}

.smile {
  left: 50%;
  width: 50%;
  height: 40%;
  border: 0.4vmin solid transparent;
  border-bottom: 0.4vmin solid var(--eyes);
  transform: rotate(110deg)
}