@media (prefers-color-scheme: light) {
    :root {
        --title-colour: #003aa0;
        --note-background: #f5f5f5;
        --code-background: #f5f5f5;
        --hightlight: #fff433;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --title-colour: #fff433;
        --note-background: #353535;
        --code-background: #333;
        --hightlight: #9b59d0;
    }

    html {
        background-color: #000000;
        color: #fefefe;
    }

    a {
        color: #fff433;
    }

    a:visited {
        color: #9b59d0;
    }

    #social {
        /* bit of a hack. should use proper colour changes instead. */
        filter: invert(1) hue-rotate(180deg);
    }
}

html {
    font-family: sans-serif;
}

body {
    margin: 0;
    font-family: Calibri, sans-serif;
    line-height: 1.75;
}

h1.site-title {
    font-family: "Title", "Segoe Script", script;
    font-weight: 200;
    font-size: 4em;
    text-align: center;
    margin-top: 0;
}

h1.site-title>a {
    text-decoration: none;
    color: inherit;
}

@media only screen and (width <=800px) {
    h1.site-title {
        /* add a bit more margin to make touching the right link easier */
        margin-top: 1em;
        margin-bottom: 0.5em;
    }
}

.site-title,
main {
    max-width: 50rem;
    margin: 0 auto;
}

main {
    padding: 1em;
}

.post-list-item {
    margin-top: 1em;
}

.post-list-item h1 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 400;
}

.post-list-item>h1>a {
    color: var(--title-colour);
    text-decoration: none;
}

h2,
h3,
h4,
h5 {
    font-weight: normal;
    color: var(--title-colour);
}

.post-list-item>h1>a:hover {
    text-decoration: underline;
}

.post-list-item time {
    line-height: 2rem;
}

.title {
    font-family: Cambria, serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 48px;
    margin-top: 0;
    color: var(--title-colour);
}

.note {
    margin: 0 1em;
    padding: 1em;
    background-color: var(--note-background);
}

.note>h3 {
    margin: 0;
    font-family: Cambria, serif;
    font-weight: normal;
}

pre {
    padding: 1rem;
    overflow: auto;
}

.footnote-definition:first-of-type {
    border-top: 1px solid var(--title-colour);
    margin-top: 2rem;
}

.footnote-definition {
    font-size: 0.85em;
    display: block;
    margin-bottom: 0.5em;
}

.footnote-definition>p {
    padding-left: 0.5em;
    display: inline;
    margin: 0;
}

.footnote-definition:target {
    background-color: var(--hightlight);
}

footer {

    margin: 5em;
}

#social {
    text-align: right;
    margin: 1em;
}

#social .symbol {
    text-decoration: none;
    margin: 0 0.5em;
}

@font-face {
    font-family: "Title";
    src: url(data:font/woff2;base64,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) format("woff2");
}

p code,
li code,
ol code {
    background-color: var(--code-background);
    padding: 0.25em;
}