#wordDisplay {
    background-color: rgb(248, 239, 229);
    font-family: monospace;
    white-space: nowrap;                /* Prevents wrapping */
    overflow-x: auto;                   /* Allows horizontal scroll if needed */
    /* font-size: clamp(1.2rem, 8vw, 2.5rem);  */
    font-size: 3vw;                  
    letter-spacing: -.1em;              /* Tighter spacing for long words: .3 orig */
    text-align: center;
    max-width: 100%;                    /* Ensures it doesn't overflow container */
    margin: 0 auto;
    padding: 0 0.5em;                   /* Small horizontal padding */
    padding-bottom: 10px;
    padding-top: 10px;
    border-radius: 10px;
    border: 2px solid #ccc; /* Subtle border for definition */
}

#letterButtons button {
    margin: 0.2em;
    width: 2.5em;
    height: 2.5em;
    font-size: 1.2em;
    /* background-color: lightgreen; */
    background-color: #f8dbbb;
}

/* Increase contrast for used (disabled) letter buttons */
#letterButtons button:disabled {
    background-color: #CCC !important;   /* Darker background for disabled */
    color: #888 !important;              /* White text for contrast */
    opacity: 1 !important;               /* Remove Bootstrap's default dimming */
    border-color: #444 !important;       /* Darker border for clarity */
    /* You can tweak these values for your preferred look */
}
/* End of contrast adjustment */

a{
    text-decoration: none;
    font-weight: bold;
}