style.css

* {
    box-sizing: border-box;
}
 

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
 
	vertical-align: baseline;   
}


html , body{
  
  background:#ff1493 ; }


 
.total{
  width:400px;
  height:400px;
  position:relative;
  margin:20vh auto;
  
}



.jigglypuff_base{
  border-radius:100%;
  width:400px;
  height:400px;
  position:absolute;
 
  
  border: 3px solid #a5352a;
  background:   #ffd8ed ;
  z-index:9999999;
  
}







.jigglypuff_hair{
  background: ;
  width:130px;
  height:170px;
  border:3px solid #a5352a;
  border-top:#ffd8ed;
  border-left:#ffd8ed;
  border-radius:100%;
  position:absolute;
  top:50px;
  left:190px;
  z-index:7;
}



.jigglypuff_hair::before{
  content:"";
  background: ;
  width:70px;
  height:70px;
  border:3px solid #a5352a;
  border-top:#ffd8ed;
  border-right:#ffd8ed;
  border-bottom:#ffd8ed;
  border-radius:100% 0 0% 9% ;
  position:absolute;
  top:40px;
  left:9px;
  z-index:7;
  
  -webkit-transform: rotate(-40deg);
       -moz-transform: rotate(-40deg);
          transform: rotate( -40deg);
  
}



.jigglypuff_hair::after{
  content:"";
  background: ;
  width:40px;
  height:25px;
  border:3px solid #a5352a;
  border-top:#ffd8ed;
  border-right:#ffd8ed;
   
  border-radius:60% 20% 60% 0% ;
  position:absolute;
  top:120px;
  left:8px;
  z-index:7;
  
  -webkit-transform: rotate(-87deg);
       -moz-transform: rotate(87deg);
          transform: rotate( 87deg);
  
}










.jigglypuff_brow{
  border-bottom: 4px solid #a5352a;
  background:     #ffd8ed; 
  border-radius:100% /   30% 0 140% 60%;
 width:130px;
 height:40px;
 position:absolute;
 top:160px;
 left:80px; 
 z-index:2;
 
  -webkit-transform: rotate(20deg);
       -moz-transform: rotate(20deg);
          transform: rotate(20deg);
  
}




.jigglypuff_brow::before{
 
 content:"";
 border-bottom: 4px solid #a5352a;
 background:  #ffd8ed; 
 border-radius:100% /   30% 0 40% 60%;
 width:90px;
 height:70px;
 position:absolute;
 bottom:40px;
 left:172px; 
 z-index:;
 
  -webkit-transform: rotate(-46deg);
       -moz-transform: rotate(-46deg);
          transform: rotate(-46deg);
  
}




.jigglypuff_browBelow{
  border-top: 3px solid #a5352a; 
  background: #ffd8ed;    
  border-radius:100% /   40% 40% 60% 60%;
 width:90px;
 height:70px;
 position:absolute;
 bottom:31px;
 left:90px; 
 z-index:2;
 
  -webkit-transform: rotate(9deg);
       -moz-transform: rotate(9deg);
          transform: rotate(9deg);
  
}




.jigglypuff_browBelow::before{
  content:"";
  border-top: 3px solid #a5352a; 
  background: #ffd8ed;    
  border-radius:100% /   40% 40% 60% 60%;
 width:65px;
 height:29px;
 position:absolute;
 bottom:90px;
 left:207px; 
 z-index:2;
 
  -webkit-transform: rotate(-32deg);
       -moz-transform: rotate(-32deg);
          transform: rotate(-32deg); 
}



.jigglypuff_blush{
 content:"";   
 border-radius:100%  ;
 width:110px;
 height:80px;
 position:absolute;
 bottom:17px;
 left:80px; 
 z-index:2;
 
 background: #ff4f56; 
 background: -webkit-radial-gradient(circle, #ff4f56, #ffd8ed, transparent ); 
 background: -o-radial-gradient(circle, #ff4f56, #ff8287, #ffd8ed, transparent);  
 background: -moz-radial-gradient(circle, #ff4f56, #ff8287, #ffd8ed, transparent);  
 background: radial-gradient(circle, #ff4f56, #ff8287, #ffd8ed, transparent); 
} 





.jigglypuff_blush::before{
 content:"";   
 border-radius:100%  ;
 width:47px;
 height:47px;
 position:absolute;
 bottom:52px;
 left:232px; 
 z-index:2;
 
 background: #ff4f56; 
 background: -webkit-radial-gradient(circle, #ff4f56, #ffd8ed, transparent ); 
 background: -o-radial-gradient(circle, #ff4f56, #ff8287, #ffd8ed, transparent);  
 background: -moz-radial-gradient(circle, #ff4f56, #ff8287, #ffd8ed, transparent);  
 background: radial-gradient(circle, #ff4f56, #ff8287, #ffd8ed, transparent); 
} 
 
  
  







.jigglypuff_eye{
  border-radius:100%;
  width:120px;
  height:120px;
  position:absolute;
  background:#fff;
  top:180px;
  left:80px;
  border: 2px solid #000;
}


.jigglypuff_eye::before{
  content:"";
  border-radius:100%;
  width:100px;
  height:100px;
  position:absolute; 
  background:#fff;
  border: 2px solid #000; 
  left:190px;
}




.jigglypuff_eyeInner{
  border-radius:100%;
  width:105px;
  height:105px;
  position:absolute;
  background:#008060;
  
  background: -webkit-radial-gradient(circle, #008060 30%,   #1bffc5 );
  background: -o-radial-gradient(circle, #008060 30%,   #1bffc5 );  
  background: -moz-radial-gradient(circle, #008060 30%,   #1bffc5 );  
  background: radial-gradient(circle, #008060 30%,   #1bffc5 );  
  border: 2px solid teal; 
  top:2px; 
  left:1px;
}



.jigglypuff_eyeInner::before{
  content:"";
  border-radius:100%;
  width:84px;
  height:84px;
  position:absolute;
  background:#008060;
  border: 2px solid teal;
  background: -webkit-radial-gradient(circle, #008060 30%,   #1bffc5 );
  background: -o-radial-gradient(circle, #008060 30%,   #1bffc5 );  
  background: -moz-radial-gradient(circle, #008060 30%,   #1bffc5 );  
  background: radial-gradient(circle, #008060 30%,   #1bffc5 ); 
  
  top:0px; 
  left:190px;
}



.jigglypuff_eyeWhite{
  border-radius:100%;
  width:39px;
  height:39px;
  position:absolute;
  background:#008060;
  border:2px solid #004d2d;
  background:#fff;
  
  top:20px; 
  left:0px;
}



.jigglypuff_eyeWhite::before{
  content:"";
  border-radius:100%;
  width:25px;
  height:25px;
  position:absolute;
  background:#008060;
  border:2px solid #004d2d;
  background:#fff;
  
  top:0px; 
  left:188px;
}






 

 
.jigglypuff_mouth{
  position:absolute;
  width:40px;
  height:20px;
  background:ffd8ed;
  border-radius:60%   20% 60% 60%;
  
   -webkit-transform: rotate(40deg);
       -moz-transform: rotate(40deg);
          transform: rotate(-40deg);
  
  border-top: 3px solid #a5352a;
  border-right:3px solid #a5352a;
  top:340px;
  left:230px;
}





.jigglypuff_leftEar{
  position:absolute;
  width:140px;
  height:170px;
  background:#ffd8ed;
  border-radius:30%   2% 60% 6%;
  
   -webkit-transform: rotate(-80deg);
       -moz-transform: rotate(-80deg);
          transform: rotate(-80deg);
  
  border-top: 3px solid #a5352a;
  border-right:3px solid #a5352a;
  top:-0px;
  left:30px;
}



.jigglypuff_leftEar::before{
  content:"";
  position:absolute;
  width:110px;
  height:110px;
  background:#181818;
  border-radius:200%   2% 200% 360%;
  
   -webkit-transform: rotate(0deg);
       -moz-transform: rotate(0deg);
          transform: rotate(0deg);
  
   
  top:7px;
  left:2px;
}





.jigglypuff_RightEar{
  position:absolute;
  width:140px;
  height:170px;
  background:#ffd8ed;
  border-radius:50%   2% 60% 6%;
  
   -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
          transform: rotate(4deg);
  
  border-top: 3px solid #a5352a;
  border-right:3px solid #a5352a;
  top:10px;
  left:270px;
  z-index:0;
}





.jigglypuff_RightEar::before{
  content:"";
  position:absolute;
  width:140px;
  height:170px;
  background:#181818;
  border-radius:190%   0% 160% 6%;
  
   -webkit-transform: rotate(4deg);
       -moz-transform: rotate(4deg);
          transform: rotate(4deg);
  
  
  top:10px; 
  left:-20px;
  z-index:0;
}




.jigglypuff_hand{
  position:absolute;
  width:60px;
  height:90px;
  background:#ffd8ed;
  border-radius:90%   30% 90% 6%;
  
   -webkit-transform: rotate(100deg);
       -moz-transform: rotate(100deg);
          transform: rotate(100deg);
  
  border-left: 3px solid #a5352a;
  border-right:3px solid #a5352a;
  bottom:40px;
  left:320px;
  z-index:3;
}



.jigglypuff_leftHand {
 
  position:absolute; 
  width:60px;
  height:60px;
  background:#ffd8ed;
  border-radius:90%   30% 90% 6%;
  border-top: 3px solid #a5352a;
  border-right: 3px solid #a5352a;
  
   -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
          transform: rotate(180deg);
  
 
   
  top:300px;
  left:20px;
  z-index:99999999999999; 
}


.jigglypuff_foot{
  position:absolute;
  width:150px;
  height:70px;
  background:#ffd8ed;
  border-radius:90%   190% 90% 60%;
  -webkit-transform: rotate(10deg);
       -moz-transform: rotate(10deg);
          transform: rotate(10deg);
  top:360px;
  left:230px;
  border: 3px solid #a5352a;
}
 



.jigglypuff_foot::before{
  content:"";
  position:absolute;
  width:140px;
  height:70px;
  background:#ffd8ed;
  border-radius:90%   190% 90% 60%;
  -webkit-transform: rotate(10deg);
       -moz-transform: rotate(10deg);
          transform: rotate(10deg);
  top:40px;
  left:-130px;
  border: 3px solid #a5352a;
}
 


.marker_green{
  position:absolute;
  background:#008060;
  width:50px;
  height:40px;
  border-radius:30%;
  top:330px;
  left:370px;
  z-index:0;
  border:3px solid #004d2d;
   -webkit-transform: rotate(-60deg);
       -moz-transform: rotate(-60deg);
          transform: rotate(-60deg);
}




.marker_green::before{
  content:"";
  position:absolute;
  background:#008060;
  width:30px;
  height:10px;
  border-radius:100%;
  top:8px;
  left:-12px;
  z-index:0;
  border:3px solid #004d2d;
   -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
          transform: rotate(-90deg);
}

.marker_base{
  position:absolute;
  background:#000;
  width:25px;
  height:120px;
  border-radius:20%;
  top:280px;
  left:20px;
  
     -webkit-transform: rotate(-30deg);
       -moz-transform: rotate(-30deg);
          transform: rotate(-30deg);
}




.marker_base::before{
  content:"";
  position:absolute;
  background:#000;
  border:2px solid #181818;
  width:15px;
  height:18px;
  border-radius:30%;
  top:119px;
  left:3px;
  
     -webkit-transform: rotate(-3deg);
       -moz-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
  
  
.marker_base::after{
  content:"";
  position:absolute;
  background:#000;
  
  width:8px;
  height:15px;
  border-radius:360%;
  top:138px;
  left:9px;
  
     -webkit-transform: rotate(-3deg);
       -moz-transform: rotate(-3deg);
          transform: rotate(-3deg);
}
 


.marker_detail{
  background:#000;
  border:2px solid #181818;
  border-radius:360%;
  width:15px;
  height:20px;
  
   -webkit-transform: rotate(-96deg);
       -moz-transform: rotate(-96deg);
          transform: rotate(-96deg);     
  margin-top:-6px;
  margin-left:5px;
}





.marker_detail::before{
  content:"";
  position:absolute;
   background:#000;
  border-left:2px solid #fff;
  border-radius:360%;
  width:15px;
  height:20px;   
  margin-top:-12px;
  margin-left:-100px;
}




.marker_detail::after{
  content:"";
  position:absolute;
   background:#181818;
   
  
  width:4px;
  height:19px;   
  margin-top:-15px;
  margin-left:-123px;
}




.angry{
  position:absolute;
  background:transparent;
  width:30px;
  height:30px;
  top:80px;
  left:290px;
  z-index:9;
  border-radius:100%;
  border-right:3px solid #000; 
     -webkit-transform: rotate(22deg);
       -moz-transform: rotate(22deg);
          transform: rotate(22deg);  
   
}


.angry::before{
  content:"";
  position:absolute;
  background:transparent;
  width:30px;
  height:30px;
  top:-20px;
  left:33px;
  z-index:9;
  border-radius:100%;
  border-bottom:3px solid #000; 
     -webkit-transform: rotate(22deg);
       -moz-transform: rotate(22deg);
          transform: rotate(22deg);  
   
}



.angry_bottom{
  position:absolute;
  background:transparent;
  width:30px;
  height:30px;
  top:118px;
  left:296px;
  z-index:9;
  border-radius:100%;
  border-top:3px solid #000; 
     -webkit-transform: rotate(50deg);
       -moz-transform: rotate(50deg);
          transform: rotate(50deg);  
   
}


.angry_bottom::before{
  content:"";
  position:absolute;
  background:transparent;
  width:30px;
  height:40px;
  top:-45px;
  left:22px;
  z-index:9;
  border-radius:100%;
  border-bottom:3px solid #000; 
     -webkit-transform: rotate(50deg);
       -moz-transform: rotate(50deg);
          transform: rotate(50deg);  
    
}


.angry_mark{
 animation: stretch 5s 3s infinite; 
 z-index:99999999999; 
  position:absolute;
}


@keyframes stretch {
  0% {
    transform: rotate(1deg); 
      opacity:0;
  }
  
  
  100% {
    transform: rotate(-2deg); 
    
  }
}



 
  
  .marker_base:hover  {
  
  animation: move 1.5s infinite; 
 z-index:99999999999; 
  position:absolute; 
}


 


@keyframes move {
  0% {
    transform: rotate(-180deg); 
  }
  
  
  100% {
    transform:  rotate(110deg);  
  }