#promptDisplay {
    font-style: italic;
    margin-top: 10px;
    color: #555;
    text-align: center;
}
.styled-letter-btn {
    background-color: white;
    color: black;
    border: 1px solid black;
    margin: 2px;
    padding: 10px 15px;  /* Optional padding for a bit more space inside the button */
    text-decoration: none;  /* Removes any underlines */
    transition: 0.3s;  /* Optional smooth transition for hover effects */
    cursor: pointer;  /* Makes the cursor turn to a hand when hovering over the button */
    font-family: inherit;  /* Uses the same font as your page */
}

/* Optional: Adds a slight hover effect to give feedback to users */
.styled-letter-btn:hover {
    background-color: black;
    color: white;
}
#letterText {
    width: 80%;
    height: 300px; /* or whatever height you prefer */
    display: block; /* ensures the textarea behaves like a block-level element */
    margin-left: auto; /* auto margin on the left */
    margin-right: auto; /* auto margin on the right */
}
#promptBox {
    display: none; /* Initially hide the box */
    background-color: white;
    border: 2px solid black;
    padding: 10px;  /* adjust as needed for spacing inside the box */
    margin: 10px 0; /* space around the box, adjust as necessary */
    text-align: center;
}