.main
  .finn
    .hat
    .ear_left
    .ear_left_bg
    .ear_right
    .ear_right_bg
    .face
    .eye_left
    .eye_right
    .mouth

@bgColor: #87e1ff;
@faceColor: #fad4be;
@hatColor: white;

.main {
  width: 400px;
  height: 300px;
}
.finn {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translateY(-50%);
  margin-left: -75px;
}
.face {
  position: absolute;
  width: 150px;
  height: 90px;
  border: 2px solid #333;
  background: @faceColor;
  border-radius: e("75px/45px");
}
.hat {
  position: absolute;
  left: -25px;
  top: -20px;
  width: 200px;
  height: 130px;
  border: 2px solid #333;
  background: @hatColor;
  border-radius: e("100px/50px");
}
.ear(@left) {
  position: absolute;
  z-index: 101;
  left: @left;
  top: -25px;
  width: 22px;
  height: 20px;
  background: @hatColor;
  border: 2px solid #333;
  border-radius: 80px 80px 0 0;
}
.ear_bg(@left, @borderLeft, @borderRight) {
  position: absolute;
  z-index: 102;
  left: @left;
  top: -3px;
  width: 22px;
  height: 35px;
  background: @hatColor;
  border-left: @borderLeft;
  border-right: @borderRight;
}
.ear_left {
  .ear(-25px);
}
.ear_left_bg {
  .ear_bg(-25px, 2px solid #333, none);
}
.ear_right {
  .ear(153px);
}
.ear_right_bg {
  .ear_bg(155px, none, 2px solid #333);
}
.eye(@left) {
  position: absolute;
  left: @left;
  top: 35px;
  width: 8px;
  height: 14px;
  background: #333;
  border-radius: e("8px/14px");
}
.eye_left {
  .eye(30px);
}
.eye_right {
  .eye(115px);
}
.mouth {
  &::before {
    position: absolute;
    content: "";
    left: 51px;
    top: 40px;
    width: 50px;
    height: 25px;
    background: #333;
    border-radius: e("50px/25px");
  }
  &::after {
    position: absolute;
    content: "";
    left: 45px;
    top: 20px;
    width: 60px;
    height: 40px;
    background: @faceColor;
    border-radius: e("80px/30px");
  }
}

body {
  background: @bgColor;
}

/**
 * Adventure Time Finn the Human face
 */