/* Load custom fonts */

@font-face {
    font-family: 'Krutidev';
    src: url('../fonts/Krutidev/krutidev010.ttf') format('truetype');
}

@font-face {
    font-family: 'Mangal';
    src: url('../fonts/Mangal/mangal.ttf') format('truetype');
}

/* Optional: Arial is usually default on browsers */
@font-face {
    font-family: 'Arial';
    src: url('../fonts/Arial/arial.ttf') format('truetype');
}


#typing-master-container {
    max-width: 800px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

.tm-controls label, .tm-controls select, .tm-controls button {
    margin: 0 5px;
}

.tm-boxes {
    display: flex;
    margin-top: 20px;
}

.tm-boxes textarea {
    width: 50%;
    height: 200px;
    padding: 10px;
    margin-right: 10px;
    resize: vertical;
}

.tm-boxes textarea#tm_text_input {
    margin-right: 0;
}

.tm-stats p {
    margin: 5px 0;
}

.tm-word-correct {
    color: green;
}

.tm-word-incorrect {
    color: red;
}

/* reference overlay div */
#tm_text_reference_overlay {
    width: 50%;
    height: 200px;
    padding: 10px;
    margin-right: 10px;
    border: 1px solid #ccc;
    overflow-y: auto;
    resize: vertical;
    box-sizing: border-box;
}