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

* {
    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);
}

body {
    height    : 100vh;
    margin    : 0;
    overflow  : hidden;
    display   : flex;
    background: #fff;
}

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;
}

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