:root {
    --primary: #6366f1;
    --secondary: #8b5cf6;
    --accent: #ec4899;
    --light: #f3f4f6;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #20b2aa, #BCA7ED, #20b2aa);
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-tap-highlight-color: transparent;
}

.typing-text {
    font-size: 1.2rem;
    line-height: 1.8;
}

#typing-text {
    user-select: none;  /* Disable text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.correct {
    color: #10B981;
    background-color: #D1FAE5;
}

.incorrect {
    color: #EF4444;
    background-color: #FEE2E2;
    text-decoration: underline;
}

.current {
    background-color: #E5E7EB;
    border-left: 2px solid #3B82F6;
}

.content-box {
    background: rgba(255, 255, 255, 0.8);
    /* Light with transparency */
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
    .typing-text {
        font-size: 1rem;
        line-height: 1.6;
    }
}

.timer-animation {
    transition: width 1s linear;
}