/*
SVF mask
https://isotropic.co/tool/hex-color-to-css-filter/
 */

:root {
    --body-fg: var(--black);
    --body-bg: var(--white);
    --body-font-size: 16px;

    --keeleklikk1: #CF4374;
    --keeleklikk2: #8A2347;
    --keeleklikk3: rgba(207, 67, 116, 0.2);
    --keeletee1: #007C91;
    --keeletee2: #005766;
    --keeletee3: rgba(0, 87, 102, 0.2);
    --keelelend1: #FF6B00;
    --keelelend2: #B85814;
    --keelelend3: #A26C5B;
    --keelelend4: #CC5600;
    --keelelend5: rgba(255, 107, 0, 0.2);
    --gray0: #E8E9F1;
    --gray01: #F3F3F3;
    --gray1: #D3D3D3;
    --gray2: #A8A8A8;
    --gray3: #767676;
    --gray4: #4C4C4C;
    --gray-footer: #F5F5F5;
    --gray-footer-border: #E6E6E6;
    --white: #fff;
    --black: #111111;
    --high-contrast-fg:#ff0;
    --high-contrast-bg:#000;
    --high-contrast-filter: invert(80%) sepia(99%) saturate(4884%) hue-rotate(359deg) brightness(103%) contrast(109%);
    --gray-filter: invert(50%) sepia(4%) saturate(21%) hue-rotate(324deg) brightness(90%) contrast(85%);
    --error-filter: invert(10%) sepia(45%) saturate(7009%) hue-rotate(354deg) brightness(110%) contrast(115%);
    --white-filter: invert(93%) sepia(0%) saturate(2%) hue-rotate(40deg) brightness(108%) contrast(101%);
    --page-max-width:1400px;

    --error: #E60000;
    --error-bg: rgba(155,0,0,.1);
    --correct: #2B8C62;
    --correct-bg: rgba(43,140,98,0.1);
    --sinine: #6A70A4;
    --check-conrast-svg: url("/assets/img/linnuke.svg");
    --border-radius: 10px;
    --border-radius-small: 7px;
    --control-bg: rgba(255,255,255,0);
    --control-border:var(--gray1);
    --placeholder: var(--gray2);
    --control-fg: var(--gray3);

    --welcome-bg: #F5F5F5;
    --submenu-bg:#8f6382;
    --submenu-fg: #ffffff;
    --chapter-bg: #dbe2ed;
    --chapter-fg: #7b869a;
    --lesson-fg: #848484;
    --lesson-bg: #FFFFFF;
    --tasktitle-fg: #848484;
    --tasktitle-bg: #FFFFFF;
    --task-fg: #303030;
    --task-bg: #FFFFFF;
    --scrollbar-bg: #ffffff;
    --scrollbar-border:#edece1;
    --scrollbar-thumb:#e3e5e9;
    --link-fg: #3f7794;
    --volume: #E8E9F1;
    --volume-hover: #C9CBDE;
    --course-title: #636893;
    --img-width: 250px;
}


@media screen and (min-width: 1600px), screen and (min-device-width: 1600px) {
    :root {
        --body-font-size: 21px;
        --img-width: 300px;
    }
}

@media screen and (max-width: 1600px), screen and (max-device-width: 1600px) {
    :root {
        --body-font-size: 16px;
        --img-width: 250px;
    }
}

@media screen and (max-width: 750px), screen and (max-device-width: 750px) {
    :root {
        --body-font-size: 14px;
        --img-width: 150px;
    }
}