jack.css

body{
    background:white;
}

.all{
    position:absolute;
    top:40%;
    left:45%;    
}

.ear{
    width:30px;
    height:50px;
    background: #fbc02d;
    position: absolute;
    border-radius: 20px;
    border:2px solid black;
    left:-12px;
    top:-10px;
    transform: rotate(15deg);
}

.ear:before{
    content: "";
    width:30px;
    height:50px;
    background: #fbc02d;
    position: absolute;
    border-radius: 20px;
    border:2px solid black;
    left:107.5px;
    top:-30px;
    transform: rotate(-30deg);
}

.bod{
    width:120px;
    height: 180px;
    background: #fbc02d;
    border-radius:60px 60px 35px 35px;
    position: relative;
    border:2px solid black; 
    z-index: 3;
    top:-50px;
}


.eye1{
    width:35px;
    height: 35px;
    background: #0f0f0f;
    border-radius: 50px;
    position: relative;
    top:40px;
    left:19px;
}

.eye1:before{
    content: " ";
    width:25px;
    height: 25px;
    background: #ffff;
    border-radius: 50px;
    position: absolute;
    top:2px;
    left:3px;
   animation-name: gol_gol;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes gol_gol{
    0%{top:2px;left:3px;}
    10%{top:5px;left:3px;}
    20%{top:5.5px;left:3.5px;}
    30%{top:6px;left:4px;}
    40%{top:6.5px;left:4.5px;}
    50%{top:7px;left:5px;}
    60%{top:7px;left:6px;}
    70%{top:6px;left:7px;}
    80%{top:5.5px;left:6.5px;}
    90%{top:4px;left:5px;}
    100%{top:3px;left:4px;}

}

.eye2{
    width:35px;
    height: 35px;
    background: #0f0f0f;
    border-radius: 50px;
    position: relative;
    top:5px;
    left: 66px;
}


.eye2:before{
    content: " ";
    width:25px;
    height: 25px;
    background: #ffff;
    border-radius: 50px;
    position: absolute;
    top:2px;
    left:3px;
    animation-name: gol_gol;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes gol_gol1{
    0%{top:2px;left:3px;}
    100%{top:5px;left:3px;}
    }
    
.eye2:after{
    content: " ";
    position: absolute;
    width: 25px;
    height:25px;
    background: #fbc02d;
    border: 2px solid black;
    border-radius: 50px;
    left:-20px;
    top:14px;
}

.nose{
    position: absolute;
    left: 45.5px;
    top:55px;
    z-index: 6;
}

.nose2{
    width:11px;
    height:25px;
    background: #fbc02d;
    border-left:2px solid black;
    border-right:2px solid black;
    border-bottom:2px solid black;
    border-radius:3px 2px 5px 10px;
    position:relative;
    left:43px;
    top:-4px;
    transform: rotate(15deg);
    z-index:5;
}

.nose2:before{
    content: " ";
    width:11px;
    height:25px;
    background: #fbc02d;
    border-left:2px solid black;
    border-right:2px solid black;
    border-bottom:2px solid black;
    border-radius:2px 3px 10px 5px;
    position:absolute;
    left:17px;
    top:-4px;
    transform: rotate(-27deg);
}

.hand{
    
    position: absolute;
    top:-20px;
    left:-137px;
}

.hand1{
    
    position: absolute;
    top:-20px;
    left:-137px;
}

.finger{
    width:15px;
    height:10px;
    border-radius: 20px;
    background: #fbc02d;
    border:2px solid black;
    position: absolute;
    top:105px;
    left:-6px;
}

.finger:before{
    content: "";
    width:15px;
    height:10px;
    border-radius: 20px;
    background: #fbc02d;
    border:2px solid black;
    position: absolute;
    left:116px;
    top:-5px;
    z-index: 2;
}

.leg{
    /*background: green;*/
    position: absolute;
    top:20px;
    left:-10px;
    z-index: 2;
}

.leg1{
    
    position: absolute;
    top:20px;
    left:-10px;
    z-index: 2;
}

.toe{
    width:32px;
    height:14px;
    border-radius: 20px;
    background: #fbc02d;
    border:2px solid black;
    position: absolute;
    top:188px;
    left:8px;
    transform: rotate(-8deg);
    z-index:1;
}

.toe:before{
    content: " ";
    width:32px;
    height:14px;
    border-radius: 20px;
    background: #fbc02d;
    border:2px solid black;
    position: absolute;
    top:7px;
    left:65px;
    transform: rotate(16deg);
}
p{  
 font-weight:bolder;
 font-family:courier;
 font-size:2em;
 color:black;
  text-align:center;
 animation-name:shadow;
 animation-duration:1s;
 animation-iteration-count:infinite ;
 animation-timing-function:linear;
}
@keyframes shadow
{
   from{text-shadow:0px 0px ;}
   to{text-shadow:4px 4px red,7px 7px gray;}
}