.hero__image {
  border-radius: 10000px;
  border: 2px solid #dadada;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  animation-name: bounce-2;
  animation-timing-function: ease-in-out;

  /* box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px,
    rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; */
}

@keyframes bounce-2 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes bounce-3 {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.figma__bounce {
  position: absolute;
  top: 12px;
  right: 32px;
  width: 44px;
  height: 44px;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  animation-name: bounce-2;
  animation-timing-function: ease-in-out;
}
.upwork__bounce {
  position: absolute;
  top: 40px;
  left: 20px;
  width: 44px;
  height: 44px;
  animation-duration: 4.3s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  animation-name: bounce-2;
  animation-timing-function: ease-in-out;
}
.ps__bounce {
  position: absolute;
  bottom: 32px;
  right: 12px;
  width: 44px;
  height: 44px;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  animation-name: bounce-2;
  animation-timing-function: ease-in-out;
}

.project__bounce {
  animation-duration: 6s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  animation-name: bounce-3;
  animation-timing-function: ease-in-out;
}

@keyframes shaking {
  0% {
    transform: translateX(-10px);
  }
  20% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(-5px);
  }
  70% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(10px);
  }
  90% {
    transform: translateX(-10px);
  }
}

@keyframes skew-x-shakeng {
  0% {
    transform: skewX(-15deg);
  }
  5% {
    transform: skewX(15deg);
  }
  10% {
    transform: skewX(-15deg);
  }
  15% {
    transform: skewX(15deg);
  }
  20% {
    transform: skewX(0deg);
  }
  100% {
    transform: skewX(0deg);
  }
}

.shake__btn {
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: skew-x-shakeng;
  animation-timing-function: ease-in;
}

.shake__skill-1 {
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-name: skew-x-shakeng;
  animation-timing-function: ease-in;
}
.shake__skill-2 {
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-name: skew-x-shakeng;
  animation-timing-function: ease-in;
}