:root {
    --text-color: #111;
    --link-color: #4322ff;
    --code-color: rgb(10, 64, 148);
    --pre-border: rgb(152, 190, 250);
    --body-bg: white;
    --header-bg: #f5fbfe;
    --header-border: #e3f2fd;
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Fira Sans", "Go", sans-serif;
    color: var(--text-color);
    background: var(--body-bg);
    font-size: medium;
    overflow-x: hidden;
    word-break: break-word;
    overflow-wrap: break-word;
    margin: 0;

    /* More space between lines to make text more readable */
    line-height: 1.5;
}

header {
    padding: 0.5em 0;
    background: var(--header-bg);
    border-bottom: solid 1px var(--header-border);
    margin-bottom: 1em;
}

nav, main {
    /* Center both in page */
    margin: 0 auto;
    max-width: 50em;
    padding: 0;
    clear: both;
}

nav {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

nav h1 {
    flex: auto;
    font-size: xx-large;
    margin: 0 auto;
}

nav div.pages {
    display: flex;
    font-size: 0.8em;
    text-align: right;
    align-items: center;
    margin-right: 1em;
}

a {
    color: var(--link-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

h1 a {
    color: inherit;
}

pre, code {
    font-family: "Fira Mono", "Go Mono", monospace;
}

code {
    color: var(--code-color);
    white-space: nowrap;
}

pre {
    padding: 1em;
    color: var(--text-color);
    border: 1px solid var(--pre-border);
	border-left: 5px solid var(--pre-border);
    white-space: pre-wrap;
}

img {
    float: right;
    max-width: 40%;
    max-height: 40vh;
    width: auto;
    height: auto;

	margin-left: 1em;
	margin-right: 1em;
	margin-bottom: 1em;
}

hr {
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: 1em;
    margin-right: 1em;
}

/* to find the second td, we select "the TDs that come after another TD",
 * knowing there will be only two */
table.kvpairs td+td {
	padding-left: 2em;
}

footer {
    background: var(--header-bg);
    border-top: solid 1px var(--header-border);
    margin-top: 1.5em;
    padding: 1em 0;
}

footer div {
    text-align: right;
    font-size: 90%;

    /* Center in page, same as nav and main. */
    margin: 0 auto;
    max-width: 50em;
    padding: 0;

    /* Small padding to the right for legibility on small screens. */
    padding-right: 0.5em;

    /* Softer text. */
    filter: opacity(50%);
}

@media screen and (max-width: 50em) {
    nav, main{
        padding-left: 0.5em;
        padding-right: 0.5em;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-color: rgba(255, 255, 255, 0.92);
        --link-color: #aaccee;
        --code-color: rgb(212, 226, 247);
        --pre-border: #233140;
        --body-bg: #121212;
        --header-bg: #273238;
        --header-border: #37474f;
    }
}