$primary-main-blue: #0088c6;
$primary-dark-blue: #225B75;

$secondary-main-blue: #2DB7BC;
$secondary-dark-blue: #308487;

$white: #FFFFFF;
$black: #000000;
$gray: #4B4B4B;
$light-gray: #c4c4c4;
$text-color: #4b4b4b;

:root {
    --primary: #{$secondary-main-blue};
    --primary-active: #{$secondary-dark-blue};
    --font-color-p-p1: #{$gray};
    --btn-font-color-disabled: lightgray;
    --btn-bg-disabled: rgba(255,255,255, 0.6);
    --base-size-factor: 1;
    --m14-card-height: 488.5vw;
    --m14-answer-height: 750vw;
    --resFactor: 1;
    --pxToVw: calc((100 / 1920) * var(--resFactor));
    --app-background-color:  radial-gradient(
                    53.75% 55.42% at 50% 50%,
                    #f7f7f8 6.54%,
                    #f5f6f7 34.5%,
                    #eaecec 67%,
                    #c9ccce 100%
    );
    --menu-slideleft:calc(-246vw * var(--pxToVw));
    --menu-transform:calc(246vw * var(--pxToVw));
    --menu-icon-size:calc(80vw * var(--pxToVw));
    --menu-item-gap:calc(-80vw * var(--pxToVw));
    --app-font-size-h1: calc(80vw * var(--pxToVw));
    --app-font-size-h2: calc(34vw * var(--pxToVw));
    --app-font-size-h3: calc(48vw * var(--pxToVw));
    --app-font-size-h4: calc(44vw * var(--pxToVw));
    --app-font-size-h5: calc(32vw * var(--pxToVw));
    --app-font-size-h6: calc(60vw * var(--pxToVw));
    --app-font-size-p: calc(22vw * var(--pxToVw));
    --app-font-size-p2: calc(24vw * var(--pxToVw));
}


@media screen and (orientation: landscape) and (width: 3840px) {
    :root {
        --primary: #{$primary-main-blue};
        --primary-active: #{$primary-dark-blue};
        --resFactor: 2;
        --pxToVw: calc((100 / 3840) * var(--resFactor));
        --app-font-size-h1: calc(65vw * var(--pxToVw));
        --app-font-size-h2: calc(30vw * var(--pxToVw));
        --app-font-size-h3: calc(30vw * var(--pxToVw));
        --app-font-size-h4: calc(23vw * var(--pxToVw));
        --app-font-size-h5: calc(23vw * var(--pxToVw));
        --app-font-size-p: calc(20vw * var(--pxToVw));
    }
}

@media screen and (orientation: portrait) and (width: 1280px) {
    :root {
        --pxToVw: calc((100 / 1280) * var(--resFactor));
    }
}

@media screen and (orientation: portrait) and (width: 2160px) {
    :root {
        --resFactor: 2;
        --pxToVw: calc((100 / 2160) * var(--resFactor));
        --app-font-size-h1: calc(40vw * var(--pxToVw));
        --app-font-size-h2: calc(17vw * var(--pxToVw));
        --app-font-size-h3: calc(24vw * var(--pxToVw));
        --app-font-size-h4: calc(22vw * var(--pxToVw));
        --app-font-size-h5: calc(16vw * var(--pxToVw));
        --app-font-size-h6: calc(30vw * var(--pxToVw));
        --app-font-size-p: calc(11vw * var(--pxToVw));
        --app-font-size-p2: calc(12vw * var(--pxToVw));
    }
}
@media screen and (orientation: portrait) and (width: 1080px) {
    :root {
        --pxToVw: calc((100 / 1080) * var(--resFactor));
    }
}

[data-theme="dark"] {
    --app-background-color: lightgray;
    --primary: black;
    --primary-active: lightgray;
    --font-color-p-p1: black;
    --btn-font-color-disabled: lightgray;
    --btn-bg-disabled: rgba(255,255,255, 0.4);
}

[data-fontsize="0"] {
    --base-size-factor: 1;
    --m14-card-height: 488.5vw;
    --m14-answer-height: 750vw;
}

[data-fontsize="1"] {
    --base-size-factor: 1.2;
    --m14-card-height: 559.25vw;
    --m14-answer-height: 850vw;
}

[data-fontsize="2"] {
    --base-size-factor: 1.4;
    --m14-card-height: 650vw;
    --m14-answer-height: 950vw;
}

/*
* === STYLES ===
*/
#app {
    font-family: 'ConduitITCStd', ConduitITCStd, Conduit-ITC, sans-serif;
    $app-fontsize: var(--app-font-size);
    background: var(--app-background-color);
    transition: all 0.3s linear;

    //button, .submenu-item
    .label {
        font-size: var(--button-font-size);
        transition: all 0.3s linear;
    }

    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, p, .p, .p1, .p2 {
        font-family: 'ConduitITCStd', ConduitITCStd, Conduit-ITC, sans-serif;
        font-weight: 600;
        transition: all 0.3s linear;
    }

    h1, .h1, h3, .h3 {  font-weight: 900; }
    h4, .h4 { font-weight: 100; }
    @media screen and (orientation: landscape) and (width: 3840px) {
        h1, .h1, h3, .h3, h4, .h4 {
            font-weight: 900;
        }
    }

    h1, .h1 {
        font-size: var(--app-font-size-h1);
    }

    h2, .h2 {
        font-size: var(--app-font-size-h2);
    }

    h3, .h3 {
        font-size: var(--app-font-size-h3);
    }

    h4, .h4 {
        font-size: var(--app-font-size-h4);
    }

    h5, .h5 {
        font-size: var(--app-font-size-h5);
    }

    h6, .h6 {
        color: var(--font-color-p-p1);
        font-size: calc(var(--app-font-size-h6) * var(--base-size-factor));
    }

    p, .p1 {
        font-size: calc(var(--app-font-size-p) * var(--base-size-factor));
    }.p1 {
             color: var(--font-color-p-p1);
         }
    .p2 {
        color: var(--font-color-p-p1);
        font-size: calc(var(--app-font-size-p2) * var(--base-size-factor));
    }

    .vue-slider-rail .vue-slider-mark-label {
        font-size: calc(var(--app-font-size-p2) * var(--base-size-factor));
    }

    ::-webkit-scrollbar {
        width: calc(20vw * var(--pxToVe));
    }

    ::-webkit-scrollbar-track {
        background: #{$light-gray};
    }

    ::-webkit-scrollbar-thumb {
        background: var(--primary);
    }

}