body {
     font-family: Arial, sans-serif;
     background-color: #121213;
     color: #ffffff;
     text-align: center;
     margin-top: 50px;
   }
   #board {
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-bottom: 20px;
   }
   .row {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-gap: 5px;
     margin-bottom: 5px;
   }
   .tile {
     width: 50px;
     height: 50px;
     border: none;
     font-size: 2em;
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: #3a3a3c;
     color: #fff;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
     border-radius: 5px;
   }
   .tile input {
     width: 100%;
     height: 100%;
     text-align: center;
     background-color: transparent;
     border: none;
     outline: none;
     color: #fff;
     font-size: 2em;
     caret-color: transparent;
   }
   .correct {
     background-color: #538d4e;
     color: #fff;
   }
   .present {
     background-color: #b59f3b;
     color: #fff;
   }
   .absent {
     background-color: #3a3a3c;
     color: #fff;
   }
   #message {
     font-size: 1.2em;
     margin-top: 20px;
   }
.tile input {
  width: 30px;
  height: 30px;
  text-align: center;
  font-size: 20px; /* Add this line for mobile */
}