header {
    display: flex;

    justify-content: space-between;

    position: fixed;

    z-index: 500;
    bottom: 0;
    width: 100vw;
    max-height: 12vh;

    padding: 1rem 3rem;
}

header span, header p {
    color: var(--text-primary);
    mix-blend-mode: difference;
}
header .logo {
    width: 6rem;
    height: 6rem;

    border-radius: 50%;

    mix-blend-mode: difference;
}
header ul {
    display: flex;

    margin: 0;
    padding: 0;

    list-style-type: none;
}
header ul li {
    margin: 1rem;

    opacity: 0;
}
header ul li button {
    cursor: pointer;

    display: flex;
    flex-direction: row;

    justify-content: center;
    align-items: center;

    padding: 0 1rem;
    width: fit-content!important;

    position: relative;
    text-align: center;

    background-color: rgba(var(--bg-primary-rgb), 0.1);

    border: 2px solid rgba(var(--text-primary-rgb), 1);
    border-radius: 16px;

    transition: width 250ms;
}
header ul li button span {
    color: rgba(var(--header-li-item-color), 0.4);
    font-size: 2em;

    transition: transform 10ms;
}
header ul li button p {
    margin: 0;
}
header ul li button span i {
    color: rgba(var(--header-li-item-color), 1);
}
#header_user_avatar_icon {
    display: flex;

    justify-content: center;
}
#header_user_avatar_icon img {
    cursor: pointer;
    border-radius: 100%;
    height: 5rem;
    width: 5rem;
    transition: 0.3s ease-in-out;
}
#tooltip_header_account_text {
    opacity: 0;

    position: absolute;

    margin-top: 5rem;

    transition: opacity 250ms;
}
#header_user_avatar_icon:hover #tooltip_header_account_text {
    opacity: 1;
}

#header_user_window {
    display: none;
}