:root{
  --dark:#00243A;
  --skin:#F6C09C;
  --mid-skin:#ED927D;
  --dark-skin:#E76969;
  --decoration:#91268E;
}

/*html,body,.container{
  margin:0;
  padding:0;
  height:100vh;
}

body{
  background:#FED667;
}

.container{
  display:grid;
  align-items:center;
  justify-content:center;
}*/

.character-container{
  display:grid;
  justify-content:center;
  height:380px;
  width:292px;
}

.all-hair-container{
  display:grid;
  z-index:1;
  justify-self:center;
  height:143px;
  width:152px;
  animation: hair-move 1s linear infinite;
}

@keyframes hair-move{
  0%{transform:translate(0px,0px);}
  50%{transform:translate(0px,-3px);
  100% }
}

.hair-container{
  display:grid;
  grid-template-rows:repeat(4,0px);
  grid-template-columns:repeat(4,24px);
  justify-self:center;
  height:106px;
  width:108px;
}

.hair:nth-child(1){
  display:grid;
  height:84px;
  width:24px;
  background:var(--dark);
  border-radius:60px 0px 0px 0px;
  transform:translate(0px,22px);
}

.hair:nth-child(2){
  display:grid;
  height:104px;
  width:46px;
  background:var(--dark);
  border-radius:60px 0px 0px 0px;
  transform:translate(-4px,2px);
}

.hair:nth-child(3){
  display:grid;
  height:79px;
  width:33px;
  background:var(--dark);
  border-radius:60px 0px 0px 0px;
  transform:translate(8px,27px);
}

.hair:nth-child(4){
  display:grid;
  height:68px;
  width:29px;
  background:var(--dark);
  border-radius:0px 60px 0px 0px;
  transform:translate(7px,38px);
}

/*--------------------------------------------*/

.color-hair-container{
  display:grid;
  height:93px;
  width:152px;
  transform:translate(0px,-56px);
}

.left-color-hair:nth-child(1){
  display:grid;
  height:76px;
  z-index:2;
  width:33px;
  background:#90278E;
  border-radius:60px 0px 16px 0px;
  transform:rotate(-45deg) translate(10px,10px);
}

.left-color-hair:nth-child(2){
  display:grid;
  z-index:1;
  height:66px;
  width:24px;
  background:#5F1760;
  border-radius:60px 0px 16px 0px;
  transform:rotate(-45deg) translate(41px,-27px);
}

.left-color-hair:nth-child(3){
  display:grid;
  height:47px;
  width:14px;
  background:#470545;
  border-radius:60px 0px 0px 50px;
  transform:rotate(-45deg) translate(68px,-55px);
  
}

.right-color-hair:nth-child(4){
  display:grid;
  height:76px;
  z-index:2;
  width:33px;
  background:#90278E;
  border-radius:0px 60px 0px 16px;
  transform:rotate(45deg) translate(-59px,-208px);
}

.right-color-hair:nth-child(5){
  display:grid;
  height:66px;
  z-index:1;
  width:24px;
  background:#5F1760;
  border-radius:0px 60px 0px 16px;
  transform:rotate(45deg) translate(-84px,-251px);
}

.right-color-hair:nth-child(6){
  display:grid;
  height:47px;
  width:14px;
  background:#470545;
  border-radius:0px 60px 50px 0px;
  transform:rotate(45deg) translate(-103px,-285px);
}

/*---------------------------------------------*/
.face{
  display:grid;
  justify-content:center;
  justify-self:center;
  z-index:2;
  height:72px;
  width:96px;
  background:var(--skin);
  border-radius:16px;
  transform:translate(0px,-40px);
  animation: face-move 1s linear infinite;
}

@keyframes face-move{
  0%{transform:translate(0px,-40px);}
  50%{transform:translate(0px,-43px);
  100% }
}

.circle-container{
  display:grid;
  justify-self:center;
  grid-template-rows:repeat(3,0px);
  grid-template-columns:repeat(3,9px);
  height:20px;
  width:27px;
  transform:translate(0px,4px);
}

.circle{
  display:grid;
  height:9px;
  width:9px;
  background:#F29A82;
  border-radius:50%;
}

.circle:nth-child(2){
  transform:translate(0px,10px);
}

.eyes-container{
  display:grid;
  height:12px;
  width:75px;
}

.eye:nth-child(1){
  display:grid;
  z-index:2;
  height:6px;
  width:20px;
  background:#7D2D84;
  border-radius:3px;
}

.eye:nth-child(1):before{
  content:"";
  display:grid;
  height:6px;
  width:10px;
  background:var(--dark);
  border-radius:0px 0px 6px 6px;
  transform:translate(5px,6px);
}

.eye:nth-child(2){
  display:grid;
  z-index:2;
  height:6px;
  width:20px;
  background:#7D2D84;
  border-radius:3px;
  transform:translate(55px,-6px);
}

.eye:nth-child(2):before{
  content:"";
  display:grid;
  height:6px;
  width:10px;
  background:var(--dark);
  border-radius:0px 0px 6px 6px;
  transform:translate(5px,6px);
}

.mouth{
  display:grid;
  justify-self:center;
  height:10px;
  width:45px;
  background:white;
  border-radius:5px;
}

/*---------------------------------------------*/

.ear-container{
  display:grid;
  grid-template-rows:repeat(2,0px);
  grid-template-columns:repeat(2,111px);
  justify-self:center;
  z-index:0;
  height:17px;
  width:126px;
  transform:translate(0px,-80px);
  animation: ear-move 1s linear infinite;
}

@keyframes ear-move{
  0%{transform:translate(0px,-80px);}
  50%{transform:translate(0px,-83px);
  100% }
}

.ear:nth-child(1){
  display:grid;
  height:15px;
  width:15px;
  background:#F19475;
  border-radius:8px 0px 0px 8px;
}

.ear:nth-child(2){
  display:grid;
  height:15px;
  width:15px;
  background:#F19475;
  border-radius:0px 8px 8px 0px;
}

/*---------------------------------------------*/

.body-container{
  display:grid;
  z-index:1;
  justify-self:center;
  height:76px;
  width:174px;
  transform:translate(0px,-79px);
  animation: body-move 1s linear infinite;
}

@keyframes body-move{
  0%{transform:translate(0px,-79px);}
  50%{transform:translate(0px,-76px);
  100% }
}

.top-body{
  display:grid;
  justify-self:center;
  height:42px;
  width:151px;
  background:var(--dark-skin);
  border-radius:24px 24px 0px 0px;
}

.left-arm{
  display:grid;
  height:32px;
  width:32px;
  background:var(--dark-skin);
  transform:rotate(45deg) translate(-8px,-16px);
}

.right-arm{
  display:grid;
  height:32px;
  width:32px;
  background:var(--dark-skin);
  transform:rotate(-45deg) translate(130px,61px);
}

.chest{
  display:grid;
  justify-self:center;
  height:49px;
  width:114px;
  background:var(--mid-skin);
  transform:translate(0px,-100px);
  border-radius:14px;
}

.nipples-container{
  display:grid;
  grid-template-rows:repeat(2,0px);
  grid-template-columns:repeat(2,84px);
  justify-self:center;
  height:6px;
  width:96px;
  transform:translate(0px,34px);
}

.nipples{
  display:grid;
  height:6px;
  width:12px;
  border-radius:3px;
  background:var(--dark-skin);
}


.bottom-body{
  display:grid;
  justify-self:center;
  height:14px;
  width:75px;
  background:var(--dark-skin);
  border-radius:0px 0px 24px 24px;
  transform:translate(0px,-100px);
}

.waist{
  display:grid;
  justify-self:center;
  height:10px;
  width:49px;
  background:var(--dark-skin);
  transform:translate(0px,-119px);
}

.abs{
  display:grid;
  z-index:1;
  justify-self:center;
  height:16px;
  width:34px;
  background:var(--mid-skin);
  border-radius:6px 6px 0px 0px;
  transform:translate(0px,-109px);
}

/*---------------------------------------------*/

.hands-container{
  display:grid;
  grid-template-rows:repeat(2,0px);
  grid-template-columns:repeat(2,144px);
  z-index:3;
  justify-self:center;
  height:91px;
  width:203px;
  transform:translate(0px,-115px);
  animation:hands-move 1s linear infinite;
}

@keyframes hands-move{
  0%{transform:translate(0px,-115px);}
  50%{transform:translate(0px,-112px);
  100% }
}

.left-hand-container{
  display:grid;
  grid-template-rows:repeat(6,0px);
  grid-template-columns:repeat(6,0px);
  height:91px;
  width:59px;
}

.left-hand{
  display:grid;
  z-index:3;
  height:76px;
  width:44px;
  background:var(--skin);
  border-radius:22px;
}

.left-finger{
  display:grid;
  height:36px;
  width:14px;
  border-radius:7px;
  background:#EB7C72;
  transform:translate(0px,45px);
}

.left-finger:nth-child(2){
  display:grid;
  z-index:1;
  height:36px;
  width:14px;
  border-radius:7px;
  background:#F2937D;
  transform:translate(8px,52px);
}

.left-finger:nth-child(3){
  display:grid;
  z-index:2;
  height:36px;
  width:14px;
  border-radius:7px;
  background:#F4A994;
  transform:translate(18px,55px);
}

.left-finger:nth-child(4){
  display:grid;
  height:36px;
  z-index:2;
  width:14px;
  border-radius:7px;
  background:var(--skin);
  transform:translate(30px,53px);
}

.left-finger:nth-child(5){
  display:grid;
  height:36px;
  width:14px;
  border-radius:7px;
  background:var(--skin);
  transform:translate(37px,34px) rotate(-45deg);
}

/*------------------------------------------------------------*/

.right-hand-container{
  display:grid;
  height:91px;
  width:59px;
}

.right-hand{
  display:grid;
  z-index:3;
  height:76px;
  width:44px;
  background:var(--skin);
  border-radius:22px;
  transform:translate(15px,0px)
}

.right-finger{
  display:grid;
  height:36px;
  width:14px;
  border-radius:7px;
  background:#EB7C72;
  transform:translate(45px,-174px);
}

.right-finger:nth-child(2){
  display:grid;
  z-index:1;
  height:36px;
  width:14px;
  border-radius:7px;
  background:#F2937D;
  transform:translate(37px,-24px);
}

.right-finger:nth-child(3){
  display:grid;
  z-index:2;
  height:36px;
  width:14px;
  border-radius:7px;
  background:#F4A994;
  transform:translate(27px,-57px);
}

.right-finger:nth-child(4){
  display:grid;
  height:36px;
  z-index:2;
  width:14px;
  border-radius:7px;
  background:var(--skin);
  transform:translate(15px,-95px);
}

.right-finger:nth-child(5){
  display:grid;
  height:36px;
  width:14px;
  border-radius:7px;
  background:var(--skin);
  transform:translate(8px,-150px) rotate(45deg);
}

/*---------------------------------------------*/

.belt-container{
  display:grid;
  z-index:2;
  justify-self:center;
  justify-content:center;
  height:134px;
  width:68px;
  transform:translate(0px,-180px);
  animation: belt-move 1s linear infinite;
}

@keyframes belt-move{
  0%{transform:translate(0px,-180px);}
  50%{transform:translate(0px,-177px);
  100% }
}

.belt{
  display:grid;
  height:22px;
  width:68px;
  background:var(--decoration);
  transform:translate(0px,9px);
}

.belt-circle{
  display:grid;
  justify-self:center;
  align-items:center;
  justify-content:center;
  height:34px;
  width:34px;
  background:var(--decoration);
  border-radius:50%;
  transform:translate(0px,-22px);
}

.belt-circle:before{
  content:"";
  display:grid;
  height:24px;
  width:24px;
  background:var(--dark);
  border-radius:50%;
}

.ribbon-container{
  display:grid;
  grid-template-rows:repeat(2,0px);
  grid-template-columns:repeat(2,20px);
  justify-self:center;
  height:104px;
  width:32px;
  transform:translate(0px,-26px);
}

.ribbon{
  display:grid;
  height:104px;
  width:12px;
  background:var(--decoration);
}

/*---------------------------------------------*/

.leg-container{
  display:grid;
  grid-template-rows:repeat(2,0px);
  grid-template-columns:repeat(2,68px);
  justify-self:center;
  z-index:1;
  height:106px;
  width:138px;
  transform:translate(0px,-304px);
  animation: leg-move 1s linear infinite;
}

@keyframes leg-move{
  0%{transform:translate(0px,-304px);}
  50%{transform:translate(0px,-301px);
  100% }
}

.left-leg-container{
  display:grid;
  height:106px;
  width:70px;
}

.left-leg{
  display:grid;
  height:71px;
  width:48px;
  border-radius:12px;
  background:var(--dark);
  transform:rotate(45deg) translate(14px,-7px);
}

.left-leg:nth-child(2){
  transform:rotate(0deg) translate(0px,-36px);
}

.right-leg-container{
  display:grid;
  height:106px;
  width:70px;
}

.right-leg{
  display:grid;
  height:71px;
  width:48px;
  border-radius:12px;
  background:var(--dark);
  transform:rotate(-45deg) translate(2px,11px);
}

.right-leg:nth-child(2){
  transform:rotate(0deg) translate(22px,-36px);
}

/*---------------------------------------------*/

.feet-container{
  display:grid;
  grid-template-rows:repeat(2,0px);
  grid-template-columns:repeat(2,110px);
  justify-self:center;
  height:34px;
  width:172px;
  transform:translate(0px,-304px);
}

.left-feet-container{
  display:grid;
  height:34px;
  width:62px;
}

.left-sock{
  display:grid;
  justify-self:center;
  height:34px;
  width:30px;
  background:var(--decoration);
  transform:translate(10px,-2px);
}

.left-slipper-container{
  display:grid;
  height:26px;
  width:62px;
  transform:translate(0px,-26px);
}

.left-slipper-big{
  display:grid;
  height:26px;
  width:46px;
  border-radius:24px 24px 0px 0px;
  background:var(--dark);
}

.left-slipper-small{
  display:grid;
  height:10px;
  width:18px;
  background:var(--dark);
  transform:translate(44px,-10px);
}

.right-feet-container{
  display:grid;
  height:34px;
  width:62px;
  transform:rotateY(180deg);
}

.right-sock{
  display:grid;
  justify-self:center;
  height:34px;
  width:30px;
  background:var(--decoration);
  transform:translate(10px,-2px);
}

.right-slipper-container{
  display:grid;
  height:26px;
  width:62px;
  transform:translate(0px,-26px);
}

.right-slipper-big{
  display:grid;
  height:26px;
  width:46px;
  border-radius:24px 24px 0px 0px;
  background:var(--dark);
}

.right-slipper-small{
  display:grid;
  height:10px;
  width:18px;
  background:var(--dark);
  transform:translate(44px,-10px);
}

/*---------------------------------------------*/

.shadow{
  display:grid;
  justify-self:center;
  z-index:-1;
  height:14px;
  width:292px;
  background:#FBB019;
  border-radius:7px;
  transform:translate(0px,-308px);
}