.del-button, .enter-button, .keyboard-button, .reset-button {
  touch-action: manipulation; /* Prevents double-tap zoom */
}

body {
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    padding: 1rem;
    background: #f8f8f8;
}
.modal {
    display: none;
    position: fixed;
    z-index: 2; /* Ensure modal is above other elements */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Darker background for better contrast */
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: #fefefe;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Add shadow for depth */
    width: 80%;
    max-width: 500px; /* Max width and centered content */
    text-align: center; /* Centered text */
}

/* Styling for input and button inside modal */
.modal-content input[type=email] {
    width: 80%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.modal-content button {
    padding: 10px 20px;
    margin: 10px 0;
    border: none;
    border-radius: 5px;
    background-color: #333;
    color: white;
    cursor: pointer;
}

.modal-content button:hover {
    background-color: #555;
}


h1 {
    text-align: center;
    font-size: 2rem;
     font-weight: 700;
   }
   h2 {
    text-align: center;
    font-size: 1.3rem;
     font-weight: 700;
   }
   
   #game-board {
     display: flex;
     align-items: center;
     flex-direction: column;
   }
   
   .letter-box {
     border: 2px solid gray;
     border-radius: 3px;
     margin: 2px;
     font-size: 2.5rem;
     font-weight: 700;
     height: 3rem;
     width: 3rem;
     display: flex;
     justify-content: center;
     align-items: center;
     text-transform: uppercase;
   }
   
   .filled-box {
     border: 2px solid black;
   }
   
   .letter-row {
     display: flex;
   }
   
   #keyboard-cont {
     margin: 1rem 0;
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   
   #keyboard-cont div {
     display: flex;
     justify-content: center; /* Center buttons horizontally */
   }
   
   .second-row {
     margin: 0.5rem 0;
   }
   
   .keyboard-button {
     font-size: 1rem;
     font-weight: 700;
     padding: 0.5rem;
     margin: 0 2px;
     cursor: pointer;
     text-transform: uppercase;
   }
   .reset-button {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 10px 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .del-button {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 10px 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .enter-button {
    font-size: 1rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 10px 2px;
    cursor: pointer;
    text-transform: uppercase;
  }
  .back-button {
    padding: 10px 20px;
    margin-top: 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
  }
  
  .back-button:hover {
    background-color: #3094ff;
  }
  .seo-paragraph {
    text-align: center;
    margin: 20px auto;
    max-width: 800px; /* Adjust the width as needed */
    padding: 10px;
    font: inherit;
    vertical-align: baseline;
    line-height: 1.6em;
}
@media (max-width: 600px) {
  /* Shrink keyboard buttons */
  .keyboard-button {
      font-size: 3vw; /* Reduce font size for smaller screens */
      padding: 2vw; /* Reduce padding to fit buttons */
      margin: 1vw 0.5vw; /* Adjust margin for tighter spacing */
      min-width: 30px; /* Reduce minimum width for touch targets */
      min-height: 30px; /* Reduce minimum height for touch targets */
  }


}