#layout.active #menu {
    left: var(--menu-width);
    width: var(--menu-width);
}

#layout.active .menu-link {
    left: var(--menu-width);
}

#menu {
    margin-left: calc(0px - var(--menu-width)); /* "#menu" width */
    width: var(--menu-width);
    overflow-x: hidden;
}

#menu .brand {
    font-size: 1.6em;
    margin: 0.5em 0;  
}

#menu .pure-menu {
    font-size: 1.35em;
}

a.pure-menu-link span {
    padding-left: 4px;
}

.copyright {
    margin-top: 2em;
    padding-top: 2em;
    padding-bottom: 1em;
    font-size: .8em;
}

ul.pagination {
    justify-content: center;
    align-items: center;
    display: flex;
    list-style-type: none;
    padding-inline-start: 0;
    padding-inline-end: 0;
}

ul.pagination a {
    justify-content: center;
    display: inline-flex;
    border-radius: 10px;
}

ul.pagination li {
    justify-content: center;
    font-size: 1.1em;
    font-weight: bold;
    margin: 1em;
}

ul.pagination a:hover, a:focus {
    background-color: #eee;
    text-decoration: none;
}

div.copyright-small {
    font-size: .76em;
    white-space: nowrap;
}

@media (min-width: 48em) {

    #layout {
        padding-left: var(--menu-width); /* left col width "#menu" */
    }
    #menu {
        left: var(--menu-width);
    }

    .menu-link {
        left: var(--menu-width);
    }

    #layout.active .menu-link {
        left: var(--menu-width);
    }
}

@media (max-width: 48em) {

    #layout.active {
        left: var(--menu-width);
    }
}

@media (min-width: 500px) {
    div.mobile{
        display: none;
    }
}

@media (max-width: 501px) {
    div.desktop{
        display: none;
    }
}