:root {
  --skin: #f6c09c;
  --skin-shadow: #ed927d;
  --background: #ed4042;
  --red: #f52f67;
  --red-shadow: #e27180;
  --dark-red: #680524;
  --black: #00243a;
  --white: #fff;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--background);
}

.container {
  height: 100vh;
  display: flex;  
  justify-content: center;
  align-items: center;
}

.head {
  width: 200px;
  height: 350px;
  background-color: var(--skin);
  border-radius: 100px;
  position: relative;
}

.eye {
  width: 50px;
  height:50px;
  background-color: var(--white);
  border-radius: 50%;
  position: absolute;
}

.eye-left {
  left: 47%;
  top: 28%;
}

.eye-right {
  left: 27%;
  top: 28%;
}

.expression {
  width: 100px;
  height: 25px;
  background-color: var(--skin);
  position: absolute;
  left: 50px;
  top: 90px;
}

.beard {
  width: 200px;
  height: 220px;
  background-color: var(--black);
  position: absolute;
  top: 170px;
  border-radius: 70px 70px 100px 100px;
}

.nose {
  width: 50px;
  height: 50px;
  background-color: var(--skin);
  border-radius: 100px;
  position: absolute;
  top: 56%;
  left: 38%;
  transform: translate(0, -100%);
}

.ear{
  width: 40px;
  height: 40px;
  background-color: var(--skin-shadow);
  border-radius: 100px;
  position: absolute;
  z-index: -1;
}

.ear-left {
  top: 40%;
  left: -10%;
}

.ear-right {
  top: 40%;
  left: 90%;
}

.mouth {
  width: 80px;
  height: 50px;
  background-color: var(--dark-red);
  border-radius: 0 0 100px 100px;
  position: absolute;
  top: 65%;
  left: 30%;
  transform: translate(0, -40%);
}

.teeth {
  width: 60px;
  height: 10px;
  background-color: var(--white);
  border-radius: 0 0 10px 0 ;
  position: absolute;
  top: 59.5%;
  left: 30%;
}

.tongue {
  width: 40px;
  height: 20px;
  background-color: var(--red);
  border-radius: 0 10px 0 100%;
  position: absolute;
  top: 70%;
  left: 33%;
  transform: translate(0, -40%);
}

.pupil{
  width: 7px;
  height: 7px;
  background-color: var(--black);
  border-radius: 50%;
  position: absolute;
}

.pupil-left {
  top: 36%;
  left: 38%;
}

.pupil-right {
  top: 36%;
  left: 58%;
}

.neck {
  width: 140px;
  height: 100px;
  background-color: var(--skin-shadow);
  position: absolute;
  top: 90%;
  left: 15%;
  z-index: -1;
}

.detail{
  width: 3px;
  height: 15px;
  background-color: var(--red-shadow);
  border-radius: 10px;
  position: absolute;
  top: 44%;
}

.detail-one-left {
  transform: rotate(-45deg);
  left: -4%;
}

.detail-one-right {
  transform: rotate(45deg);
  left: -4%;
}

.detail-two-left {
  transform: rotate(-45deg);
  left: 103%;
}

.detail-two-right {
  transform: rotate(45deg);
  left: 103%;
}