<div class="container">
  <div class="dog">
    <div class="dog__head">
      <div>
        <div class="eye"></div>
        <div class="dimple"></div>
        <div class="dimple"></div>
        <div class="dimple"></div>
        <div class="dimple"></div>
        <div class="nose"></div>
      </div>
      <div>
        <div class="eye"></div>
        <div class="dimple"></div>
        <div class="dimple"></div>
        <div class="dimple"></div>
        <div class="dimple"></div>
        <div class="nose"></div>
      </div>
      <div class="dog__collar">
        <div></div>
        <div></div>
      </div>
      <div class="dog__tongue">
        <div class="shadow"></div>
      </div>
    </div>
  </div>
</div>

$body: #75a8cf;
$skin: #f5e9d3;
$skinShadow: #e5dac6;
$gray: #6e7071;
$grayShadow: #404040;
$tongue: #e48670;
$tongueShadow: #c2715e;
$white: #e5e8e7;
$whiteShadow: #d3d5d6;
$ear: #eaddca;
$earShadow: #c9bfae;
body {
  background-color: $body;
  overflow: hidden;
}

.container {
  max-width: 400px;
  margin: 100px auto;
  position: relative;
}

.dog {
  &__head {
    display: flex;
    position: relative;
    width: 240px;
    margin: 0 auto;
    &::after {
      background-color: $ear;
      content: "";
      position: absolute;
      left: -40px;
      width: 100px;
      height: 200px;
      border-radius: 40px;
      top: 15px;
      z-index: -1;
    }

    &::before {
      background-color: $earShadow;
      content: "";
      position: absolute;
      right: -40px;
      width: 100px;
      height: 200px;
      border-radius: 40px;
      top: 15px;
      z-index: -1;
    }
    & > div {
      width: 120px;
      height: 280px;
      position: relative;

      &:first-child {
        background-color: $skin;
        border-top-left-radius: 60px;
        border-bottom-left-radius: 60px;

        .eye {
          background-color: $gray;
          left: 50%;
        }

        .nose {
          position: absolute;
          top: 150px;
          left: calc(50% + 10px);
          width: 0;
          height: 0;
          border-style: solid;
          border-width: 0 50px 50px 0;
          border-color: transparent $gray transparent transparent;
        }

        .dimple {
          width: 9px;
          height: 9px;
          background-color: $gray;
          position: absolute;
          border-radius: 100%;
          z-index: 1;
          &:nth-child(2) {
            bottom: 60px;
            left: 50%;
          }

          &:nth-child(3) {
            bottom: 45px;
            left: calc(50% - 15px);
          }

          &:nth-child(4) {
            bottom: 35px;
            left: 50%;
          }

          &:nth-child(5) {
            bottom: 45px;
            left: calc(50% + 15px);
          }
        }
      }

      &:nth-child(2) {
        background-color: $skinShadow;
        border-top-right-radius: 60px;
        border-bottom-right-radius: 60px;

        .eye {
          background-color: $grayShadow;
          right: 50%;
        }
        .dimple {
          width: 9px;
          height: 9px;
          background-color: $grayShadow;
          position: absolute;
          border-radius: 100%;
          z-index: 1;
          &:nth-child(2) {
            bottom: 60px;
            right: 50%;
          }

          &:nth-child(3) {
            bottom: 45px;
            right: calc(50% - 15px);
          }

          &:nth-child(4) {
            bottom: 35px;
            right: 50%;
          }

          &:nth-child(5) {
            bottom: 45px;
            right: calc(50% + 15px);
          }
        }
      }

      .eye {
        border-radius: 100%;
        height: 30px;
        width: 30px;
        position: absolute;
        top: 80px;
      }

      .nose {
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 50px 50px 0 0;
        top: 150px;
        border-color: $grayShadow transparent transparent transparent;
      }
    }
  }

  div.dog__collar {
    position: absolute;
    width: 100%;
    & > div {
      &:first-child {
        background-color: $gray;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: -20px;
        left: calc(50% - 30px - 20px);

        &::after {
          content: "";
          background-color: $white;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          border-radius: 100%;
        }
      }

      &:last-child {
        background-color: $grayShadow;
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: -20px;
        right: calc(50% - 30px - 20px);

        &::after {
          content: "";
          background-color: $white;
          position: absolute;
          top: 50%;
          right: 1px;
          transform: translate(-50%, -50%);
          width: 10px;
          height: 10px;
          border-radius: 100%;
        }
      }
    }
  }

  div.dog__tongue {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 100px;
    background-color: $tongue;
    bottom: -40px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
    overflow: hidden;

    &::after {
      content: "";
      position: absolute;
      top: -30px;
      background-color: $skin;
      left: -20px;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      z-index: -1;
    }

    &::before {
      content: "";
      position: absolute;
      top: -30px;
      background-color: $skinShadow;
      right: -20px;
      width: 50px;
      height: 50px;
      border-radius: 100%;
      z-index: -1;
    }

    .shadow {
      position: absolute;
      width: 50%;
      height: 100px;
      right: 0;
      background-color: $tongueShadow;
      border-bottom-right-radius: 30px;
      z-index: -2;
    }
  }
}