* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;

}

:root {
    --bg-color: hsl(0, 0%, 5%);
    --text-s-color: hsl(0, 0%, 43%);

}

body {
    background-color: var(--bg-color);
    color: var(--text-s-color);
    font-weight: 600;
    font-family: sans-serif;
}

.line {
    height: 20px;
    width: 1px;
    background-color: var(--text-s-color);
    color: hsl(0, 0%, 11%);
}

.hero {
    display: flex;
    align-items: center;
    padding: 20px 145px;
    justify-content: space-between;

}

.left-hero h1 {
    font-size: 25px;
}

.left-hero p {
    text-align: juwpm-cstify;
    text-align-last: justify;
    text-justify: inter-word;
}

.m {
    padding: 20px 20px;
    margin: 0 auto;
    width: 1000px;

}


.controls {
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.left-c {
    display: flex;
    gap: 10px;
}

.wpm-c {
    color: #fff;
}

.accuracy {
    color: rgb(226, 56, 56);
}

.time {
    color: rgb(243, 243, 60);
}

.wrong {
    color: rgb(226, 56, 56);
}

.correct {
    color: hsl(113, 76%, 49%);
}

hr {
    margin: 10px 0;
    height: 1px;
    background-color: var(--text-s-color);
    border: none;
}

#hidden-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.text {
    font-size: 24px;
    line-height: 1.6;
    user-select: none;
    color: var(--text-s-color);

}

.btn {
    border: 2px solid var(--text-s-color);
    font-weight: bold;
    border-radius: 10px;
    color: var(--text-s-color);
    padding: 10px 15px;
    background: none;
}

/* الحرف الحالي الذي ينتظر الكتابة */
span.active {
    border-left: 2px solid #f8f529;
    /* الخط الذي يمثل المؤشر */
    animation: blink 1s infinite;
    /* جعله ينبض */
    background-color: rgba(255, 255, 255, 0.1);
    /* تمييز خلفية الحرف قليلاً */
}

/* تحريك المؤشر (يظهر ويختفي) */
@keyframes blink {
    50% {
        border-color: transparent;
    }
}