html,
body {
  margin: 0px;
  padding: 0px;
}

body {
  background: url(../img/fantasy-art-anime-studio-ghibli-my-neighbor-totoro-wallpaper.jpg);
  display: flex;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.container {
  width: 825px;
  height: 410px;
  position: relative;
}

.totoro {
  display: block;
  width: 299px;
  height: 275px;
  background-color: #a78d82;
  border-radius: 40% 40% 30% 30% / 60% 60% 40% 40%;
  position: absolute;
  bottom: 9px;
  left: 436px;
}
.totoro .head {
  display: block;
  width: 217px;
  height: 156px;
  background-color: #a78d82;
  border-radius: 50% 50% 0% 0% / 100% 100% 20% 20%;
  position: absolute;
  top: -65px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.totoro .head .nose {
  width: 25px;
  height: 9px;
  display: block;
  background: #000;
  position: absolute;
  left: 96px;
  top: 45px;
  border-radius: 50%;
}
.totoro .head .ear {
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-bottom: 50px solid #a78d82;
  position: relative;
  left: 39px;
  top: -77px;
  -webkit-transform: rotate(350deg);
  transform: rotate(355deg);
  z-index: 5;
}
.totoro .head .ear:before {
  content: "";
  width: 14px;
  height: 20px;
  background: #a78d82;
  display: block;
  position: absolute;
  top: 52px;
  left: -6px;
}
.totoro .head .ear:after {
  content: "";
  position: absolute;
  left: -16px;
  top: 50px;
  width: 0;
  height: 0;
  border: 16px solid transparent;
  border-top: 20px solid #a78d82;
}
.totoro .head .ear-r {
  left: 150px;
  top: -143px;
  transform: rotate(370deg);
}
.totoro .head .mouth {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 20px 80px 0 80px;
  border-color: #fff transparent transparent transparent;
  position: absolute;
  top: 74px;
  left: 29px;
  z-index: 3;
}
.totoro .head .mouth:before {
  content: "";
  width: 164px;
  height: 10px;
  background: #fff;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  -webkit-transform-origin: 0 100%;
  z-index: 4;
  position: absolute;
  left: -83px;
  top: -25px;
}
.totoro .head .mouth .under:before {
  content: "";
  width: 84px;
  height: 10px;
  background: #fff;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  transform: rotate(14deg);
  -webkit-transform-origin: 0 100%;
  z-index: 5;
  position: absolute;
  left: -83px;
  top: -25px;
}
.totoro .head .mouth .under:after {
  content: "";
  width: 88px;
  height: 10px;
  background: #fff;
  border-radius: 100% 100% 100% 100% / 100% 100% 100% 100%;
  -webkit-transform: rotate(14deg);
  transform: rotate(-13deg);
  -webkit-transform-origin: 0 100%;
  z-index: 5;
  position: absolute;
  left: -4px;
  top: -5px;
}
.totoro .head .whisker {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 68px 3px 0;
  border-color: transparent black transparent transparent;
  position: absolute;
  left: -39px;
  top: 36px;
  transform: rotate(14deg);
}
.totoro .head .whisker-r {
  transform: rotate(180deg);
  right: -44px;
  left: unset;
  top: 65px;
}
.totoro .head .whisker:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 68px 3px 0;
  border-color: transparent black transparent transparent;
  position: absolute;
  left: 0px;
  top: 15px;
  -webkit-transform: rotate(14deg);
  transform: rotate(-13deg);
}
.totoro .head .whisker:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 68px 3px 0;
  border-color: transparent black transparent transparent;
  position: absolute;
  left: 4px;
  top: 30px;
  -webkit-transform: rotate(14deg);
  transform: rotate(-22deg);
}
.totoro .head .eye {
  width: 25px;
  height: 25px;
  display: block;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 9;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid #000;
}
.totoro .head .eye:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #000;
  border-radius: 50%;
}
.totoro .head .eye:after {
  content: "";
  display: block;
  width: 5px;
  height: 5px;
  background-color: #fff;
  position: absolute;
  border-radius: 50%;
}
.totoro .head .eye-l {
  top: 33px;
  left: 42px;
}
.totoro .head .eye-l:after {
  right: 5px;
}
.totoro .head .eye-r {
  top: 33px;
  right: 42px;
}
.totoro .head .eye-r:after {
  left: 5px;
}
.totoro .arm-l {
  width: 112px;
  height: 190px;
  background: #a78d82;
  border-radius: 200% 0% 100% 83% / 94% 46% 49% 74%;
  position: absolute;
  top: -4px;
  -webkit-transform: rotate(38deg);
  transform: rotate(33deg);
  left: -9px;
}
.totoro .arm-r {
  width: 80px;
  height: 300px;
  background: #a78d82;
  border-radius: 200% 200% 200% 200%;
  transform: rotate(75deg);
  top: -85px;
  left: 175px;
  position: absolute;
}
.totoro .arm-r:before {
  content: "";
  display: block;
  width: 50px;
  height: 30px;
  background-color: #a78d82;
  transform: rotate(103deg);
  position: absolute;
  left: -9px;
  top: 79px;
}
.totoro .finger {
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid #d3b3a6;
  position: absolute;
  z-index: -1;
}
.totoro .finger-l {
  left: -25px;
  transform: rotate(23deg);
  bottom: 95px;
}
.totoro .finger-r {
  right: -67px;
  transform: rotate(-107deg);
  top: 8px;
}
.totoro .finger:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid #d3b3a6;
  position: absolute;
  bottom: 3px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(6deg);
  left: -25px;
}
.totoro .finger:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid #d3b3a6;
  position: absolute;
  bottom: 3px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  left: -6px;
}
.totoro .belly {
  width: 268px;
  height: 220px;
  border-radius: 50%;
  background: #fff;
  position: absolute;
  bottom: 6px;
  left: 15px;
  position: absolute;
  z-index: 2;
}
.totoro .belly .arrow {
  position: absolute;
}
.totoro .belly .arrow-1 {
  top: 29px;
  left: 66px;
}
.totoro .belly .arrow-2 {
  left: 126px;
  top: 29px;
}
.totoro .belly .arrow-3 {
  left: 185px;
  top: 29px;
}
.totoro .belly .arrow-4 {
  left: 36px;
  top: 68px;
}
.totoro .belly .arrow-5 {
  left: 94px;
  top: 68px;
}
.totoro .belly .arrow-6 {
  left: 153px;
  top: 68px;
}
.totoro .belly .arrow-7 {
  left: 215px;
  top: 68px;
}
.totoro .belly .arrow:before, .totoro .belly .arrow:after {
  position: absolute;
  content: "";
  width: 10px;
  height: 30px;
  background: #6187c5;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  transform: rotate(-60deg);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 0%;
}
.totoro .belly .arrow:after {
  transform: rotate(60deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: 93% 0%;
}
.totoro .foot {
  display: block;
  width: 299px;
  height: 155px;
  background-color: #a78d82;
  border-radius: 20% 20% 45% 45% / 30% 30% 100% 100%;
  position: absolute;
  bottom: -9px;
  left: 0px;
  overflow: hidden;
}
.totoro .foot:before {
  content: "";
  width: 35px;
  height: 120px;
  border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
  background: teal;
  position: absolute;
  bottom: -110px;
  left: 127.5px;
}

.mini-totoro {
  display: block;
  width: 168px;
  height: 183px;
  background-color: #6187c5;
  border-radius: 40% 40% 30% 30% / 60% 60% 40% 40%;
  position: absolute;
  bottom: 6px;
  left: 200px;
}
.mini-totoro .head {
  display: block;
  width: 131px;
  height: 92px;
  background-color: #6187c5;
  border-radius: 40% 40% 0% 0% / 100% 100% 20% 20%;
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.mini-totoro .head .ear {
  width: 44px;
  height: 120px;
  border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
  background: #6187c5;
  position: absolute;
}
.mini-totoro .head .ear-l {
  top: -25px;
  left: 19px;
  transform: rotate(-15deg);
}
.mini-totoro .head .ear-r {
  top: -25px;
  right: 18px;
  transform: rotate(15deg);
}
.mini-totoro .head .eye {
  width: 23px;
  height: 18px;
  display: block;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #000;
}
.mini-totoro .head .eye:before {
  content: "";
  display: block;
  width: 12px;
  height: 9px;
  background: #000;
  border-radius: 50%;
}
.mini-totoro .head .eye-l {
  transform: rotate(-50deg);
  top: 37px;
  left: 24px;
}
.mini-totoro .head .eye-r {
  transform: rotate(50deg);
  top: 37px;
  right: 24px;
}
.mini-totoro .head .nose {
  width: 5px;
  height: 3px;
  display: block;
  background: #000;
  position: absolute;
  left: 63px;
  top: 51px;
  border-radius: 50%;
}
.mini-totoro .arm {
  width: 40px;
  height: 100px;
  background: #6187c5;
  border-radius: 65% 33% 45% 72% / 84% 36% 30% 39%;
  position: absolute;
  top: 7px;
}
.mini-totoro .arm-l {
  transform: rotate(38deg);
  left: 1px;
}
.mini-totoro .arm-r {
  transform: scaleX(-1) rotate(38deg);
  right: 1px;
}
.mini-totoro .belly {
  width: 130px;
  height: 112px;
  background: #fff;
  border-radius: 50%;
  bottom: 14px;
  position: absolute;
  left: 19px;
  z-index: 1;
}
.mini-totoro .belly .arrow {
  position: absolute;
}
.mini-totoro .belly .arrow-1 {
  left: 36px;
  top: 25px;
}
.mini-totoro .belly .arrow-2 {
  left: 74px;
  top: 13px;
}
.mini-totoro .belly .arrow-3 {
  right: 18px;
  top: 25px;
}
.mini-totoro .belly .arrow:before, .mini-totoro .belly .arrow:after {
  position: absolute;
  content: "";
  width: 15px;
  height: 30px;
  background: #6187c5;
  border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-35deg);
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
}
.mini-totoro .belly .arrow:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(35deg);
  -webkit-transform-origin: 100% 100%;
  transform-origin: -6% -65%;
}
.mini-totoro .foot {
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 20px solid transparent;
  border-top: 40px solid #6187c5;
  position: absolute;
  bottom: -9px;
  transform: rotate(35deg);
}
.mini-totoro .foot-l {
  left: 15px;
}
.mini-totoro .foot-r {
  right: 15px;
  transform: scaleX(-1) rotate(35deg);
  left: unset;
}
.mini-totoro .foot:before {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #6187c5;
  position: absolute;
  bottom: 8px;
  -webkit-transform: rotate(35deg);
  transform: rotate(-9deg);
  left: -6px;
}
.mini-totoro .foot:after {
  content: "";
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 20px solid transparent;
  border-top: 20px solid #6187c5;
  position: absolute;
  bottom: 16px;
  -webkit-transform: rotate(35deg);
  transform: rotate(-9deg);
  left: 7px;
}

.mini-mini-totoro {
  display: block;
  width: 126px;
  height: 141px;
  background-color: #fff;
  border-radius: 40% 40% 40% 40% / 60% 60% 40% 40%;
  position: absolute;
  bottom: 0px;
  left: 20px;
}
.mini-mini-totoro .ear {
  width: 50px;
  height: 120px;
  border-radius: 50% 50% 0% 0% / 100% 100% 0% 0%;
  background: #fff;
  position: absolute;
}
.mini-mini-totoro .ear-l {
  top: -25px;
  left: 9px;
}
.mini-mini-totoro .ear-r {
  top: -25px;
  right: 9px;
}
.mini-mini-totoro .eye {
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  z-index: 2;
  position: absolute;
  border: 2px solid #000;
}
.mini-mini-totoro .eye:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #000;
  border-radius: 50%;
  margin-left: 4px;
  margin-top: 4px;
}
.mini-mini-totoro .eye-l {
  left: 33px;
  top: 28px;
}
.mini-mini-totoro .eye-r {
  right: 33px;
  top: 28px;
}