style.css

body {
  background-color: rgb(0, 97, 55);
  font-weight: bolder;
  width: 50%;
  text-align: center;
  vertical-align: middle;
}

h1 {
  color: aliceblue;
  padding: 5%;
}

.letterSquare {
  width: 50px;
  height: 50px;
  font-size: 20pt;
  font-weight: bolder;
  text-align: center;
  border: 2.5pt solid slategrey; /* Added border-style */
  border-radius: 20%;
  text-transform: uppercase;
  margin: 0.5%; /* Adjusted margin for better consistency */
}

.letterSquare:disabled {
  color: white;
}

#winningMessage {
  font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
  vertical-align: middle;
  padding: 2%;
  margin: 5% auto; /* Centered the message horizontally */
  margin-top: 5%;
  text-align: center;
  color: white;
  font-weight: bold;
  font-size: 20pt;
  width: 200px;
  height: 100px;
  border-radius: 15%;
  background-color: red;
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: ease-in-out; /* Added easing function */
  animation-iteration-count: infinite; /* Example - make it infinite or adjust as needed */
}

@keyframes example {
  from {
    background-color: red;
  }
  to {
    background-color: blue;
  }
}

.btn, .delete, .enter {
	font-size: 1.25em;
	font-weight: bold;
	border-radius: 4px;
	cursor: pointer;
	background-color: gray;
	color: white;
	justify-content: center;
	align-items: center;
	text-transform: uppercase;
  padding: 10px;
  margin: 5px;
}

.keyboard {
  margin-top: 5%;
}