@layer reset, defaults, components, utilities, overrides;

@layer reset {
    * {
        box-sizing: border-box;
    }
}


@layer defaults {
    /* Colours */

    /* http://paletton.com/#uid=53M0H0kllll89KueKtfrWdrC-5w */
    /* http://paletton.com/#uid=33L0P0kllllJb+Xt1vZdEaH5+01 */

    :root {
        /* Some of these should be synced with CV styles */
        --backgroundColor: white;
        --textColor: #404040;
        --headingColor: black;
        --linkColor: #80c0ff;
        --externalLinkColor: #00c0c080;
        --fallbackLinkColor: #2060ff;
        --headingLinkColor: #0580fc;
        --borderColor: #e0e0e0;
        --boxBackgroundColor: #e0e0e0;
        --boxBorderColor: var(--linkColor);
        --secondGradientColor: #8888;
        --mainWidth: 800px;
        --contentPadding: 1em;
    }

    body {
        font-size: 1rem;  /* Respect the user */
        line-height: 1.6;
        margin: 0px 0px;
        background-color: var(--backgroundColor);
        color: var(--textColor);
        font-family: sans, sans-serif;
    }

    p, ol > li {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    ol.upperalpha {
        list-style-type: upper-alpha;
    }

    article img {
        max-width: 100%;
    }

    h1, h2, h3, h4, h5, h6 {
        font-weight: normal;
        color: var(--headingColor);
        font-family: "Alegreya", serif;
        line-height: 1.2;

        & a:not(.toc-backref) {
            text-underline-offset: 0.1em;
        }
    }

    h1 {
        padding-top: 0.2em;
        font-size: 2.5em;
        font-weight: normal;
    }
    h2, .post h1 {
        font-size: 1.8em;
    }
    h3, .post h2 {
        font-size: 1.6em;
    }
    h4, .post h3 {
        font-size: 1.3em;
        font-style: italic;
    }
    h5, .post h4 {
        font-size: 1.2em;
        font-style: italic;
    }
    h6, .post h5 {
        font-size: 1.1em;
    }

    h1 {
        margin-bottom: 0.3em;
        margin-top: 0;
    }

    h2, h3, h4, h5 {
        margin-bottom: 0.2em;
    }

    h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, blockquote > p {
        margin-top: 0em;
    }


    a:not(.toc-backref) {
        font-weight: normal;
        &, &:link, &:visited {
            color: inherit;
        }

        text-decoration-color: var(--linkColor);
        text-underline-offset: auto;
        text-decoration-thickness: 0.15rem;

        &:hover {
            color: #000;
        }

        &[href^=http]:not([href^="https://lukeplant.me.uk/"]) {
            text-decoration-color: var(--externalLinkColor);
        }
    }

    blockquote {
        padding: 0.5em 1em;

        p:last-child {
            padding-bottom: 0px;
            margin-bottom: 0px;
        }
    }


    blockquote:not(.pull-quote) {
        margin: 0.5em 0em;
        background-color: #f2f2f2;
        border-left: 8px solid;
        border-image: linear-gradient(180deg, var(--linkColor) 0%, var(--secondGradientColor) 100%) 1;

        & blockquote {
            background-color: #e0e0e0;
        }

    }


    table {
        border-collapse: collapse;
        margin-right: 5px;
        box-shadow: 2px 2px 5px #888;

        td, th {
            border: 1px solid #888;
            padding: 0.4em;

            p {
                margin: 0;
            }
        }

        > thead > tr > th {
            background-color: #f0f0f0;
        }
    }


    pre {
        overflow: auto;
    }


}

@layer components {

    a.toc-backref {
        color: inherit;
        text-decoration: none;

        &::after {
            content: " ^";
            font-size: 0.8em;
            vertical-align: text-top;
            color: var(--linkColor);
            text-decoration: none;
            font-weight: bold;

        }
        &:hover {
            text-decoration: underline;

            &::after {
                text-decoration: none;
            }

        }
    }

    .programmingerror {
        color: red;
        font-weight: bold;
    }

    .admonition {
        background-color: #f2f2f2;
        margin: 0.5em 0em;
        padding: 0.5em 1em;

        & p.admonition-title {
            font-weight: bold;
            margin-top: 0.5em;
        }
        & > .first {
            margin-top: 0;
        }
        & > .last {
            margin-bottom: 0;
        }
        border-left: 8px solid;
        border-image: linear-gradient(180deg, #ffb060 0%, var(--secondGradientColor) 100%) 1;
    }


    blockquote.pull-quote {
        margin: 0.5em -20px;
        border: double var(--secondGradientColor);
        border-width: 0px 3px;
        padding: 0 17px;
        font-style: italic;
    }
    /* TODO - make pull-quote not extend into margin on small screens.
    Probably make use of grid?  */



    .twitter-tweet.twitter-tweet-rendered {
        margin: 0 auto;
    }

    div.line-block + p {
        margin-top: 1em;
    }
    div.line-block > div.line-block {
        margin-left: 2em;
    }

    .boxed {
        border: 2px solid var(--boxBorderColor);
        background: var(--boxBackgroundColor);
    }

    div.boxed, pre.boxed {
        padding: 5px 5px ;
    }

    span.boxed {
        padding: 2px 3px;
        margin: 0;
    }

    .strike {
        text-decoration: line-through;
    }

    /* Images/figures */

    figure {
        margin: 0;
    }
    img.align-center, figure.align-center img {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
    figure.align-center figcaption {
        text-align: center;
    }

    /* See https://css-tricks.com/full-width-containers-limited-width-parents/ */
    figure:has(.full-bleed) {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);

        img {
            max-width: calc(100vw - 2 * var(--contentPadding));
        }
    }

    .contents .topic-title {
        font-weight: bold;
    }

    .contents p {
        margin-top: 0em;
        margin-bottom: 0em;
    }

    /* Layout - TODO - switch to grid */

    #container {
        width: var(--mainWidth);
        max-width: 100%;
        margin: 0 auto;
    }


    #contentinner {
        margin: 0 var(--contentPadding);

        h1:first-child {
            padding-top: 0.5em;
        }
    }



    /* Top nav bar */

    #toplinks {
        --topLinksPadding: 5px;

        font-size: 90%;
        line-height: 1.2em;
        text-align: center;

        ul, li {
            list-style-type: none;
        }

        ul ul, ul ul li {
            display: inline;
        }

        ul {
            padding: 0px;
            margin-top: 0px;
            margin-bottom: 0px;
        }

        li {
            padding: 0px;
            margin: 0px;
            font-weight: bold;
        }

        #toplinksinner > ul > li {
            margin-top: 5px;

            &:first-child {
                margin-top: 0px;
            }

            &:only-child {
                padding: 5px;
            }

            li {
                @include small-links();
                a {
                    margin: 0px;
                    display: inline-block;
                    width: auto;
                }
                &::before {
                    display: inline-block;
                    content: " ~ ";
                    padding: 0 8px;
                }
                &:first-child::before {
                    content: "";
                    padding: 0px;
                }
            }
        }
    }

    #toplinksinner {
        padding: var(--topLinksPadding);
    }

    .toplinksheader {
        padding: 0px 3px;
        &::after {
            content: ":";
        }
    }


    /* End topnav */


    #maintitle {
        padding: 0.5em 0;
        margin: 0 0 5px 0;
        border-bottom: 3px double var(--borderColor);
    }


    /* Main content overrides for elements */
    #content {
        background-color: var(--backgroundColor);
        background-image: none;

        pre, tt, code {
            font-size: 0.8rem;
            font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", monospace;
        }

        tt.literal {
            border-radius: 4px;
            background-color: #eee;
            padding: 2px 4px;
        }

        pre {
            line-height: 1.6;
        }
    }

    /* TODO maybe this should just be a class on these `a` elements */
    #toplinksinner a, .metainfo a, .metainfoindex a {
        font-variant: small-caps;
        font-family: "Alegreya";
        /* Small caps for Alegreya is really small, make things a bit more readable: */
        font-size: 110%;
        text-underline-offset: 0.1em;
    }

    /* Post */

    h1.posttitle {
        padding-top: 0.25em;
    }

    .author {
        font-style: italic;
        color: #808080;
    }

    .post {
        margin-top: 0.5em;
    }


    .metainfo {
        text-align: right;
        padding-bottom: 0.25em;
        border-bottom: 1px solid var(--borderColor);
        @include small-links();
    }

    .metainfoindex {
        margin-top: 2px;
        padding-top: 2px;
        margin-left: 1em;
        color: #666;
        @include small-links();
    }

    .metainfo, .metainfoindex {
        ul.tags {
            display: inline;
            margin: 0;
            padding: 0;

            li {
                list-style: none;
                display: inline;
            }

            li:not(:last-child)::after {
                content: ", ";
            }
        }
    }

    .summarylink {
        padding-top: 5px;
    }

    .summary {
        margin: 1em 0 2em 0em;
        padding: 0em 1em;
    }

    a.footnote-reference {
        vertical-align: super;
        font-size: 80%;
        &::before {
            background: none;
            display: none;
        }
    }

    a.fn-backref::after {
        content: " ⭜";
        font-size: 0.9em;
        vertical-align: text-bottom;
    }

    /* Paging */

    .paginglinks {
        text-align: right;
    }


    /* Related */

    .related {
        border-top: 3px double var(--borderColor);
        border-bottom: 3px double var(--borderColor);
        padding: 1em;
        margin: 2em -#{$contentpadding} 1em;
    }

    #contentinner .related h1 {
        padding: 0;
    }

    /* Comments */

    #comments_loading {
        font-style: italic;
    }

    #isso-root {
        /* Stop user comments triggering horizontal scrollbars */
        overflow-wrap: break-word;
        word-break: break-word;
        hyphens: auto;
    }


    /* Footer */

    #footer {
        margin-top: 1em;
        border-top: 3px double var(--borderColor);
        padding-top: 1em;
        text-align: center;
        padding-bottom: 1em;

        p {
            margin: 0;
        }

    }

    /* Fancy hr */
    hr.fancy, hr.docutils, .post hr  {
        border: 0;
        border-top: 1px solid var(--secondGradientColor);
        border-bottom: 1px solid var(--secondGradientColor);
        box-sizing: border-box;
        height: 3px;
        background-image: linear-gradient(to right, #fff0 0%, var(--linkColor) 45%, var(--linkColor) 50%, var(--secondGradientColor) 50%, var(--secondGradientColor) 55%, #fff0 100%);

        text-align: center;
        overflow: visible;
        line-height: 1em;

        &::after {
            content: "◇";
            display: inline-block;
            position: relative;
            top: -0.55em;
            padding: 0 4px;
            background: var(--backgroundColor);
        }
        margin: 1em -15px;
    }

    .post hr {
        width: calc(100% + 30px);
        margin: 2em -15px;
    }


    /* Post content */

        /* Formulas */
        /*
         *   Copyright (C) 2009,2010 Alex Fernández
         *
         *   Released under the terms of the `2-Clause BSD license'_, in short:
         *   Copying and distribution of this file, with or without modification,
         *   are permitted in any medium without royalty provided the copyright
         *   notice and this notice are preserved.
         *   This file is offered as-is, without any warranty.
         *
         * .. _2-Clause BSD license: http://www.spdx.org/licenses/BSD-2-Clause
         *
         *   Based on eLyXer: convert LyX source files to HTML output.
         *   http://elyxer.nongnu.org/
         */
        span.formula {
	        white-space: nowrap;
        }

        div.formula {
	        padding: 0.5ex;
	        margin-left: auto;
	        margin-right: auto;
        }

        .formula {
	        text-align: center;
	        font-family: "Times New Roman", Times, "Droid Serif", "DejaVu Serif", "STIX", serif;
	        margin: 1.2em 0;
        }

        .formula {
            /* Basic features */
            a.eqnumber {
	            display: inline-block;
	            float: right;
	            clear: right;
	            font-weight: bold;
            }
            span.unknown {
	            color: #800000;
            }
            span.ignored, span.arraydef {
	            display: none;
            }
            i {
	            letter-spacing: 0.1ex;
            }

            /* Alignment */
            .align-left, .align-l {
	            text-align: left;
            }
            .align-right, .align-r {
	            text-align: right;
            }
            .align-center, .align-c {
	            text-align: center;
            }

            /* Structures */
            span.overline, span.bar {
	            text-decoration: overline;
            }
            .fraction, .fullfraction {
	            display: inline-block;
	            vertical-align: middle;
	            text-align: center;
            }
            .fraction .fraction {
	            font-size: 80%;
	            line-height: 100%;
            }
            span.numerator {
	            display: block;
            }
            span.denominator {
	            display: block;
	            padding: 0ex;
	            border-top: thin solid;
            }
            sup.numerator, sup.unit {
	            font-size: 70%;
	            vertical-align: 80%;
            }
            sub.denominator, sub.unit {
	            font-size: 70%;
	            vertical-align: -20%;
            }
            span.sqrt {
	            display: inline-block;
	            vertical-align: middle;
	            padding: 0.1ex;
            }
            sup.root {
	            font-size: 70%;
	            position: relative;
	            left: 1.4ex;
            }
            span.radical {
	            display: inline-block;
	            padding: 0ex;
	            font-size: 150%;
	            vertical-align: top;
            }
            span.root {
	            display: inline-block;
	            border-top: thin solid;
	            padding: 0ex;
	            vertical-align: middle;
            }
            span.symbol {
	            line-height: 125%;
	            font-size: 125%;
            }
            span.bigsymbol {
	            line-height: 150%;
	            font-size: 150%;
            }
            span.largesymbol {
	            font-size: 175%;
            }
            span.hugesymbol {
	            font-size: 200%;
            }
            span.scripts {
	            display: inline-table;
	            vertical-align: middle;
            }
            .script {
	            display: table-row;
	            text-align: left;
	            line-height: 150%;
            }
            span.limits {
	            display: inline-table;
	            vertical-align: middle;
            }
            .limit {
	            display: table-row;
	            line-height: 99%;
            }
            sup.limit, sub.limit {
	            line-height: 100%;
            }
            span.symbolover {
	            display: inline-block;
	            text-align: center;
	            position: relative;
	            float: right;
	            right: 100%;
	            bottom: 0.5em;
	            width: 0px;
            }
            span.withsymbol {
	            display: inline-block;
            }
            span.symbolunder {
	            display: inline-block;
	            text-align: center;
	            position: relative;
	            float: right;
	            right: 80%;
	            top: 0.3em;
	            width: 0px;
            }

            /* Environments */
            span.array, span.bracketcases, span.binomial, span.environment {
	            display: inline-table;
	            text-align: center;
	            border-collapse: collapse;
	            margin: 0em;
	            vertical-align: middle;
            }
            span.arrayrow, span.binomrow {
	            display: table-row;
	            padding: 0ex;
	            border: 0ex;
            }
            span.arraycell, span.bracket, span.case, span.binomcell, span.environmentcell {
	            display: table-cell;
	            padding: 0ex 0.2ex;
	            line-height: 99%;
	            border: 0ex;
            }

            /*
             * CSS file for LaTeX formulas, extra stuff:
             * binomials, vertical braces, stackrel, fonts and colors.
            */

            /* Inline binomials */
            span.binom {
	            display: inline-block;
	            vertical-align: middle;
	            text-align: center;
	            font-size: 80%;
            }
            span.binomstack {
	            display: block;
	            padding: 0em;
            }

            /* Over- and underbraces */
            span.overbrace {
	            border-top: 2pt solid;
            }
            span.underbrace {
	            border-bottom: 2pt solid;
            }

            /* Stackrel */
            span.stackrel {
	            display: inline-block;
	            text-align: center;
            }
            span.upstackrel {
	            display: block;
	            padding: 0em;
	            font-size: 80%;
	            line-height: 64%;
	            position: relative;
	            top: 0.15em;

            }
            span.downstackrel {
	            display: block;
	            vertical-align: bottom;
	            padding: 0em;
            }

            /* Fonts */
            span.mathsf, span.textsf {
	            font-style: normal;
	            font-family: sans-serif;
            }
            span.mathrm, span.textrm {
	            font-style: normal;
	            font-family: serif;
            }
            span.text, span.textnormal {
	            font-style: normal;
            }
            span.textipa {
	            color: #008080;
            }
            span.fraktur {
	            font-family: "Lucida Blackletter", eufm10, blackletter;
            }
            span.blackboard {
	            font-family: Blackboard, msbm10, serif;
            }
            span.scriptfont {
	            font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;
	            font-style: italic;
            }
        }

    pre.code, pre.literal-block {
        border-left: 8px solid;
        padding: 0.5em 0.8em;
        border-color: #888;
    }

    pre.shell, pre.bash {
        background-color: #242424;
        border-color: #7d371b;
        color: #e0e0e0;
    }


    pre.python {
        background-color: #e0ffe0;
        border-color: #c0e0c0;
    }

    pre.haskell {
        background-color: #d0d0ff;
        border-color: #9080b0;
    }

    pre.csharp {
        background-color: #b0ddff;
        border-color: #85ccff;
    }

    pre.html, pre.javascript, pre.html\+django {
        background-color: #e0e0e0;
        border-color: #c0c0c0;
    }

    pre.sql {
        background-color: #f0f0f0;
        border-color: #e0e0e0;
    }

    code.literal {
        background-color: #f0f0f0;
        border-radius: 4px;
        padding: 2px 4px;
    }

    span.usertext {
        color: #408040;
        font-weight: bold;
    }

    .shell .usertext {
        color: #80ff80;
    }


    /* Code highlighting */
    .codeblock, pre.code {
        .p {
            color: #165316;
        }
        .c, .comment, .cm, .c1 {
            color: #498c81;
            font-weight: 450;
        }
        .err {
            color: #a61717;
            background-color: #e3d2d2;
        }
        .k, .kn, .keyword {
            font-weight: bold;
        }
        .o, .operator {
            font-weight: bold;
            color: #165316;
        }
        .cp {
            color: #777777;
            font-weight: bold;
        }
        .cs {
            color: #777777;
            font-weight: bold;
            font-style: italic;
        }
        .gd {
            color: #000000;
            background-color: #ffdddd;
        }
        .ge {
            font-style: italic;
        }
        .gr {
            color: #aa0000;
        }
        .gh {
            color: #777777;
        }
        .gi {
            color: #000000;
            background-color: #ddffdd;
        }
        .go {
            color: #888888;
        }
        .gp {
            color: #555555;
        }
        .gs {
            font-weight: bold;
        }
        .gu {
            color: #aaaaaa;
        }
        .gt {
            color: #aa0000;
        }
        .kc {
            font-weight: bold;
        }
        .kd {
            font-weight: bold;
        }
        .kp {
            font-weight: bold;
        }
        .kr {
            font-weight: bold;
        }
        .kt {
            color: #445588;
            font-weight: bold;
        }
        .m {
            color: #009999;
        }
        .s, .literal.string {
            color: #bb8844;
        }
        .na {
            color: #008080;
        }
        .nb, .name.builtin {
            color: #777777;
        }
        .nc, .name.class {
            color: #445588;
            font-weight: bold;
        }
        .no {
            color: #008080;
        }
        .ni {
            color: #800080;
        }
        .ne {
            color: #990000;
            font-weight: bold;
        }
        .nf, .name.function {
            color: #990000;
            font-weight: bold;
        }
        .nn {
            color: #555555;
        }
        .nt {
            color: #000080;
        }
        .nv {
            color: #008080;
        }
        .ow {
            font-weight: bold;
        }
        .mf {
            color: #009999;
        }
        .mh {
            color: #009999;
        }
        .mi, .literal.number {
            color: #009999;
        }
        .mo {
            color: #009999;
        }
        .sb {
            color: #bb8844;
        }
        .sc {
            color: #bb8844;
        }
        .sd {
            color: #bb8844;
        }
        .s2 {
            color: #bb8844;
        }
        .se {
            color: #bb8844;
        }
        .sh {
            color: #bb8844;
        }
        .si {
            color: #bb8844;
        }
        .sx {
            color: #bb8844;
        }
        .sr {
            color: #808000;
        }
        .s1 {
            color: #bb8844;
        }
        .ss {
            color: #bb8844;
        }
        .bp {
            color: #777777;
        }
        .vc {
            color: #008080;
        }
        .vg {
            color: #008080;
        }
        .vi {
            color: #008080;
        }
        .il {
            color: #009999;
        }
    }
    pre.code.shell {
        .p {
            color: white;
        }
    }

    .chatgpt-me, .chatgpt-it {
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 15px 10px 15px 54px;
        margin-left: 2em;
    }
    .chatgpt-it {
        background-color: rgb(247, 247, 248);
        background-image: url('/blogmedia/chatgpt.svg');
    }
    .chatgpt-me {
        background-color: white;
        background-image: url('/blogmedia/chatgpt-me.webp');
    }
    .chatgpt-me, .chatgpt-it {
        background-repeat: no-repeat;
        background-size: 24px;
        background-position: 15px 15px;
    }


    .chatgpt-it + .chatgpt-me, .chatgpt-me + .chatgpt-it {
        margin-top: -1px;
    }

    .chatgpt-it, .chatgpt-me {
        & > p:first-child {
            margin-top: 0;
        }
        & > P:last-child {
            margin-bottom: 0;
        }

        & .line-block + .line-block {
            margin-top: 1em;
        }
    }





    /* Category page */

    div.category {
        margin-top: 0.5em;
    }



    /* Fractals pages */

    div.fractimg {
        text-align: center;
        border-top: 1px dashed #808080;
        margin-top: 10px;
    }

    div.fractimg p.imgsize {
        font-size: small;
        margin: 0px;
        font-weight: bold;
    }

    div.fractimg img {
        border: 2px solid #0000ff;
    }

}


@layer overrides {

    /* Override some things from prettify.css, which interacts badly with the dark background */
    pre.bash, pre.shell {
        .str, .kwd, .com, .typ, .lit, .pun, .pln, .tag, .atn, .atv, .dec {
            color: #e0e0e0;

        }
    }

}