/* ----------------Import CSS Pages---------------- */
@import url('module/component/menu/header.css');
/* Page */
/* @import url('page/page.css'); */
@import url('page/p_home.css');
@import url('page/p_profile.css');
@import url('page/p_admin.css');
@import url('page/p_rules.css');
/* Module */
@import url('module/block/module_baseModify.css');

@import url('module/block/module_login_register.css');
@import url('module/block/module_profile.css');
/* ----------------________________---------------- */

@font-face {
    font-family: 'GCFont';
    src: url('../lang/font/Ubuntu-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* или block, fallback, optional */
}

:root {
    --c_main: #191919;
    --shadow: #000000;
    
    --c_text-main: #FFFFFF;
    --c_text-element: #FBCDFF;
    --c_text-main_side: #000000;
    --c_text-side: #818181;
    --c_text-side-light: #b9b9b9;

    --c_title: linear-gradient(180deg, #FF0000 0%, #AF0000 50%, #FF0000 100%);

    --cm_background: #070421;
    --cm_border: #3A1844;
    --cm_border_active: #ff73e1;

    --c_gold: linear-gradient(135deg, #CC7267 0%, #F5D275 25%, #CC7267 50%, #F5D275 70%);
    --c_g_min-0: #EFE77C;
    --c_g_min-1: #F2B404;
    --c_g_min-2: #AE6B02;

    --c_blue_0: #160C2D;
    --c_blue_1: #27439F;
    --c_blue_2: #4663C2;
    --c_blue_3: #4470FF;

    --c_purple_main: #120C1E;
    --c_purple_0: #32003F;
    --c_purple_1: #75009C;

    --c_red_0: #1F0000;
    --c_red_1: #FF0000;

    --c_rating-up: #37FF30;
    --c_rating-down: #FF002F;

    /* --block_role-color */
    /* user */
    --block_role-bg-colore-0: linear-gradient(135deg, #8F8F8F 0%, #C6C6C6 50%, #9A9A9A 100%);
    --block_role-f-colore-0: #4A4A4A;
    --block_role-text-colore-0: #000000;

    /* vip */
    --block_role-bg-colore-1: linear-gradient(180deg, #FBFF00 0%, #FFFEC9 50%, #FBFF00 100%);
    --block_role-f-colore-1: #FFBF00;
    --block_role-text-colore-1: #FF7700;
    --block_role-text-f-colore-1: #FFFFFF;

    /* premium */
    --block_role-bg-colore-2: radial-gradient(50.63% 54.71% at 50.61% 50%, #0DFF00 0%, #21A300 50%, #00550D 100%);
    --block_role-f-colore-2: #21A300;
    --block_role-text-colore-2: #0073FF;
    --block_role-text-f-colore-2: hsla(0, 0%, 100%, 0.85);

    /* diamond */
    --block_role-bg-colore-3: linear-gradient(179.6deg, #00CCFF 21.75%, #0051FF 95.09%);
    --block_role-f-colore-3: #34A8D3;
    --block_role-text-colore-3: #FFFFFF;
    --block_role-text-f-colore-3: #34A8D3;
    --block_role-text-s-colore-3: 0px 0px 3.4px #FF00FF;

    /* legenda */
    --block_role-bg-colore-4: radial-gradient(60.47% 50% at 50% 50%, #0400FF 0%, #BF00FF 12.98%, #0300B3 39.91%, #0300B3 60.1%, #6102CC 76.45%, #C003FF 76.46%, #030099 100%);
    --block_role-f-colore-4: linear-gradient(0deg, #5B0069 0%, #FFFFFF 100%);
    --block_role-text-colore-4: linear-gradient(180deg, #00B3FF 46.18%, #8100AC 52.35%, #FF00EA 53%, #1A00FF 57.22%, #00BFFF 66.31%);
    --block_role-text-f-colore-4: #ffffffe6;

    /* helper */
    --block_role-bg-colore-5: linear-gradient(226.32deg, #B300FF 6.47%, #13001B 93.88%);
    --block_role-f-colore-5: linear-gradient(224.05deg, #0C008B 6.11%, #00CCE2 95.96%);
    --block_role-text-colore-5: #F200FF;
    --block_role-text-s-colore-5: 0px 0px 4px #00CCE2;

    /* youtyber */
    --block_role-bg-colore-6: radial-gradient(50% 54.03% at 49.98% 50%, #EFE77C 0%, #F2B404 50%, #AE6B02 100%);
    --block_role-f-colore-6: radial-gradient(104.68% 111.65% at 50.62% 50%, #000000 0%, #FFFFFF 100%);
    --block_role-text-colore-6: #FFFFFF;
    --block_role-text-s-colore-6: 0px 2px 1.7px #000000;

    /* moder */
    --block_role-bg-colore-7: radial-gradient(50% 50% at 50% 50%, #FF9D00 16.35%, #E56B2A 70.68%, #FF8800 87.99%);
    --block_role-f-colore-7: linear-gradient(132.78deg, #FF2600 0%, #FFDD00 100%);
    --block_role-text-colore-7: #000000;
    --block_role-text-s-colore-7: 0px 0px 4.9px #FFFFFF;

    /* admin */
    --block_role-bg-colore-8: linear-gradient(180deg, #FF3434 0%, #950000 100%);
    --block_role-f-colore-8: linear-gradient(224.16deg, #B60000 9.56%, #000000 72.55%);
    --block_role-text-colore-8: #000000;

    /* grande-master */
    --block_role-bg-colore-9: linear-gradient(132.78deg, #000000 14.9%, #FF0000 24.99%, #000000 35.09%, #400000 53.84%, #800000 66.34%, #FF0000 78.84%, #000000 89.42%);
    --block_role-f-colore-9: #5D0000;
    --block_role-text-colore-9: linear-gradient(314.2deg, #FFBF08 18.71%, #C59C00 45.4%, #FFE674 49.71%, #F3BD00 56.59%, #FF9C00 77.54%);
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    background-color: var(--c_main);
    color: var(--c_text-main);

    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;

    &::-webkit-scrollbar {
        width: 16px;
    }
    &::-webkit-scrollbar-track {
        background: var(--cm_background);
        border: 2px solid var(--cm_border);
    }
    &::-webkit-scrollbar-thumb {
        background: #530000;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
    }
    &::-webkit-scrollbar-thumb:hover {
        background: #970404;
        border-radius: 8px;
        border: 4px solid transparent;
        background-clip: content-box;
    }
}
main {
    position: relative;
    width: 100%;
}