body {
  height: 100vh;
  margin:0;
  background-image: url(https://projects.codecraftworks.com/web/klgxMxoeys1ECjM03zn9/assets/designecologist-SQuY313aZyA-unsplash.jpg);
  background-size: 100vw 100vh;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
}
@-webkit-keyframes tail {
  0%{
 transform: rotate(10deg)
  }
  50%{
    transform:rotate(-10deg)
  }
  100%{
    transform: rotate(10deg)
  }
}
.cat{
  position: relative;
  height:40rem;
  width:40rem;
  background: trasparent;
  border-radius: 50%;
}
.head{
  position: absolute;
  height:10rem;
  width:10rem;
  border-radius: 50%;
  background-color: #e0955c;
  top:47%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 2;
}
.ear{
  position: absolute;
  width:0;
  height:0;
  border-left: 3rem solid transparent;
  border-right: 3rem solid transparent;
  border-bottom: 3.5rem solid #ed8f47;
  border-radius: 40%;
  transform:rotate(180deg);
}
.ear:after{
  content:"";
  position: absolute;
  width:0;
  height:0;
  border-left: 1.5rem solid transparent;
  border-right: 3rem solid transparent;
  border-bottom: 2.5rem solid pink;
  border-radius: 30%;
  transform:rotate(10deg);
  left:-1.6rem;
  top: 0.5rem;
}
.ear-left-right {
  right: 60%;
  -webkit-box-reflect: left 2rem;
}
.eye{
  border: 2px solid black;
  height: 1.5rem;
  width:2rem;
  background: #006620;
  border-radius: 50%;
  position: absolute;
  top: 35%;
}
.eye:before{
  content:"";
  height: 1.4rem;
  width:0.5rem;
  background: black;
  border-radius: 50%;
  position: absolute;
  top:0.1rem;
  right:0.8rem;
}
.eye-left{
  right:20%;
}
.eye-right{
  left:20%;
}
.nose{
  position: absolute;
  width:0;
  height:0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-top: 1rem solid pink;
  border-radius: 40%;
  top: 60%;
  left: 60%;
  transform: translate(-90%, 40%)
}
.mouth{
    width: 3rem;
    height: 5rem;
    position: absolute;
    top: 30%;
    left: 35%;
    border-radius: 20% 30% 30% 30%;
    border-top: 3px solid transparent;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-bottom: 3px solid #2d241f;
}
.mouth:after{
  content:"";
  width: 0rem;
  height: 0rem;
  position: absolute;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-top: 0.5rem solid white;
  top:100%;
  left: 60%;
}
.whisker1{
  position: absolute;
  width:3rem;
  height:0.1rem;
  background:black;
  transform: rotate(10deg);
  top: 60%;
  left:-10%;
}
.whisker2{
  position: absolute;
  width:3rem;
  height:0.1rem;
  background:black;
  transform: rotate(-10deg);
  top: 60%;
  right:-10%;
}
.whisker3{
  position: absolute;
  width:3rem;
  height:0.1rem;
  background:black;
  transform: rotate(10deg);
  top: 65%;
  left:-10%;
}.whisker4{
  position: absolute;
  width:3rem;
  height:0.1rem;
  background:black;
  transform: rotate(-10deg);
  top: 65%;
  right:-10%;
}
.body{
  background: #e0955c;
  width: 12rem;
  height: 14rem;
  position: absolute;
  left: 50%;
  top: 68%;
  transform: translate(-50%, -50%);
  clip-path: polygon(29% 0, 71% 0, 100% 100%, 0% 100%);
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  z-index: 1;
}
.leg{
  border-left: 2px solid black;
  border-right: 2px solid black;
  height: 10rem;
  width: 2.5rem;
  background: #e0956c;
  position: absolute;
  bottom: 0;
}
.leg:after{
  content: "";
  position: absolute;
  background: #efd6ba;
  width: 3.2rem;
  height: 1.6rem;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.left-leg {
  left: 20%;
}

.right-leg {
  right: 20%;
}

.tail{
  position: absolute;
  width: 10rem;
  height: 1.5rem;
  background: #e0955c;
  border-radius: 40%;
  top: 80%;
  left: 55%;
  -webkit-animation: tail 2s linear infinite;
}