xkcd: Wide screen layout by rybak

/* ==UserStyle==
@name           xkcd: Wide screen layout
@namespace      github.com/rybak
@description    An opinionated user style to make reading XKCD on a wide screen more comfortable
@author         Andrei Rybak
@version        2
==/UserStyle== */
@-moz-document domain("xkcd.com") {
    :root {
        --newsWidth: 34em;
        --newsHeight: 11em;
    }

    @media screen and (max-width: 1963px) {
        :root {
            --newsWidth: 34em;
            --newsHeight: 10.5em;
        }
    }
    @media screen and (max-width: 1835px) {
        :root {
            --newsWidth: 31em;
            --newsHeight: 10.5em;
        }
    }

    @media screen and (max-width: 1707px) {
        :root {
            --newsWidth: 27em;
            --newsHeight: 12em;
        }
    }
    @media screen and (max-width: 1622px) {
        :root {
            --newsWidth: 24em;
            --newsHeight: 13.5em;
        }
    }
    @media screen and (max-width: 1366px) {
        :root {
            --newsWidth: 16.5em;
            --newsHeight: 18.3em;
        }
    }
    @media screen and (max-width: 1280px) {
        :root {
            --newsWidth: 14em;
            --newsHeight: 19.5em;
        }
    }
    /* hide bad & unneeded */
    #masthead {
        display: none;
    }

    /* move bad, but needed off to the side */
    #topRight,
    #bgRight {
        position: fixed;
        top: 1em;
        right: 1em;
        height: var(--newsHeight);
        width: var(--newsWidth);
    }

    /* re-style what's left over to better fit the width of the central column */
    #topLeft {
        width: 780px;
        padding: 10px;
    }

    #bgLeft {
        width: 777px;
    }

    /* Element | https://xkcd.com/ */
    #topLeft > ul:nth-child(1) {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px 7px;
        padding: 0;
    }

    #topLeft a {
        font-size: 16px;
    }
}