body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #F7D6E0;
    overflow: hidden; /* Ensure the whole bounce is visible */
    font-family:Arial, Helvetica, sans-serif;

  }
.numberRow {
    display: flex;
    flex-direction: row;
  }


.box {
  background-color: #EFF7F6;
  width: 70px;
  height: 70px;
  border: 1px solid #000;
  border-radius: 50%;
  display: flex; /* Use flex container */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  margin: 10px;
  font-size: 40px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  animation: moveUpDown 2s linear infinite alternate;
}

p{
font-size: 25px;
}

#clearButton {
  background-color: #EFF7F6;
  padding: 10px;
  margin: 10px;
  font-size: 20px;
  height: 70px;
  border-radius: 40px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  animation: moveUpDown 2s linear infinite alternate;

}
#submitButton{
  background-color: #EFF7F6;
  padding: 10px;
  font-size: 20px;
  height: 85px;
  border-radius: 45px;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  animation: moveUpDown 2s linear infinite alternate;

}

.moving {
  animation-play-state: running; /* Continue the animation when the box is moving */
}

@keyframes moveUpDown {
  from{
    margin-top: 40%;}
  to{
      margin-bottom: 40%;
}
}