:root {
    --main-main-color: #1e1e1e;
    --main-sub-color: #282828;
    --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: #5c2c2c;
    --button-hover-color: #8c2c2c;
    --shadow: #101010;
}

@font-face {
    font-family: 'Jorick'; 
    src:url('../font/Jorick.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Tektur'; 
    src:url('../font/Tektur.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;}

/* Main */
#header {display: flex; justify-content: center; align-items: center; background: var(--main-main-color); height: 6vh; min-height: 50px; margin-bottom: 1.5%; padding-right: 40px;}
#header > .name-company {display: flex; user-select: none; font-size: 40px; margin-right: 10px; text-shadow: 2px 2px 4px #101010; padding-right: 40px;}
.buttons-h {display: flex; gap: 10px;}
.button-h {font-size: 22px; border-radius: 4px; background: var(--button-color); text-shadow: 1px 1px 2px #101010; box-shadow: 0px 2px 2px #101010; margin-top: 4px; transition: background 0.3s ease;}
.button-h > a {display: flex; align-items: center; padding: 6px 12px; color: var(--sub-text-color); user-select: none; }
.button-h > a:not([href]) {text-decoration-line: line-through; opacity: 0.5;}
.button-h:has(a[href]):hover {background: var(--button-hover-color);}