/* General blog styles adapted from Mataroa */
:root {
    font-family: sans-serif;
    line-height: 1.5;
    color-scheme: light dark;

    /* Colors (can be adjusted) */
    --dark-mode-color: #212529;
    --link-color: #1175e2;
    --dark-grey-color: #757575;
    --light-grey-color: #eff1f5;
    --airy-grey-color: #fafafa;
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    :root {
        color: #fff;
        background: var(--dark-mode-color);
        --link-color: #70b3ff;
        --dark-grey-color: #78828a;
        --light-grey-color: #353535;
        --airy-grey-color: #2b2b2b;
    }

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

    /* Ensure links use the dark mode color */
}

body {
    margin: 0;
    /* Remove default body margin */
}

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

a:hover {
    text-decoration: underline;
}

/* Main content area styling */
main {
    text-align: justify;
    max-width: 40em;
    margin: auto;
    overflow: scroll;
    /*Forces scroll-bar so that content doesn't move. */
    font-family: Helvetica, sans-serif;
}

/* Blog post specific styles */
article {
    margin-bottom: 24px;
    /* Space below each article */
}

.post-meta {
    color: var(--dark-grey-color);
    font-size: 0.9em;
    margin-bottom: 16px;
    /* Space below meta */
}

/* Styling for the main content div within the article */
.content {
    margin-top: 1em;
    line-height: 1.7;
    /* Improve readability */
}

.content p,
.content li {
    /* Use serif font for post body for better readability */
    font-family: serif;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    /* Space between paragraphs/list items */
}

.content ul,
.content ol {
    padding-left: 24px;
    /* Standard indentation for lists */
    margin-bottom: 1rem;
}

.content blockquote {
    border-left: 4px solid var(--light-grey-color);
    padding-left: 16px;
    margin-left: 0;
    color: var(--dark-grey-color);
    font-style: italic;
    /* Often used for quotes */
    margin-bottom: 1rem;
}

/* Image styling */
.content img {
    max-width: 100%;
    /* Ensure images don't overflow container */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Allows margin auto to center */
    margin: 1rem auto;
    /* Center images with space */
    /* Optional: Add a max-width in pixels if 100% is too wide */
    /* max-width: 600px; */
}

/* Code block styling (using pygments classes) */
.highlight pre {
    /* Style the <pre> tag generated by pygments */
    background: var(--airy-grey-color);
    overflow-x: auto;
    padding: 1em;
    margin-bottom: 1rem;
    border-radius: 4px;
    /* Optional: rounded corners */
}

.highlight code {
    /* Style inline code within highlight block */
    background: none;
    /* Reset background inherited from pre */
    padding: 0;
    /* Reset padding */
}

/* Basic inline code styling (outside of highlight blocks) */
code {
    background: var(--airy-grey-color);
    padding: 0.2em 0.4em;
    font-size: 0.9em;
    border-radius: 3px;
}

pre code {
    /* Ensure code inside pre doesn't get the inline style */
    background: none;
    padding: 0;
    border-radius: 0;
}

/* Footer styling */
footer {
    max-width: 42rem;
    /* Match main content width */
    margin: 56px auto 16px auto;
    /* Center horizontally with top/bottom margin */
    padding: 0 16px;
    /* Match main content padding */
    color: var(--dark-grey-color);
    font-size: 0.9em;
    text-align: center;
    /* Center footer text */
}

footer hr {
    border: none;
    border-top: 1px solid var(--light-grey-color);
    margin-bottom: 1em;
}

/* Pygments default theme overrides (add more as needed) */
/* Example: Make background slightly different in dark mode */
@media (prefers-color-scheme: dark) {
    .highlight pre {
        background: #2b2b2b;
        /* Slightly darker airy-grey */
    }

    code {
        background: #353535;
        /* Use light-grey for inline code */
    }

    pre code {
        /* Ensure code inside pre doesn't get the inline style in dark mode */
        background: none;
    }
}

/* Styles from pygments 'default' theme - you might generate this */
/* Or use a different theme like 'native' which adapts better to light/dark */
.highlight .hll {
    background-color: #ffffcc
}

.highlight {
    background: #f8f8f8;
}

/* Base background for light mode */
.highlight .c {
    color: #408080;
    font-style: italic
}

/* Comment */
.highlight .err {
    border: 1px solid #FF0000
}

/* Error */
.highlight .k {
    color: #008000;
    font-weight: bold
}

/* Keyword */
.highlight .o {
    color: #666666
}

/* Operator */
.highlight .ch {
    color: #408080;
    font-style: italic
}

/* Comment.Hashbang */
.highlight .cm {
    color: #408080;
    font-style: italic
}

/* Comment.Multiline */
.highlight .cp {
    color: #BC7A00
}

/* Comment.Preproc */
.highlight .cpf {
    color: #408080;
    font-style: italic
}

/* Comment.PreprocFile */
.highlight .c1 {
    color: #408080;
    font-style: italic
}

/* Comment.Single */
.highlight .cs {
    color: #408080;
    font-style: italic
}

/* Comment.Special */
.highlight .gd {
    color: #A00000
}

/* Generic.Deleted */
.highlight .ge {
    font-style: italic
}

/* Generic.Emph */
.highlight .gr {
    color: #FF0000
}

/* Generic.Error */
.highlight .gh {
    color: #000080;
    font-weight: bold
}

/* Generic.Heading */
.highlight .gi {
    color: #00A000
}

/* Generic.Inserted */
.highlight .go {
    color: #888888
}

/* Generic.Output */
.highlight .gp {
    color: #000080;
    font-weight: bold
}

/* Generic.Prompt */
.highlight .gs {
    font-weight: bold
}

/* Generic.Strong */
.highlight .gu {
    color: #800080;
    font-weight: bold
}

/* Generic.Subheading */
.highlight .gt {
    color: #0044DD
}

/* Generic.Traceback */
.highlight .kc {
    color: #008000;
    font-weight: bold
}

/* Keyword.Constant */
.highlight .kd {
    color: #008000;
    font-weight: bold
}

/* Keyword.Declaration */
.highlight .kn {
    color: #008000;
    font-weight: bold
}

/* Keyword.Namespace */
.highlight .kp {
    color: #008000
}

/* Keyword.Pseudo */
.highlight .kr {
    color: #008000;
    font-weight: bold
}

/* Keyword.Reserved */
.highlight .kt {
    color: #B00040
}

/* Keyword.Type */
.highlight .m {
    color: #666666
}

/* Literal.Number */
.highlight .s {
    color: #BA2121
}

/* Literal.String */
.highlight .na {
    color: #7D9029
}

/* Name.Attribute */
.highlight .nb {
    color: #008000
}

/* Name.Builtin */
.highlight .nc {
    color: #0000FF;
    font-weight: bold
}

/* Name.Class */
.highlight .no {
    color: #880000
}

/* Name.Constant */
.highlight .nd {
    color: #AA22FF
}

/* Name.Decorator */
.highlight .ni {
    color: #999999;
    font-weight: bold
}

/* Name.Entity */
.highlight .ne {
    color: #D2413A;
    font-weight: bold
}

/* Name.Exception */
.highlight .nf {
    color: #0000FF
}

/* Name.Function */
.highlight .nl {
    color: #A0A000
}

/* Name.Label */
.highlight .nn {
    color: #0000FF;
    font-weight: bold
}

/* Name.Namespace */
.highlight .nt {
    color: #008000;
    font-weight: bold
}

/* Name.Tag */
.highlight .nv {
    color: #19177C
}

/* Name.Variable */
.highlight .ow {
    color: #AA22FF;
    font-weight: bold
}

/* Operator.Word */
.highlight .w {
    color: #bbbbbb
}

/* Text.Whitespace */
.highlight .mb {
    color: #666666
}

/* Literal.Number.Bin */
.highlight .mf {
    color: #666666
}

/* Literal.Number.Float */
.highlight .mh {
    color: #666666
}

/* Literal.Number.Hex */
.highlight .mi {
    color: #666666
}

/* Literal.Number.Integer */
.highlight .mo {
    color: #666666
}

/* Literal.Number.Oct */
.highlight .sa {
    color: #BA2121
}

/* Literal.String.Affix */
.highlight .sb {
    color: #BA2121
}

/* Literal.String.Backtick */
.highlight .sc {
    color: #BA2121
}

/* Literal.String.Char */
.highlight .dl {
    color: #BA2121
}

/* Literal.String.Delimiter */
.highlight .sd {
    color: #BA2121;
    font-style: italic
}

/* Literal.String.Doc */
.highlight .s2 {
    color: #BA2121
}

/* Literal.String.Double */
.highlight .se {
    color: #BB6622;
    font-weight: bold
}

/* Literal.String.Escape */
.highlight .sh {
    color: #BA2121
}

/* Literal.String.Heredoc */
.highlight .si {
    color: #BB6688;
    font-weight: bold
}

/* Literal.String.Interpol */
.highlight .sx {
    color: #008000
}

/* Literal.String.Other */
.highlight .sr {
    color: #BB6688
}

/* Literal.String.Regex */
.highlight .s1 {
    color: #BA2121
}

/* Literal.String.Single */
.highlight .ss {
    color: #19177C
}

/* Literal.String.Symbol */
.highlight .bp {
    color: #008000
}

/* Name.Builtin.Pseudo */
.highlight .fm {
    color: #0000FF
}

/* Name.Function.Magic */
.highlight .vc {
    color: #19177C
}

/* Name.Variable.Class */
.highlight .vg {
    color: #19177C
}

/* Name.Variable.Global */
.highlight .vi {
    color: #19177C
}

/* Name.Variable.Instance */
.highlight .vm {
    color: #19177C
}

/* Name.Variable.Magic */
.highlight .il {
    color: #0000FF;
    font-weight: bold
}

/* Literal.Number.Integer.Long */

/* Optional: Dark mode adjustments for pygments 'default' theme */
@media (prefers-color-scheme: dark) {
    .highlight {
        background: #2b2b2b;
        color: #e0e0e0
    }

    /* Adjust base background and text */
    .highlight .c {
        color: #7a9a7a;
        font-style: italic
    }

    /* Comment */
    .highlight .k {
        color: #8fbc8f;
        font-weight: bold
    }

    /* Keyword */
    .highlight .o {
        color: #cccccc
    }

    /* Operator */
    .highlight .ch {
        color: #7a9a7a;
        font-style: italic
    }

    /* Comment.Hashbang */
    .highlight .cm {
        color: #7a9a7a;
        font-style: italic
    }

    /* Comment.Multiline */
    .highlight .cp {
        color: #dca35f
    }

    /* Comment.Preproc */
    .highlight .cpf {
        color: #7a9a7a;
        font-style: italic
    }

    /* Comment.PreprocFile */
    .highlight .c1 {
        color: #7a9a7a;
        font-style: italic
    }

    /* Comment.Single */
    .highlight .cs {
        color: #7a9a7a;
        font-style: italic
    }

    /* Comment.Special */
    .highlight .gd {
        color: #dca3a0
    }

    /* Generic.Deleted */
    .highlight .gh {
        color: #8f8fdc;
        font-weight: bold
    }

    /* Generic.Heading */
    .highlight .gi {
        color: #a0dca0
    }

    /* Generic.Inserted */
    .highlight .go {
        color: #aaaaaa
    }

    /* Generic.Output */
    .highlight .gp {
        color: #8f8fdc;
        font-weight: bold
    }

    /* Generic.Prompt */
    .highlight .gu {
        color: #dca0dc;
        font-weight: bold
    }

    /* Generic.Subheading */
    .highlight .gt {
        color: #8fc8dd
    }

    /* Generic.Traceback */
    .highlight .kc {
        color: #8fbc8f;
        font-weight: bold
    }

    /* Keyword.Constant */
    .highlight .kd {
        color: #8fbc8f;
        font-weight: bold
    }

    /* Keyword.Declaration */
    .highlight .kn {
        color: #8fbc8f;
        font-weight: bold
    }

    /* Keyword.Namespace */
    .highlight .kp {
        color: #8fbc8f
    }

    /* Keyword.Pseudo */
    .highlight .kr {
        color: #8fbc8f;
        font-weight: bold
    }

    /* Keyword.Reserved */
    .highlight .kt {
        color: #dca0a0
    }

    /* Keyword.Type */
    .highlight .m {
        color: #cccccc
    }

    /* Literal.Number */
    .highlight .s {
        color: #dca35f
    }

    /* Literal.String */
    .highlight .na {
        color: #b5cea8
    }

    /* Name.Attribute */
    .highlight .nb {
        color: #8fbc8f
    }

    /* Name.Builtin */
    .highlight .nc {
        color: #8f8fdc;
        font-weight: bold
    }

    /* Name.Class */
    .highlight .no {
        color: #dca3a0
    }

    /* Name.Constant */
    .highlight .nd {
        color: #cf9cfc
    }

    /* Name.Decorator */
    .highlight .ni {
        color: #cccccc;
        font-weight: bold
    }

    /* Name.Entity */
    .highlight .ne {
        color: #dca35f;
        font-weight: bold
    }

    /* Name.Exception */
    .highlight .nf {
        color: #8f8fdc
    }

    /* Name.Function */
    .highlight .nl {
        color: #cccc8f
    }

    /* Name.Label */
    .highlight .nn {
        color: #8f8fdc;
        font-weight: bold
    }

    /* Name.Namespace */
    .highlight .nt {
        color: #8fbc8f;
        font-weight: bold
    }

    /* Name.Tag */
    .highlight .nv {
        color: #a8a8d0
    }

    /* Name.Variable */
    .highlight .ow {
        color: #cf9cfc;
        font-weight: bold
    }

    /* Operator.Word */
    .highlight .w {
        color: #666666
    }

    /* Text.Whitespace */
    .highlight .mb {
        color: #cccccc
    }

    /* Literal.Number.Bin */
    .highlight .mf {
        color: #cccccc
    }

    /* Literal.Number.Float */
    .highlight .mh {
        color: #cccccc
    }

    /* Literal.Number.Hex */
    .highlight .mi {
        color: #cccccc
    }

    /* Literal.Number.Integer */
    .highlight .mo {
        color: #cccccc
    }

    /* Literal.Number.Oct */
    .highlight .sa {
        color: #dca35f
    }

    /* Literal.String.Affix */
    .highlight .sb {
        color: #dca35f
    }

    /* Literal.String.Backtick */
    .highlight .sc {
        color: #dca35f
    }

    /* Literal.String.Char */
    .highlight .dl {
        color: #dca35f
    }

    /* Literal.String.Delimiter */
    .highlight .sd {
        color: #dca35f;
        font-style: italic
    }

    /* Literal.String.Doc */
    .highlight .s2 {
        color: #dca35f
    }

    /* Literal.String.Double */
    .highlight .se {
        color: #dc8b50;
        font-weight: bold
    }

    /* Literal.String.Escape */
    .highlight .sh {
        color: #dca35f
    }

    /* Literal.String.Heredoc */
    .highlight .si {
        color: #dca3bb;
        font-weight: bold
    }

    /* Literal.String.Interpol */
    .highlight .sx {
        color: #8fbc8f
    }

    /* Literal.String.Other */
    .highlight .sr {
        color: #dca3bb
    }

    /* Literal.String.Regex */
    .highlight .s1 {
        color: #dca35f
    }

    /* Literal.String.Single */
    .highlight .ss {
        color: #a8a8d0
    }

    /* Literal.String.Symbol */
    .highlight .bp {
        color: #8fbc8f
    }

    /* Name.Builtin.Pseudo */
    .highlight .fm {
        color: #8f8fdc
    }

    /* Name.Function.Magic */
    .highlight .vc {
        color: #a8a8d0
    }

    /* Name.Variable.Class */
    .highlight .vg {
        color: #a8a8d0
    }

    /* Name.Variable.Global */
    .highlight .vi {
        color: #a8a8d0
    }

    /* Name.Variable.Instance */
    .highlight .vm {
        color: #a8a8d0
    }

    /* Name.Variable.Magic */
    .highlight .il {
        color: #cccccc
    }

    /* Literal.Number.Integer.Long */
}

/* --- Custom styles for post list --- */

/* Style the post list specifically */
main>ul {
    /* Assuming the post list is the main ul in the main section */
    list-style-type: none;
    /* Remove list bullets */
    padding-left: 0;
    /* Remove default padding */
    margin-left: 0;
    /* Remove default margin */
}

/* Style post titles (h2) */
main>ul>li>h2 {
    font-weight: 100;
    /* Match non-blog style */
    margin-bottom: 0.25em;
    /* Add some space below title */
}

/* Style links within post titles */
main>ul>li>h2 a {
    text-decoration: none;
    /* No underlining */
    color: #6697db;
    /* Use the specific blue from non-blog style */
}

main>ul>li>h2 a:hover {
    color: gray;
    /* Match non-blog hover color */
    text-decoration: none;
    /* Ensure no underline appears on hover */
}

/* Adjust post meta paragraph */
main>ul>li>p.post-meta {
    margin-top: 0;
    /* Reduce space between title and meta */
}

/* Style the blog navigation container - RULE REMOVED */

/* Use flexbox for blog nav items to arrange side-by-side - RULE REMOVED */

/* Ensure MathJax elements are displayed correctly */
mjx-container {}