/* Add some basic styling to the buttons */
 button {
    padding: 10px;
    font-size: 16px;
    cursor: pointer;
    margin: 10px;
    border: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Style the Convert to Speech button */
#ttsButton {
    background-color: #518554; /* Green background */
    color: white; /* White text */
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Add a hover effect to the Convert to Speech button */
#ttsButton:hover {
    background-color: #3d6f41; /* Darker green on hover */
}

/* Style the Stop Speech button */
#stopButton {
    background-color: #ff4d4d; /* Red background */
    color: white; /* White text */
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

/* Add a hover effect to the Stop Speech button */
#stopButton:hover {
    background-color: #cc0000; /* Darker red on hover */
}

/* Style the voice selection dropdown */
select {
    padding: 10px;
    font-size: 16px;
    margin: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.icon {
    font-size: 20px;
}