header
{
    position: fixed;

    top: 0;
    left: 0;
    width: 100%;
    height: 10%;

    background: left / contain no-repeat white url("../images/logo.png");

    box-shadow: 0 1px 1px black;

    z-index: 98;

    & > more
    {
        display: table;

        position: absolute;
        
        top: 0;
        left: 15%;
        height: 100%;

        & > nav
        {
            display: table-cell;
            vertical-align: middle;
            text-align: center;

            width: max-content;

            border-bottom: 3px solid transparent;

            cursor: pointer;

            padding-left: 1vw;
            padding-right: 1vw;

            font-size: 0.9em;

            &[selected]
            {
                color: var(--color-green);
                border-bottom: 3px solid var(--color-green);
            }

            &:hover
            {
                color: var(--color-purple);
                border-bottom: 3px solid var(--color-purple);
            }

            & > img
            {
                height: 0.8em;
            }
        }
    }

    & > menu
    {
        display: table;

        position: absolute;
        
        top: 0;
        right: 0;
        height: 100%;

        font-size: 1.1em;

        & > nav
        {
            display: table-cell;
            vertical-align: middle;
            text-align: center;

            width: 10vw;

            border-bottom: 3px solid transparent;

            cursor: pointer;

            &[selected]
            {
                color: var(--color-green);
                border-bottom: 3px solid var(--color-green);
            }

            &:hover
            {
                color: var(--color-purple);
                border-bottom: 3px solid var(--color-purple);
            }
        }
    }
}