@keyframes swinging {
    0% {transform: rotate(55deg);}
    10%{transform: rotate(-55deg);}
    20%{transform: rotate(55deg);}
    30%{transform: rotate(-65deg);}
    40%{transform: rotate(65deg);}
    50%{transform: rotate(-85deg);}
    60%{transform: rotate(85deg);}
    70%{transform: rotate(-410deg);}
    80% {transform: rotate(-300deg);}
    90%{transform: rotate(-410deg);}
    100%{transform: rotate(-300deg);}
    
    }
  
  @keyframes swinging-head{
    0%, 20%, 40%, 60%, 80%, 100% {transform: rotate(-1deg);}
    10%, 30%, 50%, 70%, 90% {transform: rotate(2deg);}
  }
  
  
  @keyframes swinging-body{
    0% {transform: rotate(-20deg);}
    50%{transform: rotate(20deg);}
    100%{transform: rotate(-20deg);}
  }
  
  @keyframes swinging-legs{
    
    0% {transform: rotate(1deg);}
    10%{transform: rotate(-1deg);}
    20%{transform: rotate(1deg);}
    30%{transform: rotate(-2deg);}
    40%{transform: rotate(1deg);}
    50%{transform: rotate(-3deg);}
    60%{transform: rotate(1deg);}
    70%{transform: rotate(-4deg);}
    80% {transform: rotate(1deg);}
    90%{transform: rotate(-5deg);}
    100%{transform: rotate(1deg);}
  
  }
  
  @keyframes swinging-ponytail{
    0%, 20%, 40%, 60%, 80%, 100% {transform: rotate(-1deg);}
    10%, 30%, 50%, 70%, 90% {transform: rotate(1deg);}
    
  }
  
  /*@keyframes moving-shadow{
    0%, 20%, 40%, 60%, 80%, 100% {transform: translate(-80px, 0px);}
    10%, 30%, 50%, 70%, 90% {transform: translate(80px, 0px);}
  }*/
  
  .rectangle-background {
    margin-left:300px;
    margin-top: 400px;
    z-index:1;
  }
  
  .full-animation{
    margin-left:300px;
    margin-top: 400px;
    z-index:5;
    
  }
  
  .base{
    transition: transform 2s;
    transform-origin: 54px 1px;
    animation: swinging 10s infinite; 
    
  }
  
  #head-full{
    transform-origin: bottom;
    animation: swinging-head 10s infinite;
  }
  
  #legs{
    transform-origin: top;
    animation: swinging-legs 10s infinite;   
  }
  
  #ponytail{
    transition: transform 2s;
    transform-origin: top;
    animation: swinging-ponytail 10s infinite;
     
  }
  
  #shadow {
    animation: moving-shadow 10s infinite;
    opacity: 0;
    }
  
.updating_head h4{
    font-family: "Butterfly Kids", cursive;
    font-size: 42px;
    font-weight: 500;
}