h1 {
    display: flex;
    justify-content: center; 
    font-family: Monaco, monospace;
    font-size: 40px;

}
.container {
    display: flex;
    justify-content: center; 
}
input{
    width: 700px;
    height: 30px;
    font-size: 20px;
    font-family: Andale Mono, monospace;
}
#text{

    width: 700px;
    margin: 0 auto;
    font-size: 20px;
    font-family: Andale Mono, monospace;

}
.cursor {
    border-left: 2px solid black;
    animation: blink 0.8s steps(1) infinite;
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}
.underline {
    text-decoration: underline;
}
.error{
    background-color: #f39190;
}
.goodInput{
    color: #5ace30;

    text-decoration-color: #5ace30;
}
.goodInputSpace{
    color: #5ace30;
}
#timerContainer{
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-family: Andale Mono, monospace;
}
#score{
    display: flex;
    flex-direction: column;
    align-items: center; /* Center elements horizontally */
    justify-content: center; /* Center elements vertically */
    font-size: 40px;
    font-family: Andale Mono, monospace;

}

.end{
    color: #9aa098;
    margin: 0;
}
.done{
    color: black;
    font-size: 70px;
    margin: 0;
    font-family: 'Source Code Pro', monospace;

}
button {
    background-color: black;  /* Black background */
    color: white;             /* White text */
    border: none;             /* Remove border */
    padding: 10px 20px;       /* Add some padding */
    font-size: 16px;          /* Increase font size */
    border-radius: 5px;       /* Rounded corners */
    cursor: pointer;          /* Change cursor on hover */
    transition: background-color 0.3s ease; /* Smooth transition on hover */
}

button:hover {
    background-color: #333;   /* Darker black on hover */
}