/* ==========================================================
   TypingTutor.Online
   Balanced Typing Text Sizes v17.2.5
   File: css/typing-text-sizes-v17.2.5.css
========================================================== */

/*
 * Five clearly separated reading sizes for lesson text.
 * Large is the default for new and reset users.
 */

html[data-typing-text-size="small"] #lessonText {
    --lesson-text-line-height: 1.72;
    --lesson-exact-line-height: 1.72em;
    font-size: clamp(23px, 1.65vw, 26px) !important;
    line-height: 1.72 !important;
    letter-spacing: .085em;
}

html[data-typing-text-size="normal"] #lessonText {
    --lesson-text-line-height: 1.66;
    --lesson-exact-line-height: 1.66em;
    font-size: clamp(28px, 2.05vw, 32px) !important;
    line-height: 1.66 !important;
    letter-spacing: .075em;
}

html[data-typing-text-size="large"] #lessonText {
    --lesson-text-line-height: 1.58;
    --lesson-exact-line-height: 1.58em;
    font-size: clamp(34px, 2.5vw, 39px) !important;
    line-height: 1.58 !important;
    letter-spacing: .064em;
}

html[data-typing-text-size="extra-large"] #lessonText {
    --lesson-text-line-height: 1.50;
    --lesson-exact-line-height: 1.50em;
    font-size: clamp(40px, 3vw, 46px) !important;
    line-height: 1.50 !important;
    letter-spacing: .052em;
}

html[data-typing-text-size="maximum"] #lessonText {
    --lesson-text-line-height: 1.44;
    --lesson-exact-line-height: 1.44em;
    font-size: clamp(47px, 3.6vw, 55px) !important;
    line-height: 1.44 !important;
    letter-spacing: .038em;
}

/* Tablet and mobile sizes remain distinct without overwhelming the viewport. */
@media (max-width: 760px) {
    html[data-typing-text-size="small"] #lessonText {
        font-size: clamp(20px, 5.7vw, 24px) !important;
        line-height: 1.72 !important;
    }

    html[data-typing-text-size="normal"] #lessonText {
        font-size: clamp(23px, 6.4vw, 28px) !important;
        line-height: 1.66 !important;
    }

    html[data-typing-text-size="large"] #lessonText {
        font-size: clamp(28px, 7.4vw, 33px) !important;
        line-height: 1.58 !important;
    }

    html[data-typing-text-size="extra-large"] #lessonText {
        font-size: clamp(32px, 8.4vw, 38px) !important;
        line-height: 1.50 !important;
    }

    html[data-typing-text-size="maximum"] #lessonText {
        font-size: clamp(36px, 9.3vw, 43px) !important;
        line-height: 1.44 !important;
    }
}

/* Very narrow phones need a safety reduction while preserving hierarchy. */
@media (max-width: 390px) {
    html[data-typing-text-size="small"] #lessonText {
        font-size: 20px !important;
    }

    html[data-typing-text-size="normal"] #lessonText {
        font-size: 23px !important;
    }

    html[data-typing-text-size="large"] #lessonText {
        font-size: 28px !important;
    }

    html[data-typing-text-size="extra-large"] #lessonText {
        font-size: 32px !important;
    }

    html[data-typing-text-size="maximum"] #lessonText {
        font-size: 36px !important;
    }
}