.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.game-button {
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border-radius: 32px;
}

#rpsls {
  background-color: white;
}

.game-button img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(4px);
  z-index: 0;
}

.rpsls-logo {
  top: 2.5% !important;
  left: 2.5% !important;
  width: 95% !important;
  height: 95% !important;
  filter: blur(2px) !important;
}

.battleship-logo {
  filter: blur(2px) !important;
}

.game-button span {
  position: absolute;
  z-index: 1;
  width: 100%;
  text-align: center;
  color: #b5bfe2;
  text-shadow: 1px 1px 0 #51576d, -1px -1px 0 #51576d, 1px -1px 0 #51576d, -1px 1px 0 #51576d;
}

.game-button .tic {
  top: 5%;
  font-size: 40px;
}

.game-button .tac {
  top: 38.5%;
  font-size: 40px;
}

.game-button .toe {
  top: 72%;
  font-size: 40px;
}

.game-button .rpsls {
  width: 80%;
  font-size: 30px;
}

.game-button .rock {
  top: 0%;
  text-align: left;
}

.game-button .paper {
  top: 20%;
  text-align: right;
}

.game-button .scissors {
  top: 40%;
  text-align: left;
}

.game-button .lizard {
  top: 60%;
  text-align: right;
}

.game-button .spock {
  top: 80%;
  text-align: left;
}