@charset "UTF-8";

@import "colors.css";

body .header {
    position: sticky;
    top: 0;

    transition: top 0.5s;

    background-color: var(--color-pixel-secondary);
    box-shadow: 0 2px 15px 0 var(--color-header-shadow);
}

body .header #brand.container {
    min-height: 80px;
    padding: 10px 0;
}

body .header #brand.container .logo {
    float: left;
}

body .header #brand.container .logo img {
    max-height: 70px;
    max-width: 70px;
}

/* - - - NAVBAR - - - */

body .header #nav.container {
    display: flex;
    justify-content: space-between;
}

body .header #nav.container .container {
    margin: unset;
}

body .header #nav.container #nav-left.container {
    display: flex;
}

body .header #nav.container #nav-right.container {
    display: flex;
}

body .header #nav.container .container .navbar-element {
    width: fit-content;

    align-content: center;

    padding: 0.75rem;
    border-radius: 0.5rem;

    margin: 0 0.25rem;

    transition: background-color 0.2s;
}

body .header #nav.container .container a.navbar-element {
    color: inherit;
    text-decoration: inherit;
}

body .header #nav.container .container .navbar-element.navbar-icon {
    padding: 0;

    height: 48px;
    width: 48px;
}

body .header #nav.container .container .navbar-element.navbar-icon .icon {
    font-size: 32px;
    display: flex;
    justify-content: center;
}

body .header #nav.container .container .navbar-element:hover {
    cursor: pointer;
}

body .header #nav.container .container .navbar-element.navbar-icon .icon:hover {
    color: var(--color-pixel-primary);
    transition: color 0.1s;
}

body .header #nav.container .container .navbar-element:hover:not(:has(.icon)) {
    background-color: var(--color-pixel-primary);
    transition: background-color 0.1s;
}

body .header #nav.container #nav-left.container .navbar-element:first-child {
    margin-left: 0.75rem;
}

body .header #nav.container #nav-right.container .navbar-element:last-child {
    margin-right: 0.75rem;
}