
#head>#menu_toggle {
    /*font-size: 3.5em;*/
    /*width: 1em;*/
    /*padding: .1em;*/
}

#head>#user_toggle {
    display: grid;
    grid-template:
            "1 icon 2" 2.5rem
            "1 name 2" 1rem
            / .5rem 2.5rem .5rem;
    height: 3.5rem;
}

#head>#user_toggle>.pi {
    font-size: 2.5rem;
    grid-area: icon;
    font-weight: lighter;
}

#head>#user_toggle>.name {
    /*position: relative;*/
    /*left: -.75rem;*/
    font-size: 1rem;
    grid-area: name;
}

#head>#menu_toggle:hover {
    color: var(--header-color-hover);
}

#head>#user_toggle:hover {
    color: var(--header-color-hover);
}

#head>#title {
    display: inline;
    height: 3.75rem;
}

#title>#title1 {
    display: inline-block;
    font-weight: bold;
    height: 3.25rem;
}

#title>#title2 {
    position: absolute;
    left: 1rem;
    top: 2.5rem;
    font-size: 1.37rem;
    font-weight: bold;
    font-style: italic;
}

#title1>img {
    height: 100%;
}

#head>#loading {
    z-index: 8;
    grid-row: 2;
    grid-column-start: 1;
    grid-column-end: 3;
    width: 100%;
}

@keyframes moveLine {
    0% { transform: translateX(-10%); }
    50% { transform: translateX(90%); }
    100% { transform: translateX(-10%); }
}

#head>#loading>line {
    stroke: var(--loading-color);
    stroke-width: 2px;
    animation: moveLine 4s linear infinite;
}
