/* ============================================
 CSS VARIABLES FOR COLORS AND STYLING
 ============================================
 Змініть ці змінні для налаштування кольорів сайту
 ============================================ */


:root {
    /*  ============================================ Colors ============================================ */
    --color-bg-page: rgb(18 16 49);
    /* Header */
    --color-bg-header: #420a3d;
    --color-border-header: #faff03;
    /* Footer */
    --color-bg-footer: linear-gradient(90deg, #420a3d, #030025);
    --color-border-footer: #030025;
    --color-text-footer: #b0d1c4;
    /* Navigation */
    --color-bg-nav: #420a3d;
    --color-bg-nav-mobile: #420a3d;
    --color-bg-nav-link: #030025;
    --color-icon-menu: #ffffff;
    --color-text-nav: #ffffff;
    --color-text-nav-hover: #224233;
    --color-text-nav-mobile: #ffffff;
    --color-text-nav-mobile-hover: #224233;
    /* Text */
    --color-text: #ffffff;
    /* Buttons and Banner*/
    --color-bg-btn-header: #faff03;
    --color-bg-btn-primary: #faff03;
    --color-border-btn-header: #224233;
    --color-border-btn-primary: #224233;
    --color-text-bonus: #ffffff;
    --color-text-bonus-subtitle: #000000;
    --color-text-btn-primary: #000000;
    --color-text-btn-header:#ffffff;
    --color-bg-banner: #faff03;
    /* for classic large banners */
    --banner-position-desktop: top right;
    --banner-position-mobile: top right 10%;
    /* can be also used for hero (template1) */
    --banner-height-desktop: 500px;
    --banner-height-mobile: 500px;

    /* Other */
    --color-border-card: 3px solid #faff03;
    --color-bg-card:  linear-gradient(90deg, #420a3d, #030025);
    --color-border-table: #faff03;
    --color-bg-table-row: hsla(0, 0%, 50.2%, 0.0705882353);
    --color-bg-section: linear-gradient(90deg, #420a3d, #030025);
    --color-border-section: rgba(0, 0, 0, 0.1);

    /*  ============================================ Optional ============================================ */
    --height-header: 40px;
    --color-outline-focus: #bfc8dc;
    --color-tap-highlight: #fff0;
    --color-scrollbar-thumb: rgba(255, 255, 255, 0.6);

    /* lang menu */
    --color-bg-lang-btn: #31313100;
    --color-bg-lang-menu: #313131;
    --color-bg-lang-option-hover: #3d3d3d;

    /* Radius tokens */
    --radius-btn: 12px;
    --radius-nav: 12px;
    --radius-game-card: 16px;
    --radius-banner-mobile: 16px;
    --radius-banner-desktop: 16px;
    --radius-bonus-banner: 16px;
    --radius-table-cell: 10px;
    --radius-section: 16px;
    --radius-author-image: 50%;
    --radius-lang-menu: 8px;

    /* Typography tokens */
    --font-size-base: 1rem;
    --font-size-h1: 35px;
    --font-size-h2: 25px;
    --font-size-h3: 22px;
    --font-size-h4: 20px;
    --font-size-h1-mobile: 30px;
    --font-size-h2-mobile: 25px;
    --font-size-h3-mobile: 20px;
    --font-size-h4-mobile: 18px;
    --font-size-bonus: 35px;
    --font-size-bonus-mobile: 30px;
    --font-size-bonus-subtitle: 25px;
    --font-size-menu-item: 16px;
    --font-size-lang: 14px;
    --font-size-footer: 16px;
    --font-size-card-title: 14px;
    --font-size-card-btn: 14px;
    --font-size-btn-primary: 1.5rem;
    --font-size-table: 14px;
    --font-size-subtitle: 18px;

    /* Font weight tokens */
    --fw-body: 400;
    --fw-h1: 900;
    --fw-h2: 900;
    --fw-h3: 900;
    --fw-h4: 700;
    --fw-btn: 700;
    --fw-menu-item: 700;
    --fw-strong: 700;
    --fw-link-footer: 700;
    --fw-bonus: 900;
    --fw-bonus-subtitle: 900;
    --fw-table: 500;
    --fw-card-title: 500;

    /* Text transform tokens */
    --text-transform-uppercase: uppercase;
    --text-transform-none: none;
    --text-transform-button-primary: none;
    --text-transform-button-header: none;
    --text-transform-bonus-subtitle: none;
    --text-transform-bonus: none;
    --text-transform-menu: none;
}

.compoff-footer__pays-item {
    background: var(--color-bg-header);
    border-radius: var(--radius-nav);
}

.category__box-item {
    background:var(--color-bg-banner);
}


.category__box-item p {
    color:var(--color-bg-nav);
}

.description__title {
    font-size: var(--font-size-bonus-subtitle);
    line-height: 1;
    font-weight: var(--fw-bonus-subtitle);
    text-align: center;
    min-height: 25px;
    color: var(--color-text-bonus-subtitle);
    width: -moz-fit-content;
    width: fit-content;
    margin: 0 auto;
    display: flex;
    align-items: center;
    font-style: normal;
    justify-content: center;
    text-transform: var(--text-transform-bonus-subtitle);
    background: var(--color-bg-btn-primary);
    border-radius: var(--radius-bonus-banner);
    padding: 10px;
}

.e-con.e-grid, .e-con.e-grid > .e-con-inner {
    justify-content: space-between;
}

.description__detail,
.description h1 {
        text-shadow: 2px 2px 5px #000, 4px 4px 10px #000, 6px 6px 15px #000;
    }