body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  height: 100vh;
  background-color: rgba(61, 122, 10, 0.466);
}


figure {
  display: flex;
  justify-content: center;
  align-items: center;
  background: center / contain url("wheel.png") no-repeat;
  width: 75vmin;
  height: 75vmin;
  /* background-color: chartreuse; */
}


.ball-container {
  display: flex;
  justify-content: center;
  width: 30px;
  height: 75vmin;
  transform: rotate(0deg);
  /* background-color: #b08ee2; */
  animation: rotate 5s 1 ease-out forwards 2s;
  /* animation-name: rotate;
  animation-duration: 5s;
  animation-iteration-count: 3;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 2s; */
}

.ball {
  border-radius: 50%;
  background-color: wheat;
  width: 4vmin;
  height: 4vmin;
  border: 1px solid #b752ce;
  margin-top: 9vmin;
  z-index: 3;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(815deg);
  }
}