html {
    /*
     * The body does not span the entire viewport, so the background color must go in the `html`.
     * This difference in behavior is not visible normally, but appears to be triggered by the Dark Reader plugin for Firefox.
     */
    background-color: #fafafa;
}

body {
    margin: auto;

    /** I love me some easily-readable text. */
    max-width: 60ch;
    font: 1.4rem/1.8em sans-serif;
}

.icon-list img {
    width: 1.3em;
    height: 1.3em;

    /* The icon should be located where the bullet would be. */
    position: relative;
    left: -1.3em;
    /*
     * The text doesn't know that the image isn't actually there, so it must be re-aligned with a negative margin.
     * I don't move over the entire 1.3 em gap, because there needs to be space between the icon and text.
     */
    margin-right: -1em;
}

/* My webcomic icons are favicon rips (for now) and look bad at large sizes. */
.icon-list.low-res img {
    width: 1em;
    height: 1em;
}

.icon-list li {
    /* Vertically align the text w.r.t. the icon. This has the simultaneous effect of removing the list bullet. */
    display: flex;
    align-items: center;
}

@media (prefers-color-scheme: dark) {
    img.svg-icon {
        filter: invert(1);
    }
}