/* Reset */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* The templated values below are filled in from preferences.yaml at build
   time. Change them there rather than here. */
:root {
    --banner-color: #add8e6;
    --banner-text-color: #000000;
    --background-color: #ffffff;
    --text-color: #000000;
    --link-color: #0000ee;
    --link-clicked-color: #551a8b;
    --tag-color: #add8e6;
    --tag-text-color: #000000;
}

@media (prefers-color-scheme: dark) {
    :root {
        --banner-color: #add8e6;
        --banner-text-color: #000000;
        --background-color: #000000;
        --text-color: #ffffff;
        --link-color: #8ab4f8;
        --link-clicked-color: #c58af9;
        --tag-color: #add8e6;
        --tag-text-color: #000000;
    }
}

html, body {
    height: 100%;
}

body {
    font-family: sans-serif;
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--link-color);
}

a:visited {
    color: var(--link-clicked-color);
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

/* anywhere, unlike break-word, also lets flex items (e.g. the pager) shrink
   past long words and URLs, so nothing pushes the page wider than the
   screen. */
body {
    overflow-wrap: anywhere;
}

/* Wide code blocks and tables scroll within the content instead. */
#content pre,
#content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

#content {
    width: 60%;
    max-width: 1500px;
    margin: calc(70px + 30px) auto 30px;
}

#content p + p {
    margin-top: 1em;
}

/* Keeps markdown lists' bullets and numbers inside the content. Template
   lists have a class, and are styled on their own. */
#content :is(ul, ol):not([class]) {
    padding-left: 20px;
}

/* A gallery page's images, centred, at full size up to the content's
   width. */
.page-images img {
    margin: 1em auto;
}

.byline {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    opacity: 0.6;
}

.byline-date {
    margin-left: auto;
}

.warnings {
    margin-bottom: 20px;
    padding: 10px 15px;
    border: 2px solid darkred;
    border-radius: 10px;
    background-color: #ffcccc;
    color: #000000;
}

.warning-title {
    font-size: 1.4em;
    font-weight: bold;
    color: darkred;
}

/* Tag pills: 0.7em text centred in a 1em (of the surrounding text) high
   pill, never split over lines. */
.tag,
a.tag:visited {
    display: inline-block;
    height: calc(1em / 0.7);
    line-height: calc(1em / 0.7);
    padding: 0 0.6em;
    margin-right: 0.4em;
    font-size: 0.7em;
    white-space: nowrap;
    vertical-align: middle;
    border-radius: calc(0.5em / 0.7);
    background-color: var(--tag-color);
    color: var(--tag-text-color);
    text-decoration: none;
}

.pager {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}

.pager-next {
    margin-left: auto;
}

/* Wider screens put the sidebars either side of the content. The content
   keeps its width, only narrowing to leave each sidebar its 150px (plus
   20px either side), and stays centred between equal side columns. */
@media (width > 1080px) {
    #main {
        display: grid;
        grid-template-columns: 1fr min(1500px, 60%, 100% - 2 * (150px + 40px)) 1fr;
        align-items: start;
    }

    #main > #content {
        grid-column: 2;
        grid-row: 1;
        width: auto;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (width <= 1080px) {
    #content {
        width: auto;
        margin: calc(70px + 30px) 20px 30px;
    }

    .byline {
        flex-direction: column;
    }

    .byline-date {
        margin-left: 0;
    }
}