/* =========================
   REMOVE DEFAULT CARET
========================= */

body,
#typingBox,
#paragraph,
#paragraph span {

    caret-color: transparent;

}

#paragraph span {

    user-select: none;

}


/* =========================
   DEFAULT VARIABLES
========================= */

:root {

    --bg-color: #323437;

    --text-color: #d1d0c5;

    --sub-text: #646669;

    --correct-color: #d1d0c5;

    --wrong-color: #ca4754;

    --cursor-color: #e2b714;

    --box-bg: rgba(255,255,255,0.03);

    --stats-bg: rgba(255,255,255,0.05);

    --font-family: "Roboto Mono", monospace;

}


/* =========================
   THEMES
========================= */

/* 1. Serika */
body.theme-serika {
    --bg-color: #323437;
    --text-color: #d1d0c5;
    --sub-text: #646669;
    --cursor-color: #e2b714;
    --wrong-color: #ca4754;
}

/* 2. Dark */
body.theme-dark {
    --bg-color: #111111;
    --text-color: #eeeeee;
    --sub-text: #777777;
    --cursor-color: #00ff88;
    --wrong-color: #ff4d4d;
}

/* 3. Ocean */
body.theme-ocean {
    --bg-color: #041c32;
    --text-color: #ecf9ff;
    --sub-text: #7aa6c2;
    --cursor-color: #00c2ff;
    --wrong-color: #ff5c8a;
}

/* 4. Light */
body.theme-light {
    --bg-color: #f4f4f4;
    --text-color: #222222;
    --sub-text: #888888;
    --cursor-color: #ff9900;
    --wrong-color: #ff3333;
}

/* 5. Dracula */
body.theme-dracula {
    --bg-color: #282a36;
    --text-color: #f8f8f2;
    --sub-text: #6272a4;
    --cursor-color: #ff79c6;
    --wrong-color: #ff5555;
}

/* 6. Matrix */
body.theme-matrix {
    --bg-color: #000000;
    --text-color: #00ff66;
    --sub-text: #007733;
    --cursor-color: #00ff66;
    --wrong-color: #ff0033;
}

/* 7. Sunset */
body.theme-sunset {
    --bg-color: #2b0f0f;
    --text-color: #ffd6a5;
    --sub-text: #d88c9a;
    --cursor-color: #ff8c42;
    --wrong-color: #ff4d6d;
}

/* 8. Cyberpunk */
body.theme-cyberpunk {
    --bg-color: #0f0f1a;
    --text-color: #00f5ff;
    --sub-text: #6a5acd;
    --cursor-color: #ff00ff;
    --wrong-color: #ff3131;
}

/* 9. Forest */
body.theme-forest {
    --bg-color: #0b1d13;
    --text-color: #d8f3dc;
    --sub-text: #74c69d;
    --cursor-color: #52b788;
    --wrong-color: #ff6b6b;
}

/* 10. Lavender */
body.theme-lavender {
    --bg-color: #2b213a;
    --text-color: #f3e8ff;
    --sub-text: #b497d6;
    --cursor-color: #c77dff;
    --wrong-color: #ff4d6d;
}

/* 11. Ice */
body.theme-ice {
    --bg-color: #dff6ff;
    --text-color: #06283d;
    --sub-text: #256d85;
    --cursor-color: #47b5ff;
    --wrong-color: #ff4d4d;
}

/* 12. Retro */
body.theme-retro {
    --bg-color: #2d2a26;
    --text-color: #f4e3b2;
    --sub-text: #c2a878;
    --cursor-color: #ffb703;
    --wrong-color: #fb8500;
}

/* 13. Rose */
body.theme-rose {
    --bg-color: #2b1b24;
    --text-color: #ffe5ec;
    --sub-text: #ff8fab;
    --cursor-color: #ff4d8d;
    --wrong-color: #ff1744;
}

/* 14. Midnight */
body.theme-midnight {
    --bg-color: #0d1b2a;
    --text-color: #e0e1dd;
    --sub-text: #778da9;
    --cursor-color: #00b4d8;
    --wrong-color: #ef476f;
}

/* 15. Neon */
body.theme-neon {
    --bg-color: #050505;
    --text-color: #39ff14;
    --sub-text: #00c853;
    --cursor-color: #ffea00;
    --wrong-color: #ff1744;
}
/* =========================
   GLOBAL
========================= */

body {

    background: var(--bg-color);

    color: var(--text-color);

    font-family: var(--font-family);

    transition:
        background 0.3s ease,
        color 0.3s ease;

}


/* =========================
   PARAGRAPH
========================= */

#paragraph {

    font-size: 2rem;

    line-height: 1.9;

    word-spacing: 6px;

    color: var(--sub-text);

       position: relative;


}


/* typed correct */

.correct {

    color: var(--text-color);

}


/* typed wrong */

.wrong {

    color: var(--wrong-color);

}


/* =========================
   TYPING BOX
========================= */

.Typing_text_box {

    background: var(--box-bg);

    backdrop-filter: blur(5px);

    border-radius: 18px;

    padding: 35px;

    min-height: 22vw;

    position: relative;

    overflow: hidden;

    transition: 0.3s ease;

}


/* =========================
   TIMER
========================= */

#timer {

    position: absolute;

    top: 15px;

    right: 25px;

    font-size: 1.5rem;

    color: var(--cursor-color);

}


/* =========================
   STATS
========================= */

.stats {

    background: var(--stats-bg);

    border-radius: 12px;

    padding: 15px;

    margin-top: 30px;

}


/* =========================
   THEME PANEL
========================= */

.theme-panel {

    display: flex;

    gap: 12px;

    margin-bottom: 25px;

    flex-wrap: wrap;

}


/* theme buttons */

.theme-btn {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    cursor: pointer;

    transition: 0.2s;

    border: 3px solid transparent;

}


.theme-btn:hover {

    transform: scale(1.12);

}


/* colors */

.serika-btn {

    background: #e2b714;

}

.dark-btn {

    background: #00ff88;

}

.ocean-btn {

    background: #00c2ff;

}

.light-btn {

    background: white;

    border: 2px solid black;

}


/* =========================
   SMOOTH CURSOR
========================= */

#typingCursor {

    position: absolute;

    top: 35px;

    left: 35px;

    width: 3px;

    height: 2.6rem;

    background: var(--cursor-color);

    border-radius: 3px;

    pointer-events: none;

    z-index: 9999;

    animation: blinkCursor 1s infinite;

    transition:
        transform 0.08s cubic-bezier(0.4, 0, 0.2, 1);

}


/* blinking */

@keyframes blinkCursor {

    0% {

        opacity: 1;

    }

    50% {

        opacity: 0;

    }

    100% {

        opacity: 1;

    }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 768px) {

    #paragraph {

        font-size: 1.3rem;

        line-height: 1.8;

    }

    #typingCursor {

        height: 1.7rem;

    }

}
/* =========================
   THEME BUTTON COLORS
========================= */

.dracula-btn { background: #ff79c6; }

.matrix-btn { background: #00ff66; }

.sunset-btn { background: #ff8c42; }

.cyberpunk-btn { background: #ff00ff; }

.forest-btn { background: #52b788; }

.lavender-btn { background: #c77dff; }

.ice-btn {
    background: #47b5ff;
}

.retro-btn { background: #ffb703; }

.rose-btn { background: #ff4d8d; }

.midnight-btn { background: #00b4d8; }

.neon-btn { background: #39ff14; }