@import url(./proxima-nova.css);

:root {
    --font-family-base: 'Proxima Nova', sans-serif, Arial, Helvetica;

    --main-header-top-height: 56px;
    --main-header-height-single: 60px;
    --sidebar-width: 240px;
    --sidebar-width-expanded: 85px;
    --main-header-bottom-height: 44px;
    --main-header-height: calc(var(--main-header-top-height) + var(--main-header-bottom-height));
    --header-logo-height: 25px;
    --header-advent-calendar-logo-height: 28px;

    --pwa-banner-height: 75px;
    --top-banner-height: 75px;

    --main-banner-max-width: 1440px;
    --singleBannerHeight: 440px;
    --content-size: 1244px;
    --content-padding: calc((100dvw - var(--content-size)) / 2);

    --padding: 16px;
    --gap: 16px;

    --radius: 16px;
    --radius-big: calc(var(--radius) + 8px);

    --game-grid-count: 7;
    --game-item-ratio: 75%;

    --font-biggest: calc(var(--font-bigger) + 8px);
    --font-bigger: calc(var(--font-big) + 8px);
    --font-big: calc(var(--font-medium) + 8px);
    --font-medium: calc(var(--font-standard) + 2px);
    --font-standard: calc(var(--font-small) + 2px);
    --font-small: 12px;
    --font-biggest-line-height: 114;
    --font-bigger-line-height: 113;
    --font-big-line-height: 120;
    --font-medium-line-height: 117;
    --font-standard-line-height: 114;
    --font-small-line-height: 115;
    --button-small: 24px;
    --button-medium: calc(var(--button-small) + 8px);
    --button-large: calc(var(--button-medium) + 4px);

    --field-small: 34px;
    --field-standard: calc(var(--field-small) + 11px);

    --z-index-100: 100;
    --z-index-200: 200;
    --z-index-300: 300;
    --z-index-400: 400;
    --z-index-500: 500;
    --z-index-1000: 1000;
    --z-index-2000: 2000;
    --z-index-3000: 3000;
    --z-index-9999999999: 9999999999;

    --modal-xs: 340px;
    --modal-md: 710px;
}

html[device='smallDesktop']:root {
    --content-size: calc(100dvw - var(--gap) * 2);
    --game-grid-count: 5;
    --font-biggest: calc(var(--font-bigger) + 8px);
    --font-bigger: calc(var(--font-big) + 8px);
    --font-big: calc(var(--font-medium) + 4px);

    @media screen and (max-width: 960px) {
        --game-grid-count: 4;
    }
}

html[device='mobile']:root {
    --top-banner-height: 130px;

    --padding: 14px;
    --gap: 14px;

    --radius: 16px;
    --radius-big: calc(var(--radius) + 6px);

    --main-header-bottom-height: 0px;
    --header-logo-height: 15px;

    --bottom-nav-height: 55px;

    --content-size: calc(100dvw - var(--gap) * 2);
    --game-grid-count: 5;
    --font-biggest: calc(var(--font-bigger) + 8px);
    --font-bigger: calc(var(--font-big) + 6px);
    --font-big: calc(var(--font-medium) + 2px);

    --game-header-height: 40px;
}