:root {
    --main-main-color: #1e1e1e;
    --main-sub-color: #2e2e2e;
    --main-sub2-color: #2f2f2f;
    --main-border-color: #1c1c1c;
    --main-hover-color: #2e2e2e;
    --main-accent-color: #1c3c3c;

    --main-text-color: #F6F6F6;
    --sub-text-color: #C6C6C6;
    --sub2-text-color: #C6C6C690;

    --header-color: #242729;
    --sub-header-color: #1C1A1F;
    
    --button-color: #5c2c2c20;
    --button-color-accent: #5c2c2c;
    --logo-color: #Ae5e5e;
}

@font-face {
    font-family: 'Jorick'; 
    src:url("../font/Jorick.8513e232bbf5.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Tektur'; 
    src:url("../font/Tektur.2f6dab34aeb5.woff2") format('woff2');
    font-weight: normal;
    font-style: normal;
}
h1, h2, h3, a {font-family: 'Jorick'; color: var(--main-text-color);}
/* Main textex */
span {font-family: 'Tektur'; font-size: 14px; color: var(--sub-text-color);} 
/* sub textex and other staff */
p {font-family: 'Tektur'; color: var(--sub-text-color);}
li {text-decoration: none; list-style-type: none;}

* {margin: 0; padding: 0; border: none; text-decoration: none;}
/* html {background: #121212;} */

.disabled {opacity: 0.5; text-decoration: line-through; pointer-events: none; cursor: default;}

/* group colors */
.nickname-user, #header .name-company span, .button-header {color: var(--sub-text-color);}

/* Main */
#header {display: flex; justify-content: space-between; align-items: center; background: var(--main-main-color); height: 6vh; min-height: 50px; margin-bottom: 1.5%; padding: 0 10px; gap: 6px;}
#header .name-company {display: flex;}
#header .name-company span {font-size: 42px; font-weight: 800; user-select: none; font-family: 'Jorick';}
#header .name-company span:first-child {color: var(--logo-color);}
#header .logo {width: 42px; height: 42px; fill: var(--logo-color);}
#header .block-logo {padding-left: 10px; display: flex; gap: 4px; align-items: center;}
#header * {user-select: none;}

.block-nav {display: flex; gap: 1px;}
.button-header {font-size: 30px; border-radius: 2px; background: transparent; padding: 8px 20px; transition: background 0.3s ease; font-weight: 800; user-select: none;}
.button-header:hover:not(.disabled) {background: var(--button-color-accent);}

.block-sub-menu {background: #12121240; min-width: 215px; min-height: 40px; border-radius: 4px; display: flex; justify-content: space-between; align-items: center; padding: 0 8px; gap: 4px; transition: background 0.3s ease;}
.block-sub-menu {display: flex; justify-content: center; align-items: center; font-size: 20px;}
.block-sub-menu > div { width: 100%; display: flex; justify-content: center; align-items: center; height: 100%;}
.block-sub-menu:hover:has(.nickname-user:hover) {background: var(--button-color-accent);}
.user-icon {width: 36px; height: 36px; min-width: 36px; min-height: 36px; fill: #FeFeFe90; background: #12121290; border-radius: 14px; padding: 1px; overflow: hidden; object-fit: cover;}
.nickname-user {text-align: center; width: 100%;}
@media (max-width: 1180px) {
    #header .name-company {font-size: 38px;}
    #header .logo {width: 38px; height: 38px;}
    .button-header {font-size: 24px; padding: 8px 16px;}
}

@media (max-width: 1024px) {
    #header .name-company {font-size: 34px;}
    #header .logo {width: 32px; height: 32px;}
    .button-header {font-size: 24px; padding: 8px 12px;}
}