:root {
    --color-main: #111;
    --color-main-bright: #aaa;
    
    --color-1: color-mix(in srgb, var(--color-main) 95%, var(--color-main-bright));
    --color-2: color-mix(in srgb, var(--color-main) 75%, var(--color-main-bright));
    --color-3: color-mix(in srgb, var(--color-main) 50%, var(--color-main-bright));
    --color-4: color-mix(in srgb, var(--color-main) 20%, var(--color-main-bright));
    --color-5: color-mix(in srgb, var(--color-main) 0%, var(--color-main-bright));
}

* {
    box-sizing: border-box;
}

::selection {
    background: var(--color-main-bright);
    color: inherit;
}

/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color-1); 
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color-2); 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color-3); 
}

body {
    font-family: 'Titillium Web', sans-serif;
    color: white;
    background-color: var(--color-main);
    transition: 0.3s ease-in-out background-color;
    margin: 0 auto;
}

#wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    max-width: 1180px;
}

@media (max-width: 960px) {
    #wrapper {
        position: static;
        transform: none;
        margin: 50px auto;
    }
}

a {
    text-decoration: none;
    color: white;
}