body {
    width:100vw;
    height:100vh;
    padding:0;
    display: grid;
    grid-template-rows: 0.1fr 0.5fr 0.5fr;
    grid-template-columns: 1fr 1fr 1fr;
    overflow-x: hidden;
    overflow-y: hidden;
}

body h1 {
    text-align: center;
    grid-column: 1 / 4;
}

#box1 {
    width:50%;
    height:50%;
    background-color: red;
    margin-bottom: 1rem;
}

#box2 {
    width:8vh;
    height:8vh;
    border-radius: 50%;
    background: linear-gradient(red, blue);
    margin-bottom: 1rem;
}

#box2.move {
    transform: translateX(20vh);
}

#ex4 table {
    width:100%;
}

#ex4 table th {
    width:45%;
}

#ex4 table td {
    width:45%;
}

#stage {
    width:100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-bottom: 1rem;
}

#stage > section {
    height: 15vh;
}

#blue {
    background-color: blue;
}

#red {
    background-color: red;
}

#green {
    background-color: green;
}


@keyframes roll-animation {
  0% {
    transform: translateX(0) rotate(0);
  }
  100% {
    transform: translateX(200px) rotate(360deg);
  }
}

#ball {
  width: 100px;
  height: 100px;
 border-radius: 50%;
  background-color: red;
  
  /*animation-fill-mode: forwards;*/
  /*animation-iteration-count: infinite;*/
  /*animation-play-state: paused;*/
}
.roll{
    animation: roll-animation 4s linear;
}