@import url('/fonts/comissioner.ttf');

@media (prefers-color-scheme: light) {
    :root {
        --background-above-1       : #fff;
        --background-above         : #fff6f6;
        --background               : #e8dada;
        --background-below         : #d7c5c5;
        --background-inverse       : #221e1e;
        --background-inverse-dark  : #120f0f;
        --node-background-important: #c3eac3;
        --node-background-completed: #b0c0b0;
        --node-background          : #bdb;
        --connection               : #b2b7b2;
        --connection-completed     : #d1d1d1;
        --text                     : #151313;
        --text-hover               : #463e3e;
        --text-active              : #0e0e0e;
        --text-inverse-above       : #fff;
        --text-inverse             : #efefef;
        --text-inverse-below       : #d0d0d0;
        --text-red                 : #f8a2a2;
        --text-red-hover           : #ffbcbc;
        --text-red-active          : #e69191;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-above-1: #322d2d;
        --background-above  : #2b2525;
        --background        : #221e1e;
        --background-below  : #121010;
        --node-background   : #221e1e;
        --text              : #e6e6e6;
        --text-hover        : #fff;
        --text-active       : #d0d0d0;
        --text-inverse      : 'dark';
        --red-light-1       : #dc4343;
        --red-light         : #bf3737;
        --red               : #a43333;
        --red-dark          : #8d2a2a;
    }
}

@keyframes page-background-gradient {
    25% {
        left: -350%;
        top : 0%;
    }

    50% {
        left: 0%;
        top : 0%;
    }

    75% {
        left: 0%;
        top : -350%;
    }

    to {
        left: -350%;
        top : -350%;
    }
}

:root {
    --link       : #3c76ff;
    --link-hover : #6594ff;
    --link-active: #3064dd;
}

* {
    text-decoration: none;
    outline        : none;
    border         : none;
    color          : var(--text);
    font-family    : 'Commissioner', sans-serif;
    transition     : 0.1s ease-out;
}

.unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select  : none;
    -khtml-user-select   : none;
    -moz-user-select     : none;
    -ms-user-select      : none;
    user-select          : none;
}

a {
    color: var(--link);
}

a:hover {
    color: var(--link-hover);
}

a:active {
    color     : var(--link-active);
    transition: unset;
}

body {
    height          : 100vh;
    margin          : 0;
    overflow        : hidden;
    background-color: var(--background);
}

body>div.background {
    z-index                  : -50000;
    left                     : -350%;
    top                      : -350%;
    width                    : 500%;
    height                   : 500%;
    position                 : absolute;
    filter                   : blur(200px);
    animation-duration       : 15s;
    animation-name           : page-background-gradient;
    animation-iteration-count: infinite;
    background-repeat        : no-repeat;
    animation-timing-function: linear;
    background-image         : radial-gradient(circle, var(--background-above) 0%, rgba(0, 0, 0, 0) 100%);
}

aside {
    z-index    : 500;
    grid-column: 1/ 4;
    grid-row   : 2;
    overflow   : hidden;
}

header {
    z-index       : 5000;
    position      : absolute;
    display       : flex;
    flex-direction: column;
    box-shadow    : 2px 0 5px rgba(0, 0, 0, 0.3);
}

header>menu {
    margin          : unset;
    padding         : 20px;
    display         : flex;
    flex-direction  : column;
    flex-grow       : 1;
    background-color: var(--background-light-1);
}

header>#account>button#login {
    z-index: 1500;
}

header>menu a {
    margin-bottom: 8px;
    display      : flex;
    align-items  : center;
}

header>menu a:last-child {
    margin-bottom: unset;
}

header>menu a svg {
    margin-right: 8px;
    height      : 1.2rem;
    position    : relative;
}

header>menu a:hover svg {
    margin-left : -5px;
    margin-right: 13px;
}

header>menu a svg path {
    fill: var(--text);
}

header>section {
    background-color: var(--background-light-1);
}

header :is(button, a[type="button"]) {
    width           : 100%;
    height          : 40px;
    display         : flex;
    justify-content : center;
    align-items     : center;
    cursor          : pointer;
    background-color: var(--red);
    transition      : unset;
}

header button {
    font-weight   : bold;
    text-transform: uppercase;
}

header :is(button, a[type="button"]):hover {
    background-color: var(--red-light);
}

header :is(button, a[type="button"]):active {
    background-color: var(--red-dark);
}

header>nav {
    margin-top    : auto;
    display       : flex;
    flex-direction: column;
}

main {
    z-index       : 1000;
    height        : 100%;
    display       : flex;
    flex-direction: column;
}

footer {
    z-index : 3000;
    position: absolute;
}