/* css */
h1 {
  font-family: Georgia;
  color: #394E59;
}
.background {
  background-color: #FFEEE9;
  position: absolute;
  width: 879px;
  height: 741px;
  left: 79px;
  top: 100px;
  box-sizing: border-box;
  border-radius: 81px;
  margin: auto;
}

.imagebox {
  position: absolute;
  width: 957px;
  height: 928px;
  left: -40px;
  top: -132px;
}


/* hair */
.hairleft {
  position: absolute;
  width: 691px;
  height: 543px;
  left: 150.36px;
  top: 409.95px;
  background: #394E59;
  border-radius: 3600px 2900px 100px 100px;
}

.hairright {
  position: absolute;
  width: 258px;
  height: 478px;
  left: 705.36px;
  top: 476.95px;
  background: #394E59;
  border-radius: 360px 3600px 100px 100px;
}

/* highlights */
.highlights1 {
  position: absolute;
  width: 514.2px;
  height: 530.5px;
  left: 175.98px;
  top: 419px;
  border: 1px solid #4B6674;
  border-radius: 360px 120px 0px 0px;
}
.highlights2 {
  position: absolute;
  width: 496.2px;
  height: 505.5px;
  left: 193.98px;
  top: 445px;
  border: 1px solid #4B6674;
  border-radius: 360px 110px 0px 0px;
}
.highlights3 {
  position: absolute;
  width: 480.2px;
  height: 475.5px;
  left: 208.98px;
  top: 474px;
  border: 1px solid #4B6674;
  border-radius: 360px 90px 0px 0px;
}

.highlights4 {
  position: absolute;
  width: 199.2px;
  height: 400.5px;
  left: 688.98px;
  top: 548px;
  border: 1px solid #4B6674;
  border-radius: 40px 360px 0px 0px;
}
.highlights5 {
  position: absolute;
  width: 226.2px;
  height: 414.5px;
  left: 686.98px;
  top: 535px;
  border: 1px solid #4B6674;
  border-radius: 80px 360px 0px 0px;
}
.highlights6 {
  position: absolute;
  width: 240.2px;
  height: 438.5px;
  left: 691.98px;
  top: 508px;
  border: 1px solid #4B6674;
  border-radius: 120px 360px 0px 0px;
}

/* face */
.face {
  position: absolute;
  width: 614.91px;
  height: 424.01px;
  left: 238.5px;
  top: 528.49px;

  background: #FFEEE9;
  border: 1px solid #FFEEE9;
  border-radius: 3600px 3600px 100px 100px;
}

/* shadingleft */
.shadingleft {
  position: absolute;
  width: 258.72px;
  height: 250.99px;
  left: 264.78px;
  top: 701.51px;

  background: #EDD6D1;
}

/* shadingright */
.shadingright {
  position: absolute;
  width: 248.93px;
  height: 196.41px;
  left: 571px;
  top: 755.71px;

  background: #EDD6D1;
}

/* eyelashleft */
/* No idea how to transform so that it flips x and y. Tried to transform with matrix and nothing happened. */
.eyelashleft {
  position: absolute;
  width: 136px;
  height: 82px;
  left: 313px;
  top: 831px;
  transform: rotate(164deg) scaleX(1);
  border-radius: 90px 360px;
  background: #394E59;
  border: 1px solid #394E59;
}

/* eyelashright */
.eyelashright {
  position: absolute;
  width: 136px;
  height: 83px;
  left: 635.03px;
  top: 831px;
  transform: rotate(198deg) scaleY(1);
  border-radius: 360px 90px;
  background: #394E59;
  border: 1px solid #394E59;
}

/* eyeoutlineleft */
/* No idea how to transform so that it flips x and y. Tried to transform with matrix and nothing happened. */
.eyeoutlineleft {
  position: absolute;
  width: 123px;
  height: 75px;
  left: 324.97px;
  top: 840px;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 360px 60px;
  transform: rotate(160deg) scaleX(-1);
}

/* eyeoutlineright */
.eyeoutlineright {
  position: absolute;
  width: 123px;
  height: 75px;
  left: 636.97px;
  top: 840px;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  border-radius: 360px 60px;
  transform: rotate(200deg) scaleY(1);
}

/* nose */
.nose {
  position: absolute;
  width: 81px;
  height: 58px;
  left: 515px;
  top: 909px;
  border-radius: 100px 100px 100px 100px;
  background: #FFEEE9;
  border: 1px solid #FFEEE9;
}

/* shadinglight */
.shadinglight {
  position: absolute;
  width: 249.39px;
  height: 396.5px;
  left: 608px;
  top: 556px;
  background: #FCF2F0;
  border: 1px solid #FCF2F0;
  border-radius: 0px 40000px 20px 20px;
}

/* shadingdark */
.shadingdark {
  position: absolute;
  width: 299.99px;
  height: 425px;
  left: 234.1px;
  top: 528.49px;
  background: #EDD6D1;
  border-radius: 36000px 200px 20px 20px;
}

/* eyebrows */
.eyebrow2 {
  position: absolute;
  width: 177px;
  height: 48px;
  left: 268px;
  top: 761px;
  border: solid 34px #394E59;
  border-color: #394E59 transparent transparent transparent;
  border-radius: 100%/100px 100px 100px 100px;
  transform: rotate(354deg);
}

.eyebrow1 {
  position: absolute;
  width: 177px;
  height: 48px;
  left: 592px;
  top: 761px;
  border: solid 34px #394E59;
  border-color: #394E59 transparent transparent transparent;
  border-radius: 100%/100px 100px 100px 100px;
  transform: rotate(6deg);
}

/* iris2 */
.iris2 {
  position: absolute;
  width: 61px;
  height: 61px;
  left: 666px;
  top: 850px;
  border-radius: 360px;
  background: #4B6674;
}

/* pupil2 */
.pupil2 {
  position: absolute;
  width: 39px;
  height: 39px;
  left: 676px;
  top: 856px;
  border-radius: 360px;
  background: #000000;
}

/* iris1 */
.iris1 {
  position: absolute;
  width: 61px;
  height: 61px;
  left: 351px;
  top: 850px;
  border-radius: 360px;
  background: #4B6674;
}

/* pupil1 */
.pupil1 {
  position: absolute;
  width: 39px;
  height: 39px;
  left: 364px;
  top: 856px;
  border-radius: 360px;
  background: #000000;
}

/* eyedot2 */
.eyedot2 {
  position: absolute;
  width: 6px;
  height: 6px;
  left: 396px;
  top: 857px;
  border-radius: 360px;
  background: #FFFFFF;
}

/* eyedot1 */
.eyedot1 {
  position: absolute;
  width: 6px;
  height: 6px;
  left: 705px;
  top: 857px;
  border-radius: 360px;
  background: #FFFFFF;
}

/* wrinkle2 */
.wrinkle2 {
  position: absolute;
  width: 242.71px;
  height: 23.1px;
  left: 420.67px;
  top: 731.46px;
  border: 3px solid rgba(216, 185, 178, 0.25);
  border-radius: 4px;
}

/* wrinkle1 */
.wrinkle1 {
  position: absolute;
  width: 183.63px;
  height: 14.95px;
  left: 443.03px;
  top: 686.93px;
  border: 3px solid rgba(216, 185, 178, 0.25);
  border-radius: 4px;
}

.frame {
  border: 33px solid #B07564;
  position: absolute;
  width: 879px;
  height: 741px;
  left: 119px;
  top: 232px;
  box-sizing: border-box;
  border-radius: 76px;
  margin: auto;
}