#menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    /* width: responsive */
    /* box-sizing: responsive */

    display: flex;
    flex-direction: column;

    /* padding: responsive */
    background: var(--background-color-menu);
    font-family: var(--special-font);
    text-transform: uppercase;
}
#menu-toggle {
    float: right;
    font-size: 120%;
}
#menu-content {
    flex-grow: 1;

    display: flex;
    flex-direction: column;

    margin-top: 20pt;
}

#menu #logo img {
    width: 140pt;
    margin-left: -10pt;
    border: 1px solid #8888;
    border-radius: 50%;
}
#menu #logo {
    color: var(--text-emph-color);
    font-size: 120%;
    font-weight: bold;
}

#menu-content > a {
    display: block;
    /* padding: responsive */
    border-bottom: 1px solid #7F7F7F33
}

#menu #social {
    margin-top: 20pt;
    /* font-size: responsive */
}

#menu #copyright {
    flex-grow: 1;
    position: relative;
    min-height: 60pt;
}
#menu #copyright div {
    position: absolute;
    bottom: 0;

    font-size: 70%;
    opacity: 60%;
}