body {background:#222;}
.jyRel {
  position:relative;
  height:32em;  
  width:19em;
  margin:7em auto;
}
.jyHead {
  left:7em;
  top:1.9em;
  margin: 0 auto;
  position: absolute;
  z-index: 1;
animation:tilthead 5s ease alternate infinite;
 }

@keyframes tilthead {
  0%{  transform:rotate(0deg); }
  10%{  transform:rotate(20deg); }
  20%{  transform:rotate(0deg); }
  100%{  transform:rotate(0deg); }
}

.jyNeckWrap {
  position: absolute;
  margin: 0 auto;
  width: 100em;
  height: 260em;
  overflow: hidden;
  top: 115em;
  z-index: 2;
  left:18em;
  font-size:5%;
}

.jyNeck {
  background: hsl(40,75%,80%);
  width: 25em;
  position: absolute;
  left:31em;  height: 31em;
}

.jyNeck:after {
  content: '';
  position: absolute;
  top: 29em;
  left: -6em;
  z-index: 1;
  width: 37em;
  height: 15em;
  background: hsl(40,75%,80%);
  border-radius:50%;
}

.jyDress{
  position:absolute;
  width:300em;
  vertical-align: middle ;
  margin:0em;
  font-size:5%;
  margin:0 auto;
  z-index:7;
  left:0em;
  top:161em;
}
.jyStrap{
  width:5em;
  height:40em;
  background:hsl(0,0%,4%);
  position:absolute;
  top:14em;
  left:230em;
  z-index:45;
}
.jyStrap:first-child{
  left:153em;
  height:38em;
  top:15em;
  
}

.jyLace  {
  margin:0;
  padding:0;
  position:absolute;
  top:350em;
  list-style:none;
}

.jyLace li {
  list-style:none;
  height:6em;
  width:10em;
  border-radius: 10em 10em 0 0;
  background:hsl(0,0%,4%);
  float:left;
  display:block;
  margin:0;
}
.jyLace{
  width:130em;
  position:absolute;
  left:130em;
  top:52em;
}
.jyTop {
  background:hsla(210,10%,20%,1);
  width: 150em;
  height: 150em;
  margin:0 auto;
  position:absolute;
  top:-10em; left:120em;
  z-index:10;
}
.jyTop.jyClipPath{
  -webkit-clip-path: polygon(
      93% 45%, 81% 100%, 19% 100%, 7% 45%
      );
  -moz-clip-path: polygon(
      93% 45%, 81% 100%, 19% 100%, 7% 45%
      );
  -ms-clip-path: polygon(
      93% 45%, 81% 100%, 19% 100%, 7% 45%
      );
  clip-path: polygon(
      93% 45%, 81% 100%, 19% 100%, 7% 45%
      ); 
}
.jyButton{
  position:absolute;
  z-index:10;
  background:hsla(210,80%,90%,.8);
  display:block;
  width:10em;
  height:10em;
  border-radius:5em;
  left:70em;
  top:80em;
}
.jyButton:nth-child(2){
  top:100em;
}
.jyButton:nth-child(3){
  top:120em;
}
.jyBelt{
  width:92em;
  height:20em;
  background:hsl(0,0%,4%);
  margin:0 auto;
  position:absolute;
  top:140em; left:146em;
}
.jyBelt:after{
  content: "";
  position: absolute;
  border-width: 8em 10em;
  border-style: solid;
  border-color:hsla(210,80%,50%,.8);
  
  display: block;
  width:16em;
  height:10em;
  background:hsl(0,0%,4%);
  left:50em;
}
.jyDress  .jyBottom{
  background:hsla(210,10%,20%,1);
  width: 300em;
  height: 200em;
  margin:0 auto;
  position:absolute;
  top:155em;
  left:42em;
}
.jyBottom.jyClipPath{
  -webkit-clip-path: polygon(
      65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%
      );
  -moz-clip-path: polygon(
      65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%
      );
  -ms-clip-path: polygon(
      65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%
      );
  clip-path: polygon(
      65.5% 0%, 100% 100%, 0% 100%, 34.5% 0%
      );
}

.jyArms {
  position: absolute;
  top: 150em;
  left:99em;
  height: 55em;
  z-index:12;
  font-size:6%;
  
}

.jyArm1 {
  z-index: 2;
  position: absolute;
  top: 77em;
  left: -7em;
  width: 94em;
  height: 23em;
  background: hsl(40,75%,80%);
  border-radius: 10em 4em 2em 65%;
  border: 1em solid rgba(55,55,55,0.4);
  box-shadow: 1em 3em 3em rgba(55,55,55,0.3);
  transform:rotate(15deg);
    animation:leftswordarm 5s ease infinite alternate;  

}

@keyframes leftswordarm {
  0% {
  transform:rotate(15deg);
  top: 77em;
  left: -7em;
 
  }
  10%{
  transform:rotate(20deg);
  top: 72em;
  left: -12em;
  }
  
  20% {
    transform:rotate(15deg);
  top: 77em;
  left: -7em;
 
  }
  
  100%{
   transform:rotate(15deg);
  top: 77em;
  left: -7em;
  
  }
}


/*left arm sholder*/
.jyArm1:after {
  z-index: 2;
  position: absolute;
  top: -62em;
  left: -5em;
  content: '';
  width: 25em;
  height: 77em;
  background:hsl(40,75%,80%);
  border-radius: 50%;
}

.jyHandL {
  z-index: 5;
  position: absolute;
  top: 90em;
  left: 70em;
  width: 30em;
  height: 20em;
  background: hsl(40,75%,85%);
  border-radius: 50%;
  border: 1em solid rgba(55,55,55,0.4);
  transform: rotate(-5deg);
}

/* right forearm*/
.jyArm2 {
  z-index: 4;   
  position: absolute;
  top: 52em;
  left: 80em;
  width: 94em;
  height: 25em;
  background: hsl(40,75%,80%);
  border-radius: 68% 0 0 15em;
  border: 1em solid rgba(55,55,55,0.4);
  border-bottom: none;
  transform: rotate(150deg);
  box-shadow: 0em -3em 3em rgba(55,55,55,0.3);
  animation: swordarm 5s ease infinite alternate;
}

@keyframes swordarm {
  0% {
    transform: rotate(150deg);
    top:52em;
  }
  10% {
    transform: rotate(140deg);
    top:46em;
  }
  20% {  transform: rotate(150deg);
    top:52em;
  }
  
  100%{  transform: rotate(150deg);
    top:52em;
  }
  
}

/*right bisep trisep, top arm*/
.jyArm2:before {
  z-index: -1;
  position: absolute;
  top: 25em;
  left: -10em;
  content: '';
  background: hsl(40,75%,80%);
  height: 25em;
  width: 65em;
  border-radius: 20% 50% 0% 20%;
  transform: rotate(60deg);
}

.jyHandR {
  z-index: 4;
  position: absolute;
  top: 80em;
  left: 70em;
  width: 30em;
  height: 20em;
  background: hsl(40,75%,85%);
  border-radius: 50%;
  border: 1em solid rgba(55,55,55,0.4);
  transform: rotate(-25deg);
}

.jyBody {
  position: absolute;
  top: 144em;
  left:109em;
  width: 105em;
  height: 45em;
  background: hsl(40,75%,80%);
  border-radius: 40% 30% 0 0;
  border: 1em solid rgba(55,55,55,0.4);
  border-bottom: none;
  z-index:2;
  font-size:6%;
  
}



.jyLeg {
  position:absolute;
  width: .75em;
  height: 4em;
  background: hsl(40,75%,80%);
  z-index:2;
}

.jyLeg:before {
  content: "";
  position: absolute;
  width: 1.5em;
  height: 4em;
  border-radius: 30% 30% 50% 50%;
  background: hsl(40,75%,80%);
  left: -.375em;
}

.jyLegL {  top:25em;
  left:8em;
}
.jyLegR {  top:24em;
  left:11em;
}



.jyShoe {
  background: hsl(40,75%,80%);
  width: 4em;
  height: 10em;
  border-radius: 45%;
  position: absolute;
  border: .4em solid hsl(0,0%,4%);
  border-bottom-width: .8em;
  box-shadow: inset 0px -1em 0 0px #fff, inset 0px -1.4em 0 0px #27a, inset 0 -1.8em 0 0 #fff, inset 0px -2.4em 0 0px hsl(0,0%,4%);
  z-index: 1;
  font-size:45%;
}

.jyShoeRight {
  top: 60em;
  
  transform: rotate(0deg);
  left: 23.3em;
}
.jyShoeLeft {
top: 60em;
   left:16.5em;
  animation:stepforward 5s ease infinite alternate;
  transform:rotate(0deg);
}

@keyframes stepforward {
  0%{transform:rotate(0deg);
    top: 60em;
     left:16.5em;
  }
  10%{
    top: 61.5em;
  transform: rotate(15deg);
  left:15.65em;}
  20%{transform:rotate(0deg);
    top: 60em;
     left:16.5em;}
  100%{transform:rotate(0deg);
    top: 60em;
     left:16.5em;}
}


.jyBack {
  font-size:4.5%;
  width:140em;
  height:260em;
  position:relative;
  margin:20em auto;
}

.jyFace{
  width:100em;
  height:70em;
  border-radius:0 0 50% 50%;
  background:hsl(40,75%,85%);
  position:absolute;
  top:50em;
  left:10em;
  z-index:5;
}

/*forehead bang part*/
.jyFace:before,
.jyFace:after{
  content:"";
  display:block;
  width:55em;
  height:55em;
  border-radius:50% / 25%;
  background:hsl(40,75%,85%);
  position:absolute;
  top:-20em;
}
.jyFace:before{
  left:0;
}
.jyFace:after{
  right:0;
}

.jyEyeWrap {
  position:Absolute; 
  font-size:200%;
  width:100%;
  z-index:100;
  left:7em;
  top:-4em;
}

.jyEye{
  width:10em; height:10em; background: #ecf0f1; position: relative;  border-radius: 1em 8em; transform: rotate(-45deg); float:left; margin:5em; border:1px solid hsl(40,75%,80%);
}

.jyPupil {
  display: block;
  position: absolute;
  border: 2em solid #444;
  border-radius: 50%;
  width: 100em;
  height: 100em;
  background-color: hsl(0,0%,8%);
  box-shadow: inset 0em -2em 0em 20em hsl(0,0%,13%);
  transform: perspective(100em) rotateY(45deg);
  z-index: 1;
  animation: eyeAnim1 4s ease infinite alternate, eyeAnim2 4s ease infinite alternate;
  font-size:5%;
}
.jyPupil.right {
  left: 190em;
}
.jyPupil:after {
  content: "";
  position: absolute;
  height: 50em;
  width: 50em;
  left: 24em;
  top: 24em;
  border-radius: 50%;
  background-color: #fff;
  z-index: 3;
  box-shadow: inset 7em -14em 2em 14em #000, 0em 0em 5em 15em hsl(0,0%,0%);
}

@keyframes eyeAnim1 {
  0% {
    transform: perspective(100em) rotateY(15deg);
  }
  50% {
    transform: perspective(100em) rotateY(-15deg);
  }
  100% {
    transform: perspective(100em) rotateY(15deg);
  }
}

@keyframes eyeAnim2 {
  0% {
    left:10em;
    top:0;
  }
  
  100% {
    left:80em; 
    top:60em
  }
}


.jyMouth {
  z-index: 1;
  position: absolute;
  top: 40em;
  left: 32em;
  width: 45em;
  height: 20em;
  background: hsl(40,75%,85%);
  border-radius: 50%;
}

.jyMouth:after {
  position: absolute;
  left: 5em;
  content: '';
  width: 35em;
  height: 10em;
  border-radius: 50%;
  border-bottom: #000 2em solid;  
  box-shadow: 0em 3em 3em rgba(55,55,55,0.3);
}

.jyHair{
  position:Absolute;
  top:-30em; 
  left:-30em;  
animation:hairsway 5s ease 2 alternate;
   
}
@keyframes hairsway{
 0%{
    transform:rotate(0deg);
 top:-30em; 
  left:-30em;
  }
  10% {
    transform:rotate(40deg);
    top:-70em;
    left:40em;
  }
  20% {    transform:rotate(0deg);
 top:-30em; 
  left:-30em;}
  
  100% {     transform:rotate(0deg);
 top:-30em; 
  left:-30em;}
  
}

.jyTopHair {
  width: 120em;
  height: 120em;
  background: hsl(0,0%,4%);
  border-radius: 50%;
  position: absolute;
  margin-top: 20em;
  margin-left: 30em;
  z-index: 1;
}
.jyTopHair::before {
  content: "";
  width: 117em;
  height: 190em;
  background: inherit;
  position: absolute;
  top:45em;
  left:2em;
}
/*first jyLeftCurl*/
.jyLeftCurl::before {
  content: "";
  width: 110em;
  height: 110em;
  position: absolute;
  background: transparent;
  border-radius: 50%;
  top: 0;
  left: -29em;
  box-shadow: inset 46em 20em 0 hsl(0,0%,4%);
}

.jyLeftCurl {
  width: 110em;
  height: 110em;
  position: absolute;
  border-radius: 50%;
  top: 180em;
  left: 57em;
  box-shadow: inset 50em 20em 0 hsl(0,0%,4%);
  clip: rect(50em, 70em, 140em, -26em);
  z-index: 6;
}
/*third hair jyLeftCurl*/
.jyLeftCurl::after {
  content: "";
  width: 110em;
  height: 120em;
  position: absolute;
  border-radius: 50%;
  top:0;
  left:45em;
  box-shadow: inset 50em 50em 0 hsl(0,0%,4%);
  clip: rect(0em, 50em, 120em, 0);
}




.jyRightCurl {
  width: 110em;
  height: 110em;
  position: absolute;
  border-radius: 50%;
  top: 175em;
  left: 78em;
  clip: rect(20em, 70em, 140em, -26em);
  z-index: 5;
  transform:rotate(0deg);
}

/*first jyLeftCurl*/
.jyRightCurl::before {
  content: "";
  width: 110em;
  height: 110em;
  position: absolute;
  background: transparent;
  border-radius: 50%;
  top: 0;
  left: -29em;
  box-shadow: inset 30em 1em 0 hsl(0,0%,4%);
  transform:rotate(180deg);
}



.jyCoverHair {  content:"";
  display:block;
  width:30em;
  height:115em;
  border-radius:50% / 25%;
  background:hsl(0,0%,4%);
  position:absolute;
  top:50em;
  left:36em;
  z-index:10;
  transform:rotate(6deg);
}


.jyEar {
  display:block;
  width:10em;
  height:25em;
  border-radius:50%;
  background:hsl(40,75%,80%);
  position:absolute;
  top:50em;
  left:105em;
  z-index:10;
}


.eyeBrow {
  width: 20em;
  height: 10em;
  position: absolute;
  
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom: 2em solid hsl(40,75%,4%);
  top:45em;
  left:35em;
  z-index:15;
  transform:rotate(180deg);
}
.jyBrow {
  width: 20em;
  height: 10em;
  position: absolute;
  
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom: 2em solid hsl(40,75%,4%);
  z-index:15;
  transform:rotate(180deg);
}
.jyBrowL {   top:45em;
  left:35em;}
.jyBrowR {   top:45em;
  left:74em;}


.jyNoseOutline{
  width: 12em;
  height: 15em;
  background-color: transparent;
  border-right: 2em solid hsla(40,75%,4%,.9);
  border-bottom: 2em solid hsla(40,75%,4%,.9);
  border-radius:40%;
  position: absolute;
  left: 60em;
  top: 70em;
  z-index: 24;
}
.sword {
  display: inline-block;
  width: 5em;
  position:absolute;
  top:-7.5em;
  left:5.5em;
  z-index:11;
  transform:rotate(-18deg);
  animation:swordswing 5s infinite alternate;
}
@keyframes swordswing {
  0%{   transform:rotate(-18deg);
    left:5.5em;
top:-7.5em;
  }
  10%{   transform:rotate(-25deg);
    left:4.5em;
    top: -7em;
 }
  
  20% { transform:rotate(-18deg);
      left:5.5em;
top:-7.5em;
  }
  
  100% {    transform:rotate(-18deg); left:5.5em;
top:-7.5em;
  }
}  

.blade {
  background-color: hsl(0, 0%, 81%);
  height: 20em;
  width: 1em;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  box-shadow: -.5em 0 0 0 hsla(0, 0%, 43%, .5) inset;
}
.knob {
  border-radius: 50%;
  position: relative; top: -.5em;
  height: 1em; width: 1em;
  background-color: hsl(0, 0%, 80%);
}

.blade, .grip, .knob {
  margin: auto;
}

.guard,   .grip {
  background-color: hsl(53, 7%, 41%);
}
.guard {
  height: 0.45em;
  width: 100%;
  border-radius: 33%;
}
.grip {
  height: 4em;
  width: 0.7em;
  border-radius: 150%;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}