* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  background-color: #df5943;
}
.container {
  height: 500px;
  width: 500px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
.elephant {
  background-color: #53536e;
  height: 200px;
  width: 300px;
  border-radius: 100px 200px 250px 100px;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 60%;
}
.elephant:before {
  position: absolute;
  content: "";
  height: 80px;
  width: 100px;
  background-color: #53536e;
  right: 270px;
  top: 180px;
  border-radius: 0 0 200px 200px;
}
.elephant:after {
  position: absolute;
  content: "";
  height: 50px;
  width: 40px;
  background-color: #df5943;
  left: -40px;
  top: 179px;
  border-radius: 0 0 100px 100px;
}
.trunk {
  background-color: #53536e;
  height: 50px;
  width: 30px;
  position: absolute;
  top: 160px;
  left: 0;
}
.trunk:before {
  position: absolute;
  content: "";
  height: 180px;
  width: 15px;
  background-color: #53536e;
  top: -100px;
  left: 280px;
}
.trunk:after {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  background-color: #78718a;
  left: 278px;
  top: 70px;
  border-radius: 50px;
}
.leg {
  height: 100px;
  width: 30px;
  background-color: #53536e;
  position: absolute;
  top: 198px;
  left: 50px;
  border-radius: 0 0 20px 20px;
  box-shadow: 30px 0 #282a37, 100px 0 #53536e, 130px 0 #282a37;
}
.leg:before {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background-color: #000000;
  bottom: 220px;
  left: -30px;
  border-radius: 50%;
  box-shadow: 30px 0 #000000;
}
.leg:after {
  position: absolute;
  content: "";
  width: 10px;
  border-top: 50px solid #ffffff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  bottom: 150px;
  transform: rotate(45deg);
}
.ear {
  position: absolute;
  height: 100px;
  width: 70px;
  background-color: #78718a;
  top: 50px;
  left: 70px;
  border-radius: 0 50px 70px 70px;
}
