.around-the-web {
    @include noselect;

    text-align: center;
    margin-top: -15px;
    padding-left: 0;

    margin-bottom: 1.5em;
    @media (min-width: $screen-xs-min) { margin-bottom: 2em; }

    @media (min-width: $screen-sm-min) {
        text-align: left;
        padding-left: 0;
        margin: 2em 0;
    }

    li {
        list-style-type: none;
        margin-bottom: .5em;
        display: inline;
        white-space: nowrap;  // no line wrapping

        @media (min-width: $screen-sm-min) {
            display: block;
        }

        a {
            padding: 10px 2px;

            @media (min-width: $screen-xs-min) {
                padding: 10px 6px;
            }

            color: $color-text;
            @media (prefers-color-scheme: dark) { color: $dm-color-text; }
            text-decoration: none!important;
            @include transition-duration(0.3s);

            @media (min-width: $screen-sm-min) {
                padding-left: 0;
            }

            &:hover {
                color: $color-highlight;
                @media (prefers-color-scheme: dark) { color: $dm-color-highlight; }

                img {
                    opacity: .75;

                    // Apply a grayscale filter to soften the colors on image hover.
                    // BUT don't apply this to the GitHub logo, which has special
                    // treatment (it is already a grayscale image, and is color
                    // inverted in dark mode, see below).
                    &:not(.github) {
                        -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
                                filter: grayscale(50%);
                    }
                }
            }

            &:active {
                color: $color-link;
                @media (prefers-color-scheme: dark) { color: $dm-color-link; }
            }
        }

        /* unused:
        i {  // font awesome icons
            vertical-align: middle;
            font-size: 36px;
            width: 36px;
        }
        */

        img {  // icons
            @include transition-duration(.3s);
            vertical-align: middle;
            width: 36px;
            height: 36px;

            @media (min-width: $screen-sm-min) {
                width: 28px;
                height: 28px;
            }
            @media (min-width: $screen-md-min) {
                width: 36px;
                height: 36px;
            }

            // The GitHub logo is a black circle with white details. This is very
            // low contrast when in dark mode, so invert the colors.
            &.github {
                @media (prefers-color-scheme: dark) { filter: invert(0.85); }
            }
        }

        span {
            display: none;
            font-size: 16px;
            font-weight: 300;
            vertical-align: middle;
            padding-left: .5em;

            @media (min-width: $screen-sm-min) { display: unset; }
            @media (min-width: $screen-md-min) { font-size: 24px; }
        }
    }
}
