* {
  box-sizing: border-box;
}
body {
  /* display: grid; */
  /* place-items: center; */
  min-height: 100vh;
}
.pokeball {
  display: block;
  width: 192px;
  height: 192px;
  background: radial-gradient(
      white 16px,
      black 17px 18px,
      white 19px 24px,
      black 25px 32px,
      transparent 33px
    ),
    linear-gradient(to bottom, red 0 80px, black 81px 96px, white 97px 100%);
  border-radius: 50%;
  border: 8px solid black;
  box-shadow: inset -16px -8px 0 0 rgba(0, 0, 0, 0.2);
  animation: fall 0.5s ease-in-out 1s,
    shake 1.25s cubic-bezier(0.36, 0.07, 0.19, 0.97) 1.5s 3,
    catch 0.5s ease-out 5.25s forwards;
}
/* Animation */
@keyframes shake {
  0% {
    transform: translate(-50%, -50%) translateX(0) rotate(0);
  }
  20% {
    transform: translate(-50%, -50%) translateX(-10px) rotate(-20deg);
  }
  30% {
    transform: translate(-50%, -50%) translateX(10px) rotate(20deg);
  }
  50% {
    transform: translate(-50%, -50%) translateX(-10px) rotate(-10deg);
  }
  60% {
    transform: translate(-50%, -50%) translateX(10px) rotate(10deg);
  }
  100% {
    transform: translate(-50%, -50%) translateX(0) rotate(0);
  }
}
@keyframes fall {
  0% {
    transform: translate(-50%, -50%) translateY(-200%);
  }
  60% {
    transform: translate(-50%, -50%) translateY(0);
  }
  80% {
    transform: translate(-50%, -50%) translateY(-10%);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0);
  }
}
@keyframes catch {
  to {
    filter: saturate(0.8) brightness(0.8);
  }
}