/* Organization */

header.bar {
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     stretch;
    justify-content: flex-start;
}

header.bar > :first-child {
    /* Space */
    padding: 0;
    margin:  0.5rem;

    /* Layout */
    display:         flex;
    align-items:     center;
    justify-content: center;

    /* Misc. */
    aspect-ratio: 1;
}

header.bar > :first-child .hamburger {
    /* Space */
    padding: 0.25rem;

    /* Position */
    position: relative;
    top: -10%;
}

header.bar h1 {
    /* Space */
    padding: 0;
    margin:  0;

    /* Layout */
    display:         flex;
    align-items:     center;
    justify-content: flex-start;
}

/* LIMIT H1 WIDTH, BE ONE LINE AND BE SCROLLABLE */

header.bar h1 {
    max-width:   45%;
    overflow:    auto;
    white-space: nowrap;
}

header.bar > .menu {
    /* Layout */
    flex: 1 1 auto;

    /* Layout */
    display:         flex;
    flex-flow:       row nowrap;
    align-items:     stretch;
    justify-content: flex-end;
}

header.bar > .menu > * {
    /* Space */
    padding: 0 1rem;

    /* Layout */
    align-content: center;
}

/* Font */

header.bar > :first-child {
    font-size: 1.5rem;
}

/* SPECIAL FOR HAMBURGER ICON */

header.bar > :first-child .hamburger {
    font-weight: bold;
}

header.bar h1 {
    font-size: 1.25rem;
}

header > .menu > * {
    font-stretch: condensed;
}

/* Theme */

header.bar > :first-child {
    /* Color */
    color:      #666;
    background: none;

    /* Border */
    border:        none;
    border-radius: 50%;
}

header.bar > :first-child:hover, header.bar > :first-child:active {
    background: #0001;
}

header.bar > .menu > * {
    color: #444;
}

header.bar > .menu > *:hover {
    background: #0001;
}

header.bar > .menu > *:active {
    filter: brightness(200%);
}

/* Animation */

header.bar > :first-child {
    transition: background 0.25s;
}

header.bar > .menu > * {
    transition: background 0.25s;
}