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

    --main-header-top-height: 56px;
    --main-header-height-single: 60px;
    --sidebar-width: 240px;
    --sidebar-width-expanded: 90px;
    --main-header-bottom-height: 44px;
    --main-header-height: calc(var(--main-header-top-height) + var(--main-header-bottom-height));
    --header-logo-height: 35px;

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

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

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

    --radius: 16px;
    --radius-big: 24px;

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

    --font-biggest: 40px;
    --font-bigger: 32px;
    --font-big: 24px;
    --font-medium: 16px;
    --font-standard: 14px;
    --font-small: 12px;

    --button-small: 24px;
    --button-medium: 32px;
    --button-large: 40px;

    --field-small: 34px;
    --field-standard: 40px;

    --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;

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

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

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

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

    --radius: 14px;
    --radius-big: 22px;

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

    --bottom-nav-height: 55px;

    --content-size: calc(100dvw - var(--gap) * 2);
    --game-grid-count: 5;
    --font-biggest: 32px;
    --font-bigger: 24px;
    --font-big: 18px;

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