.word-display {
        padding: 1rem;
        height: 400px;
        overflow-y: auto;
        border: 1px solid #ccc;
        font-family: "Roboto Mono", monospace;
        font-size: 3rem;
        white-space: wrap;
   
        
    }

    .word-display span {
        padding: 0 5px;
        margin-right: 4px;
        display: inline-block;
             line-height: 3.5rem;
    }

    .correct {
        background-color: #d4edda;
        color: #155724;
    }

    .incorrect {
        background-color: #f8d7da;
        color: #721c24;
    }

  
     .current {
        border-bottom: 3px solid #3273dc;
        animation: blink 1s step-end infinite;
    }

    @keyframes blink {
        50% {
            border-color: transparent;
        }
    }