body{
    background-color:black;
}

img {
	width:900px;
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">
 
.game-board {
    display: grid;
    grid-template-columns: repeat(3,1fr);
}
.nome{
    background-color:white;
    width: 100%;
    max-width: 900px;
    height:150px;
    color: black;
    font-family: Luckiest Guy;
    font-size: 130px;
    text-align: center;
    margin-bottom: 10px;
    padding-top: 0px;
}

.spin {
    cursor: pointer;
    transform-style: preserve-3d;
  }
  .spin:hover {
      animation: anime 5s linear infinite;
  }
  @keyframes anime {
    0% {
      transform: rotateY(0deg);
    }
    100% {
      transform: rotateY(360deg);
    }
  }
  .box-1 {
    transform: rotate(10deg);
  }
  .box-2 {
    transform: rotate(-55deg);
  }
  
  
  
  
  
  
  
  .next {
      dislpay: none;
      position: fixed;
      bottom: 1ch;
      right: 4ch;
  }
  @keyframes slide {	
    0% {
      left: 0;
      top: 0;
    }
    50% {
      left: 244px;
      top: 100px;
    }
    100% {
      left: 488px;
      top: 0;
    }
  }
  .stage {
    background: black;
    border-radius: 6px;
    height: 150px;
    position: relative;
    min-width: 538px;
  }
  .stage:hover .ball {
    animation-name: slide;
    animation-duration: 2s;
    animation-timing-function: ease-in-out;
    animation-delay: .1s;
    animation-fill-mode: forwards;
        animation-play-state: running;
  }
  .stage:active .ball {
    animation-play-state: paused;
  }
  .ball {
    background: white;
    border-radius: 50%;
    height: 50px;
    position: absolute;
    width: 50px;
  }