body {
    /* Body styling adapted from http://bettermotherfuckingwebsite.com/,
     * by Drew McConville and Gabe Hammersmith. */
    margin: 2em auto;
    max-width: 40em;
    /* the 1em padding on the left and right ensures that the text doesn't hit
     * the side of the browser window, even on tiny screens like phones. (or
     * normal computer browser windows when you resize them to phone-like
     * dimensions to test things. that works too.)
     */
    padding: 0 1em;
    line-height: 1.4;
    color: #333;
    /* gentler default background color */
    background-color: #e6e9fe;
    font-family: "Times New Roman", Times, serif;
}

.monotext {
    font-size: medium;
    font-family: monospace;
}

.desc {
    margin-top: 0.1em;
    margin-left: 2em;
}

.sb {
    font-weight: bold;
}

/* Based on https://stackoverflow.com/questions/11903773/add-space-between-li-elements/11903886#comment88753789_11903886. */
li:not(:last-child) {
    margin-bottom: 1em;
}

/* Remove ul/li indentation: from https://stackoverflow.com/a/12426634 */
ul,
li {
    list-style-type: none;
    list-style-position: inside;
    margin: 0;
    padding: 0;
}

li:first-child {
    margin-top: 1em;
}

.name {
    font-weight: bold;
}

.daterange {
    font-family: monospace;
    font-weight: bold;
    color: #606;
    font-size: 1.1em;
}
.daterange::before {
    content: "[";
}
.daterange::after {
    content: "]";
}

/* fancy button-like formatting for standard types of links -- for
 * papers, posters, code, slides, etc. This is kind of reinventing the wheel
 * but i don't wanna import some css library when i can just do it myself
 *
 * "white-space: nowrap;" prevents these from being broken across lines at
 * spaces. It's not really a problem if that happens but it looks slightly
 * ugly to see these button-like things split in half (I guess generally
 * we think of buttons as being, like, "atomic" structures that can't
 * be split up in this way). this particular CSS trick from
 * https://old.reddit.com/r/webdev/comments/uwuheu/how/i9tx9f2/
 */
.outlink {
    border-width: 2px;
    border-style: solid;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-family: monospace;
    font-weight: bold;
    margin-left: 3px;
    padding: 3px;
    user-select: none;
    white-space: nowrap;
}

/* make these links look more like buttons, by making them darker when you
 * hover / click on them -- https://stackoverflow.com/a/25942447
 */
.outlink:hover {
    filter: brightness(90%);
}

/* Background / border colors laboriously picked by googling "hex color picker"
 * and trying stuff out for five minutes until things look good. Graphic design
 * is my passion
 */
.oscholar,
.opaper {
    background-color: #196ce6;
    border-color: #0f3163;
}
.opaper::before {
    content: "Paper";
}

.oposter {
    background-color: #1f7840;
    border-color: #0d4020;
}
.oposter::before {
    content: "Poster";
}

.oslides-noname {
    background-color: #cc7104;
    border-color: #8f5003;
}
.oslides {
    background-color: #cc7104;
    border-color: #8f5003;
}
.oslides::before {
    content: "Slides";
}

.ogithub,
.ocode {
    background-color: #c43939;
    border-color: #590d0d;
}
.ocode::before {
    content: "Code";
}

/* Other categories of "outlinks" that don't have fixed names */
.ocv,
.orpt {
    background-color: #6e3419;
    border-color: #2b0f03;
}

.omisc {
    background-color: #172fa6;
    border-color: #0a1340;
}