.container
  .foreground
    .head
    .hair
    .arrow
    .horns
    .ear.left
    .ear.right
    .nose   
    .eyes
      .eye.left
      .eye.right
    .mouth
     

/* RGB */
$fur: rgba(250, 250, 230, 1);
$tfur: rgba(250, 250, 230, 0);
$arrow: rgba(141, 113, 101, 1);
$eyes: rgba(72, 60, 44, 1);
$mouth: rgba(133, 118, 105, 1);
$nose: rgba(71, 66, 71, 1);
$horn: rgba(95, 96, 88, 1);
$upperEar: darken($fur, 1%);
$eyeFur: darken($fur, 5%);
$bg: #ccc;

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  background-color: $bg;
}

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

.foreground {
  position: relative;
  width: 55%;
  height: 75%;
  min-height: 625px;
  min-width: 800px;
  max-width: 800px;
  max-height: 625px;
  z-index: 1;
}

.head {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.arrow {
  position: absolute;
  width: 20%;
  height: 26%;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  background-color: $arrow;
  border-top-left-radius: 100px 15px;
  border-top-right-radius: 100px 15px;
  &:before {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    left: -50%;
    background: linear-gradient(
      45deg,
      transparent,
      transparent 50%,
      $arrow 50%
    );
  }
  &:after {
    display: block;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 100%;
    right: -50%;
    background: linear-gradient(
      315deg,
      transparent,
      transparent 50%,
      $arrow 50%
    );
  }
}

.hair {
  position: relative;
  top: 0px;
  height: 64%;
  width: 100%;
  background-color: $fur;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  &:after {
    display: block;
    content: "";
    position: absolute;
    top: 99%;
    width: 100%;
    height: 100px;
    font-size: 10px;

    background: radial-gradient(
          90% 200% at 100% 0%,
          $fur 50%,
          transparent 50.25%
        ) -3.3em 0em / 6em 6em,
      radial-gradient(199% 210% at 100% 100%, $tfur 50%, $fur 50.25%) 2.7em 0em /
        6em 6em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 3em 0em /
        4em 7.5em,
      radial-gradient(199% 200% at 100% 100%, $tfur 50%, $fur 50.25%) 7em 0em /
        6em 7.5em,
      radial-gradient(110% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 6em 0em /
        6em 6em,
      radial-gradient(75% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 12em 0em / 6em
        6em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 13em 0em /
        3em 5em,
      radial-gradient(100% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 16em 0em / 5em
        5em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 17em 0em /
        3em 7em,
      radial-gradient(100% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 20em 0em / 2em
        7em,
      radial-gradient(90% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 16.6em 0em /
        8em 6em,
      radial-gradient(198% 210% at 100% 100%, $tfur 50%, $fur 50.25%) 24.54em
        0em / 4em 6em,
      radial-gradient(199% 160% at 0% 100%, $tfur 50%, $fur 50.25%) 23em 0em /
        4em 5em,
      radial-gradient(150% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 27em 0em / 4em
        5em,
      radial-gradient(199% 190% at 0% 100%, $tfur 50%, $fur 50.25%) 28em 0em /
        3em 4em,
      radial-gradient(60% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 31em 0em / 4em
        4em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 30em 0em /
        3em 6em,
      radial-gradient(199% 200% at 100% 100%, $tfur 50%, $fur 50.25%) 33em 0em /
        6em 6em,
      radial-gradient(90% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 31em 0em /
        8em 5em,
      radial-gradient(198% 210% at 100% 100%, $tfur 50%, $fur 50.25%) 39em 0em /
        4em 5em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 37.1em 0em /
        4em 6em,
      radial-gradient(100% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 41.04em 0em /
        4em 6em,
      radial-gradient(100% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 42em 0em /
        2em 4em,
      radial-gradient(199% 200% at 100% 100%, $tfur 50%, $fur 50.25%) 44em 0em /
        2em 4em,
      radial-gradient(140% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 43em 0em /
        5em 6em,
      radial-gradient(199% 200% at 100% 100%, $tfur 50%, $fur 50.25%) 48em 0em /
        5em 6em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 50em 0em /
        3em 5em,
      radial-gradient(199% 200% at 100% 100%, $tfur 50%, $fur 50.25%) 53em 0em /
        6em 5em,
      radial-gradient(199% 150% at 0% 100%, $tfur 50%, $fur 50.25%) 53em 0em /
        3em 6em,
      radial-gradient(100% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 56em 0em / 5em
        6em,
      radial-gradient(100% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 56em 0em /
        5em 5em,
      radial-gradient(199% 250% at 100% 100%, $tfur 50%, $fur 50.25%) 61em 0em /
        3em 5em,
      radial-gradient(40% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 57.5em 0em /
        5em 6.5em,
      radial-gradient(199% 250% at 100% 100%, $tfur 50%, $fur 50.25%) 62.5em 0em /
        4em 6.5em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 61em 0em /
        4em 6em,
      radial-gradient(199% 200% at 100% 100%, $tfur 50%, $fur 50.25%) 65em 0em /
        4em 6em,
      radial-gradient(100% 200% at 100% 0%, $fur 50%, $tfur 50.25%) 65em 0em /
        4em 5em,
      radial-gradient(35% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 69em 0em / 4em
        5em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 68em 0em /
        5em 7em,
      radial-gradient(100% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 73em 0em / 5em
        7em,
      radial-gradient(199% 200% at 0% 100%, $tfur 50%, $fur 50.25%) 73em 0em /
        4em 4em,
      radial-gradient(100% 200% at 0% 0%, $fur 50%, $tfur 50.25%) 77em 0em / 6em
        4em;
    background-repeat: no-repeat;
    z-index: 1000;
  }
}

.horns {
  position: absolute;
  top: -5%;
  left: -5%;
  width: 110%;
  height: 450px;
  background: transparent;
  border-top-left-radius: 40% 80%;
  border-top-right-radius: 40% 80%;
  border-bottom-right-radius: 50% 50%;
  border-bottom-left-radius: 50% 50%;
  z-index: -1;
  box-shadow: 0px 40px 0px 30px $horn;
}

.ear {
  position: absolute;
  top: 64%;
  font-size: 10px;
  width: 10%;
  height: 19.2%;
  background: $upperEar;
  border-bottom: 5px solid $arrow;

  &.left {
    left: -6%;
    background-color: $upperEar;
    border-top-left-radius: 10em 15em;
    border-bottom-right-radius: 15em 13em;
    transform: rotate(20deg);
  }

  &.right {
    right: -6%;
    border-top-right-radius: 10em 15em;
    border-bottom-left-radius: 15em 10em;
    transform: rotate(-20deg);
  }
}

.eyes {
  position: relative;
  width: 100%;
  height: 16%;
  font-size: 10px;
  background: radial-gradient(
        190% 200% at 0% 50%,
        transparent 50%,
        $eyes 50.25%
      ) -9% 0% / 10% 100%,
    radial-gradient($eyes, $eyes) 50% 0% / 97% 100%,
    radial-gradient(190% 200% at 100% 50%, transparent 50%, $eyes 50.25%) 109%
      0em / 10% 100%;
  background-repeat: no-repeat;
}

.eye {
  position: absolute;
  top: 60%;
  transform: translateY(-50%);
  font-size: 10px;
  width: 8.5%;
  height: 43%;
  background-color: $eyeFur;
  border: 3px solid $nose;
  &.left {
    left: 20%;
    border-top-right-radius: 20em 10em;
    border-bottom-left-radius: 15em 10em;
    border-top-left-radius: 2em;
    border-bottom-right-radius: 2em;
    &:after {
      display: block;
      content: "";
      position: relative;
      top: 50%;
      left: 5%;

      transform: translateY(-50%);
      width: 90%;
      height: 75%;
      background-color: black;
      border-top-right-radius: 20em 10em;
      border-bottom-left-radius: 15em 10em;
      border-top-left-radius: 2em;
      border-bottom-right-radius: 2em;
    }
  }
  &.right {
    right: 20%;
    border-top-left-radius: 20em 10em;
    border-bottom-right-radius: 15em 10em;
    border-top-right-radius: 2em;
    border-bottom-left-radius: 2em;
    &:after {
      display: block;
      content: "";
      position: relative;
      top: 50%;
      left: 5%;

      transform: translateY(-50%);
      width: 90%;
      height: 75%;
      background-color: black;
      border-top-left-radius: 20em 10em;
      border-bottom-right-radius: 15em 10em;
      border-top-right-radius: 2em;
      border-bottom-left-radius: 2em;
    }
  }
}

.nose {
  position: absolute;
  z-index: 1000;
  background: $nose;
  width: 25%;
  height: 12%;
  top: 76%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50px;
  z-index: 1001;
}

.mouth {
  position: relative;
  height: 20%;
  width: 100%;
  background-repeat: no-repeat;
  font-size: 10px;
  background: radial-gradient(100% 200% at 50% 150%, $bg 50%, $mouth 53%) 20%
      100% / 20% 1em,
    radial-gradient(100% 200% at 50% 150%, $bg 50%, $mouth 53%) 80% 100% / 20%
      1em,
    linear-gradient($mouth, $mouth);
  background-repeat: no-repeat;
  border-bottom-left-radius: 200px 200px;
  border-bottom-right-radius: 200px;
  &:before {
    display: block;
    content: "";
    width: 100%;
    height: 10em;
    top: 100%;
    font-size: 10px;
    position: absolute;
    background: radial-gradient(
        100% 200% at 50% 0%,
        $mouth 49%,
        transparent 54%
      )
      50% -0.5em / 30% 1.5em;
    background-repeat: no-repeat;
    z-index: 10;
  }
}