.textXS {
    font-family: var(--textXS_font), sans-serif;
    color: var(--textXS_textColor);
}

.textS {
    font-family: var(--textS_font), sans-serif;
    color: var(--textS_textColor);
}

.textM {
    font-family: var(--textM_font), sans-serif;
    color: var(--textM_textColor);
}

.textL {
    font-family: var(--textL_font), sans-serif;
    color: var(--textL_textColor);
}

.textXL {
    font-family: var(--textXL_font), sans-serif;
    color: var(--textXL_textColor);
}

.textResponseXS {
    letter-spacing: 2px;
    font-family: var(--textResponseXS_font), sans-serif;
    color: var(--textResponseXS_textColor);
}

.textResponseS {
    letter-spacing: 3px;
    font-family: var(--textResponseS_font), sans-serif;
    color: var(--textResponseS_textColor);
}

.textResponseM {
    letter-spacing: 4px;
    font-family: var(--textResponseM_font), sans-serif;
    color: var(--textResponseM_textColor);
}

.textResponseL {
    letter-spacing: 5px;
    font-family: var(--textResponseL_font), sans-serif;
    color: var(--textResponseL_textColor);
}

.textResponseXL {
    letter-spacing: 6px;
    font-family: var(--textResponseXL_font), sans-serif;
    color: var(--textResponseXL_textColor);
}

.textContent {
    width: fit-content;
}

.textShadow {
    text-shadow: var(--shadowText) var(--colorBlackL);
}

.textPre {
    white-space: pre;
}

.textUnderline {
    text-decoration: underline;
}

a.textUnderline {
    display: block;
}

.textBold {
    font-weight: bold;
}

.textCursorHelp {
    cursor: help;
}

.textCursorText {
    cursor: text;
}

.textCursorPointer {
    cursor: pointer;
}

.textLeft {
    text-align: left;
}

.textRight {
    text-align: right;
}

.textCenter {
    text-align: center;
}

.textAlign {
    text-align: var(--textAlign) !important;
}

.textBlack {
    color: var(--colorBlackL) !important;
}

.textRed {
    color: var(--colorRed) !important;
}

.textYellow {
    color: var(--colorYellow) !important;
}

.textGreen {
    color: var(--colorGreen) !important;
}

.textBlue {
    color: var(--colorBlue) !important;
}

@media (prefers-color-scheme: dark) {
    .textXS {
        color: var(--textXS_textColorD);
    }

    .textS {
        color: var(--textS_textColorD);
    }

    .textM {
        color: var(--textM_textColorD);
    }

    .textL {
        color: var(--textL_textColorD);
    }

    .textXL {
        color: var(--textXL_textColorD);
    }

    .textResponseXS {
        color: var(--textResponseXS_textColorD);
    }

    .textResponseS {
        color: var(--textResponseS_textColorD);
    }

    .textResponseM {
        color: var(--textResponseM_textColorD);
    }

    .textResponseL {
        color: var(--textResponseL_textColorD);
    }

    .textResponseXL {
        color: var(--textResponseXL_textColorD);
    }

    .textShadow {
        text-shadow: var(--shadowText) var(--colorBlackSD);
    }

    .textBlack {
        color: var(--colorBlackLD) !important;
    }

    .textRed {
        color: var(--colorRedD) !important;
    }

    .textYellow {
        color: var(--colorYellowD) !important;
    }

    .textGreen {
        color: var(--colorGreenD) !important;
    }

    .textBlue {
        color: var(--colorBlueD) !important;
    }
}

@media only screen and (max-width: 500px) {
    .textXS {
        font-size: 8px;
    }

    .textS {
        font-size: 12px;
    }

    .textM {
        font-size: 16px;
    }

    .textL {
        font-size: 20px;
    }

    .textXL {
        font-size: 24px;
    }

    .textResponseXS {
        font-size: clamp(15px, 5dvw, 20px);
    }

    .textResponseS {
        font-size: clamp(20px, 6dvw, 25px);
    }

    .textResponseM {
        font-size: clamp(25px, 7dvw, 30px);
    }

    .textResponseL {
        font-size: clamp(30px, 8dvw, 35px);
    }

    .textResponseXL {
        font-size: clamp(35px, 9dvw, 40px);
    }
}

@media only screen and (min-width: 501px) and (max-width: 1000px) {
    .textXS {
        font-size: 9px;
    }

    .textS {
        font-size: 13px;
    }

    .textM {
        font-size: 17px;
    }

    .textL {
        font-size: 21px;
    }

    .textXL {
        font-size: 25px;
    }

    .textResponseXS {
        font-size: clamp(20px, 4dvw, 25px);
    }

    .textResponseS {
        font-size: clamp(25px, 5dvw, 30px);
    }

    .textResponseM {
        font-size: clamp(30px, 6dvw, 35px);
    }

    .textResponseL {
        font-size: clamp(35px, 7dvw, 40px);
    }

    .textResponseXL {
        font-size: clamp(40px, 8dvw, 45px);
    }
}

@media only screen and (min-width: 1001px) {
    .textXS {
        font-size: 10px;
    }

    .textS {
        font-size: 14px;
    }

    .textM {
        font-size: 18px;
    }

    .textL {
        font-size: 22px;
    }

    .textXL {
        font-size: 26px;
    }

    .textResponseXS {
        font-size: clamp(25px, 2.5dvw, 35px);
    }

    .textResponseS {
        font-size: clamp(30px, 3dvw, 40px);
    }

    .textResponseM {
        font-size: clamp(35px, 3.5dvw, 45px);
    }

    .textResponseL {
        font-size: clamp(40px, 4dvw, 50px);
    }

    .textResponseXL {
        font-size: clamp(45px, 4.5dvw, 55px);
    }
}