.sidebar {
    width: 12.5rem;
    vertical-align: top;
    float: left;
    clear: left;
    color: white;
}

@media all and (max-width: 60em) {
    /* Inline on narrow screens */
    .sidebar {
        float: none;
        width: auto;
    }
}

.sidebar a {
    color: white;
}

.sidebar__section {
    border: 2px solid var(--container-bg);
    border-radius: 8px;
    padding: 8px;
    margin: 6px 0;

    /*
     * Transparent gradient layers awkwardly go to "same color with zero alpha" to work
     * around a Safari quirk: https://css-tricks.com/thing-know-gradients-transparent-black/
     */
    background:
        linear-gradient(
            to bottom,
            var(--container-gradient-start) 0px,
            var(--container-gradient-end) 12px
        ),
        linear-gradient(
            to top,
            var(--container-gradient-start) 0px,
            var(--container-gradient-end) 12px
        ),
        var(--container-bg);
}

.sidebar__section-header {
    margin: 0 0 4px;
    border-bottom: 1px solid var(--container-secondary);
    padding-bottom: 4px;
    text-align: center;
}

.sidebar__section-body {
    margin: 0;
}