<?php echo <<<CSS

.toplinks {
    position: %%pinning%%;
    font-size: 1.4rem;
    top: 0.8rem;
    right: 1rem;
    z-index: 101;
}
.toplinks li {
    display: inline;
}
.toplinks li:not(:last-child)::after {
    content: " •";
}

.toplinks li a {
    color: %%toplinks_color%%;
}
.toplinks li a:visited {
    color: %%toplinks_visited_color%%;
}
.toplinks li a:hover {
    color: %%edit_bg%%; /* only color variable guaranteed to be white! */
}

.auto-section {
    position: %%pinning%%;
    font-size: 1.1rem;
    top: 3.5rem;
    right: .9rem;
    text-align: right;
    padding-left: 5rem;
    z-index: 99;
}
.auto-section-title {
    font-weight: 600;
    font-size: 1.3rem;
    color: %%toplinks_color%%;
    padding: 0.25rem 0 0.33rem;
}
.auto-section-links a {
    display: block;
}


/* menu switches here */
@media screen and (max-width: 920px) {

    .toplinks {
        top: 6.5rem;
        right: auto;
        margin: 0 5%;
        width: 100%;
        text-align: center;
        font-size: 1.5rem;
        max-width: 90%;
    }

    .auto-section {
        position: relative;
        text-align: left;
        top: 2rem;
        right: auto;
        padding: 0;
        margin: 2rem auto 4rem;
        width: 95%;
        border-top: .1rem %%h5_color%% dashed;
        border-bottom: .1rem %%h5_color%% dashed;
        padding: 0.25rem 0 1rem;
    }
    .auto-section-links, #pagelink-totop {
        display: inline;
    }
    .auto-section-links a {
        display: inline;
    }
    .auto-section-links a:not(:last-of-type)::after {
        content: " •";
    }
}


@media screen and (max-width: 800px) {
    .toplinks {
        top: 6.75rem;
    }
}


CSS;
?>