.white {
  fill: #fff;
}

.animated-icon {
  aspect-ratio: 1/1.2;
  padding-bottom: 20px;
}

/* Medal */

.medal {
  transform: translateX(25%);
}

.star {
  animation-name: swing;
  animation-timing-function: ease-in-out;
  transform-origin: 26% 45%;
}

@keyframes swing {

  0%,
  100% {
    transform: rotate(30deg);
  }

  50% {
    transform: rotate(-30deg);
  }
}

/* Coins */

.coins {
  animation-name: rise;
  animation-timing-function: ease-out;
}

.coin1,
.coin5 {
  animation-name: drop1;
  animation-timing-function: ease-in;
}

.coin2,
.coin6 {
  animation-name: drop2;
  animation-timing-function: ease-in;
}

.coin3,
.coin7 {
  animation-name: drop3;
  animation-timing-function: ease-in;
}

.coin4,
.coin8 {
  animation-name: drop4;
  animation-timing-function: ease-in;
}

.coin9 {
  animation-name: drop5;
  animation-timing-function: ease-in;
}

.coin10 {
  animation-name: drop6;
  animation-timing-function: ease-in;
}

.coin11 {
  animation-name: drop7;
  animation-timing-function: ease-in;
}

.coin12 {
  animation-name: drop8;
  animation-timing-function: ease-in;
}

@keyframes rise {
  0% {
    transform: translateY(20%);
  }

  60% {
    transform: translateY(0%);
  }
}

@keyframes drop1 {
  60% {
    transform: translateY(0%);
  }

  65%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop2 {
  65% {
    transform: translateY(0%);
  }

  70%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop3 {
  70% {
    transform: translateY(0%);
  }

  75%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop4 {
  75% {
    transform: translateY(0%);
  }

  80%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop5 {
  80% {
    transform: translateY(0%);
  }

  85%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop6 {
  85% {
    transform: translateY(0%);
  }

  90%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop7 {
  90% {
    transform: translateY(0%);
  }

  95%,
  100% {
    transform: translateY(20%);
  }
}

@keyframes drop8 {
  95% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(20%);
  }
}

/* Tools */

.pliers {
  animation-name: upAndDown;
  animation-timing-function: ease-in-out;
}

.pencil {
  animation-name: downAndUp;
  animation-timing-function: ease-in-out;
}

@keyframes upAndDown {

  0%,
  100% {
    transform: translateY(0%);
  }

  50% {
    transform: translateY(10%);
  }
}

@keyframes downAndUp {

  0%,
  100% {
    transform: translateY(10%);
  }

  50% {
    transform: translateY(0%)
  }
}