h1 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 5px;
    margin-bottom: 5px;
 }
 h2 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 5px;
  margin-bottom: 5px;
 }
 h3 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 5px;
  margin-bottom: 5px;
 }
 h4 {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 5px;
  margin-bottom: 5px;
 }
 
 div {
   text-align: center;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 17px;
  }
 
  ol {
   text-align: left;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 17px;
  }
 
 
 #game-board {
   display: flex;
   align-items: center;
   flex-direction: column;
 }
 
  .letter-box {
    border: 1px solid gray;
    border-radius: 3px;
    margin: 1px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px; /* Adjust as needed */
    font-weight: 700;
    height: 20px; /* Adjust as needed */
    width: 20px; /* Adjust as needed */
    display: flex;
    justify-content: center;
    align-items: center;
    /*text-transform: uppercase;*/
  }
 
 .filled-box {
   border: 1px solid black;
 }
 
 .letter-row {
  display: flex;
  -webkit-box-pack: center;
 }
 
 #keyboard-cont {
   margin: 4px 0;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 #keyboard-cont div {
   display: flex;
 }
 
 .second-row {
   margin: 4px 0;
 }
 
.keyboard-button {
  font-size: 12px;
  font-weight: 700;
  padding: 8px;
  margin: 0 1px;
  cursor: pointer;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
 
 /* Add a black background color to the top navigation */
 .topnav {
   background-color: #333;
   overflow: hidden;
 }
 
 /* Style the links inside the navigation bar */
 .topnav a {
   float: left;
   color: #f2f2f2;
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
   font-size: 17px;
   font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Change the color of links on hover */
 .topnav a:hover {
   background-color: #ddd;
   color: black;
 }
 
 /* Add a color to the active/current link */
 .topnav a.active {
   background-color: green;
   color: white;
 }