@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-size: 50px;
  font-family: 'Poppins', sans-serif;
  margin-bottom: 0;
  font-weight: 700;
  text-align: center;
  color: var(--primary-blue);
}

.updating_head h6 {
  font-size: 14px;
  font-family: "Pliant", sans-serif !important;
  margin-bottom: 0;
  line-height: normal;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  color: var(--primary-blue);
}

.updating_head .dot {
  color: #e83946;
}