How to stop pages from creating scrollbar

I am having this trouble with my game in where the screen creates a small scroll bar and the page won't fit on one screen. When I try changing the height in my body and html tags it seems like nothing is happening and when I try overflow:hidden it just stops me from getting to my play again button and doesn't actually fit the game onto one single page.

Here is the game link https://jobaa11.github.io/connect-4-project-1/

This is my CSS for my body and main

body {
  margin: 0;
  height: 100vh;
  display: grid;
  justify-content: stretch;
  align-items: center;
  background-color: var(--blue);
}
main {
  display: grid;
  justify-content: center;
  margin: 0;
}

I've tried several different options, but that scrollbar has been very persistent. Any suggestions?

This is also my footer which holds my play-again button that keeps causing the scroll bar issue I believe.

footer {
  display: flex;
  justify-content: space-evenly;
  font-family: 'Press Start 2P', sans-serif;
  color: rgb(75, 57, 57);
}

footer>button {
  margin-top: 10px;
  outline-style: groove;
  background-color: #FEDF49;
  border-radius: 5%;
  font-family: 'Press Start 2P', sans-serif;
  font-size: small;
}

footer>button:hover {
  transform: scale(1.1);
  opacity: 80;
  color: red
}

#replay-again-btn {
  cursor: pointer;
}