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;
    /* experimenting with a smaller font */
    /* font: 1.4rem/1.8em sans-serif; */
    font: 21px/1.5em sans-serif;
}

.icon-list img {
    width: 30px;
    height: 30px;

    /* The icon should be located where the bullet would be. */
    position: relative;
    left: -30px;
    /*
     * 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: 23px;
    height: 23px;
}

.icon-list.high-res img {
    width: 64px;
    height: 64px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.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);
    }
}