/* Use tufte-css as the base.
 * https://github.com/edwardtufte/tufte-css
 */
@import "tufte.css";

:root {
    /* --heading: #48acf0; */
    --heading: #7b9e89;
}

@media (prefers-color-scheme: dark) {
    :root {
        --heading: #f0a202;
    }
}

/* tufte.css floats it which messes things up for ds content. */
figcaption {
    float: none;
    max-width: 100%;
}

/* I observed this in some posts.  One example is:
 * /verbal-venom-biological-parallels-for-western-pathologies/
 */
img.alignleft {
    float: left;
    margin: 0 0.5em 0.25em 0;
}

/* This is an example of alignright in use:
 * /under-jewish-rule/
 */
img.alignright {
    float: right;
    margin: 0 0 0.25em 0.5em;
}

/* `section.metadata` is something I added to the bottom of every post for
 * displaying metadata about the post.
 */
section.metadata tr td:nth-child(1) {
    width: 120px;
    vertical-align: top;
}

h1, h2 {
    color: var(--heading);
    padding-right: 12.5rem;
}

@media (max-width: 760px) {
    h1, h2 {
        padding: 0;
    }
}