* {
  margin: 0;
  padding: 0;
  border: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background-color: #000;
}

.cat {
  width: 500px;
  height: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  .ears {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 65%;
    height: 30%;
    z-index: 0;
    .ear {
      position: absolute;
      top: 10%;
      width: 33%;
      height: 0;
      background-color: #fff;
      padding-bottom: 33%;
      border-radius: 25%;
      &:before {
        content: "";
        background-color: pink;
        width: 75%;
        height: 75%;
        position: absolute;
        border-radius: 25%;
        top: 12.5%;
        left: 12.5%;
      }
      &.left {
        left: 0;
        transform: rotate(20deg);
      }
      &.right {
        right: 0;
        transform: rotate(-20deg);
      }
    }
  }
  .face {
    border-radius: 50%;
    z-index: 1;
    background-color: #fff;
    width: 75%;
    height: 40%;
    position: absolute;
    left: 0;
    right: 0;
    top: 5%;
    margin: 0 auto;
    border-bottom: 10px solid red;
    &:before {
      content: "";
      background-color: gold;
      position: absolute;
      width: 10%;
      height: 0;
      padding-bottom: 10%;
      bottom: -12.5%;
      left: 0;
      right: 0;
      margin: 0 auto;
      border-radius: 50%;
    }
    .eyes {
      position: absolute;
      left: 0;
      right: 0;
      width: 50%;
      height: 5%;
      top: 30%;
      margin: 0 auto;
      .eye {
        position: absolute;
        width: 33%;
        height: 0;
        border-radius: 50%;
        padding-bottom: 33%;
        border-top: 7px solid #000;
        &.left {
          left: 0;
        }
        &.right {
          right: 0;
        }
      }
    }
    .nose {
      width: 40px;
      height: 20px;
      position: absolute;
      top: 57%;
      left: 0;
      right: 0;
      margin: 0 auto;
      &:before {
        content: "";
        position: absolute;
        border-top: 20px solid pink;
        border-left: 20px solid transparent;
        border-right: 20px solid transparent;
      }
    }
    .mouth {
      position: absolute;
      top: 57%;
      width: 10%;
      height: 0;
      padding-bottom: 10%;
      left: 0;
      right: 0;
      margin: 0 auto;
      &:before, &:after {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        border-bottom: 3px solid pink;
        border-radius: 50%;
      }
      &:before {
        left: -50%;
      }
      &:after {
        right: -50%;
      }
    }
    .blush {
      position: absolute;
      top: 55%;
      width: 70%;
      left: 0;
      right: 0;
      margin: 0 auto;
      .left, .right {
        position: absolute;
        top: 0;
        width: 20%;
        height: 0;
        padding-bottom: 20%;
        border-radius: 50%;
        background-image: radial-gradient(rgba(pink, .5), rgba(pink, 0));
      }
      .left {
        left: 0;
      }
      .right {
        right: 0;
      }
    }
  }
  .body {
    position: absolute;
    z-index: 0;
    width: 80%;
    height: 60%;
    background-color: #fff;
    top: 30%;
    left: 10%;
    border-radius: 20% / 50%;
    overflow: hidden;
    .feet {
      width: 80%;
      bottom: 0;
      position: absolute;
      left: 0;
      right: 0;
      margin: 0 auto;
      .foot {
        position: absolute;
        width: 45%;
        height: 0;
        bottom: 0;
        padding-bottom: 45%;
        background-color: #ddd;
        border-radius: 50%;
        transform: translateY(50%);
        overflow: hidden;
        &:before, &:after {
          content: "";
          position: absolute;
          top: 0;
          width: 3%;
          height: 15%;
          background-color: #000;
        }
        &:before {
          left: 42%;
        }
        &:after {
          right: 42%;
        }
        &.left {
          left: 0;
        }
        &.right {
          right: 0;
        }
      }
    }
  }
  .arm {
    z-index: 2;
    position: absolute;
    width: 13%;
    height: 35%;
    top: 20%;
    background-color: #fff;
    border-left: 2px solid #ddd;
    right: 11%;
    transform: rotate(10deg);
    transform-origin: right bottom;
    animation: wave 1s infinite ease;
    .hand {
      position: absolute;
      width: 150%;
      height: 0;
      padding-bottom: 75%;
      border-radius: 50%;
      background-color: #fff;
      border: 2px solid #ddd;
      left: -25%;
      top: -12.5%;
      overflow: hidden;
      &:before, &:after {
        content: "";
        width: 3%;
        height: 20%;
        background-color: #000;
        position: absolute;
        bottom: 0;
      }
      &:before {
        left: 42%;
      }
      &:after {
        right: 42%;
      }
    }
  }
}

@keyframes wave {
  50% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(10deg);
  }
}