:root {
    --black: #000000;
    --boulder: #787878;
    --cararra: #ececec;
    --cararra-2: #ebebeb80;
    --ceramic: #fcfcfc;
    --cultured-pearl: #f5f5f5;
    --mercury: #e3e3e3;
    --nobel: #b7a8ad;
    --onyx: #373737;
    --paprika: #93032e;
    --soft-peach: #f5eff1;
    --white: #ffffff;

    --font-size-l: 20px;
    --font-size-m: 16px;
    --font-size-s: 14px;
    --font-size-xl: 24px;
    --font-size-xs: 12px;
    --font-size-xxl: 28px;
    --font-size-xxxl: 32px;

    --font-family-inter: "Inter", Helvetica;
    --font-family-noto_sans: "Noto Sans", Helvetica;
    --font-family-noto_sans-bolditalic: "Noto Sans-BoldItalic", Helvetica;
    --font-family-noto_sans-mediumitalic: "Noto Sans-MediumItalic", Helvetica;
}

* {
    font-family: var(--font-family-noto_sans);
}

.bodymedium {
    font-family: var(--font-family-inter);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
}

.notosans-bold-onyx-16px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}

.notosans-semi-bold-onyx-14px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 600;
}

.notosans-normal-boulder-14px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.notosans-bold-onyx-24px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
}

.notosans-medium-boulder-14px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 500;
}

.notosans-normal-onyx-16px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.notosans-bold-onyx-20px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.notosans-bold-onyx-18px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
}

.notosans-medium-onyx-14px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 500;
}

.notosans-bold-boulder-20px {
    /* color: var(--boulder); */
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.notosans-bold-boulder-16px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}

.notosans-normal-onyx-12px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 400;
}

.notosans-semi-bold-onyx-16px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 600;
}

.notosans-semi-bold-cultured-pearl-16px {
    color: var(--cultured-pearl);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 600;
}

.notosans-normal-boulder-16px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.notosans-bold-onyx-32px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
}

.notosans-bold-onyx-28px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
}

.notosans-bold-paprika-20px {
    color: var(--paprika);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-l);
    font-style: normal;
    font-weight: 700;
}

.notosans-semi-bold-black-14px {
    color: var(--black);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 600;
}

.notosans-semi-bold-boulder-14px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 600;
}

.notosans-medium-paprika-14px {
    color: var(--paprika);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 500;
}

.notosans-semi-bold-boulder-12px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 600;
}

.notosans-medium-onyx-16px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.notosans-semi-bold-boulder-16px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 600;
}

.notosans-medium-boulder-16px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 500;
}

.notosans-mediumitalic-medium-onyx-16px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans-mediumitalic);
    font-size: var(--font-size-m);
    font-style: italic;
    font-weight: 500;
}

.notosans-normal-white-16px {
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.notosans-normal-black-14px {
    color: var(--black);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.notosans-normal-onyx-14px {
    /* color: var(--onyx); */
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 400;
}

.notosans-semi-bold-black-16px {
    color: var(--black);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 600;
}

.notosans-bold-black-32px {
    color: var(--black);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
}

.notosans-normal-black-16px {
    color: var(--black);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 400;
}

.notosans-bold-onyx-36px {
    color: var(--onyx);
    font-family: var(--font-family-noto_sans);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
}

.notosans-bold-paprika-36px {
    color: var(--paprika);
    font-family: var(--font-family-noto_sans);
    font-size: 36px;
    font-style: normal;
    font-weight: 700;
}

.notosans-semi-bold-paprika-12px {
    color: var(--paprika);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 600;
}

.notosans-semi-bold-cultured-pearl-14px {
    /* color: var(--cultured-pearl); */
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 600;
}

.notosans-normal-boulder-12px {
    color: var(--boulder);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xs);
    font-style: normal;
    font-weight: 400;
}

.notosans-bold-paprika-16px {
    color: var(--paprika);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-m);
    font-style: normal;
    font-weight: 700;
}