:root { color-scheme: light dark; }

* {
    margin: 0;
    padding: 0;
}

p {
    word-break: break-word;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
}

a {
    color: #007aff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.post-list h1 a {
    color: inherit;
}

.sponsor-banner {
    font-size: 1rem;
    max-width: 800px;
    margin: auto;
    background: #6D6D98;
    border-radius: 16px;
    margin-top: 25px;
}

@media(max-width: 800px) {
    .sponsor-banner {
        margin: 20px;
    }
}

.sponsor-banner a {
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    line-height: 1.5;
}

.sponsor-banner a:hover {
    opacity: 0.8;
}

.sponsor-banner a span {
    opacity: 0.75;
}

.sponsor-banner img {
    flex: 0 1 auto;
    width: 59px;
    min-width: 59px;
}

.texty-heady {
    margin-right: 50px;
}

#content img, #content video {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    padding: 20px 0;
    display: block;
    margin: auto auto 20px auto;
}

.width-50 {
    width: 50%;
}

.width-75 {
    width: 75%;
}

header {
    background-color: #27112e;
	background-image: url("header-bg-retina.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom;

    color: #fff;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

.me-description {
    color: #ddd;
}

a img:hover {
    opacity: 0.7;
}

figcaption {
    text-align: center;
    opacity: 0.7;
    margin-top: -20px;
}

.post-navigation {
    margin: 50px 0;
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
}

header h1 a {
    color: #fff;
}

header h1 {
    margin: 35px 0 25px 0;
}

article h1 {
    margin: 45px 0 0 0;
}

h2, h3, h4, h5, h6 {
    margin: 35px 0 16px 0;
}

h4#date {
    margin-top: 5px;
    margin-bottom: 40px;
    font-weight: 400;
    opacity: 0.7;
}

#content {
    margin: 0 auto;
    max-width: 800px;
    padding: 0 20px;
}

hr {
    opacity: 0.3;
    border: 1px solid;
    margin: 100px 0;
}

header nav {
    margin: 0 auto;
    padding: 20px 40px;
    max-width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    /* flex-direction: column; */
}

header nav h1 {
    font-size: 1.6rem;
    font-weight: 600;
}

header nav img {
    width: 65px;
}

.header-apps {
    display: flex;
    flex: 1 1 auto;
}

.header-apps a {
    display: inline-block;
    padding: 0 12px;
}

header nav p {
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.5;
}

blockquote {
    margin: 0;
    padding-left: 12px;
    border-left: 1.5px solid;
    opacity: 0.55;
}

p {
    margin: 22px 0;
}

article {
    font-size: 1.1rem;
    line-height: 1.5;
}

article h1 {
    font-size: 2.7rem;
}

article h2 {
    font-size: 2.2rem;
}

article h3 {
    font-size: 1.6rem;;
}

article h4 {
    font-size: 1.4rem;;
}

article h5 {
    font-size: 1.2rem;;
}

article h6 {
    font-size: 1.0rem;;
}

code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 14px;
    opacity: 0.7;

    background-color: #eee;
    border-radius: 5px;
    padding: 2px 4px;
}

pre {
    padding: 16px 30px;
}

pre code {
    opacity: 1.0;
}

.highlight {
    padding: 8px 0;
}

ul.posts {
    list-style: none;
}

article ul {
    list-style-type: disc;
    padding-left: 2.5rem;
}

article ol {
    padding-left: 2.5rem;
}

.highlight pre {
    border-radius: 8px;
    overflow-x: auto; 
    padding: 16px 18px;
    line-height: 1.6;
}

/* Code block */
.highlight code {
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9rem;
    background-color: inherit;
}

footer {
    margin-top: 100px;
    text-align: center;
}

footer .copyright {
    opacity: 0.7;
}

ul.posts-by-year {
    padding-left: 1.6rem;
    line-height: 2;
}

@media (prefers-color-scheme: dark) {
    body {
        background: #202022;
        color: #ccc;
    }

    h1, h2, h3, h4, h5, h6 {
        color: #eee;
    }

    code {
        background-color: #2D2E30;
    }

    .sponsor-banner {
        background: #252538;
    }    

    .sponsor-banner a span {
        opacity: 0.6;
    }
} 

@media(max-width: 600px) {
    .texty-heady {
        margin-right: 0;
    } 

    .texty-heady h1 {
        text-align: center;
    }

    .texty-heady p {
        text-align: center;
    }

    .highlight code {
        font-size: 0.85rem;
    }

    article {
        font-size: 1.0rem;
    }
    
    article h1 {
        font-size: 2.0rem;
    }
    
    article h2 {
        font-size: 1.7rem;
    }

    article h3 {
        font-size: 1.5rem;
    }

    article h4 {
        font-size: 1.3rem;
    }

    article h5 {
        font-size: 1.15rem;
    }

    article h6 {
        font-size: 1.0rem;
    }
    
    code {
        font-size: 13px;
    }

    .width-50 {
        width: initial;
    }
    
    .width-75 {
        width: initial;
    }
}

/* Background */ .chroma { color: #9397B8; background-color: #1E1F29 }
/* Other */ .chroma .x { color: #cb4b16 }
/* Keyword */ .chroma .k { color: #B175DC }
/* KeywordConstant */ .chroma .kc { color: #cb4b16 }
/* KeywordDeclaration */ .chroma .kd { color: #B175DC }
/* KeywordNamespace */ .chroma .kn { color: #cb4b16 }
/* KeywordPseudo */ .chroma .kp { color: #719e07 }
/* KeywordReserved */ .chroma .kr { color: #268bd2 }
/* KeywordType */ .chroma .kt { color: #dc322f }
/* NameBuiltin */ .chroma .nb { color: #E4762A }
/* NameBuiltinPseudo */ .chroma .bp { color: #268bd2 }
/* NameClass */ .chroma .nc { color: #268bd2 }
/* NameConstant */ .chroma .no { color: #cb4b16 }
/* NameDecorator */ .chroma .nd { color: #268bd2 }
/* NameEntity */ .chroma .ni { color: #cb4b16 }
/* NameException */ .chroma .ne { color: #cb4b16 }
/* NameFunction */ .chroma .nf { color: #268bd2 }
/* NameTag */ .chroma .nt { color: #268bd2 }
/* NameVariable */ .chroma .nv { color: #268bd2 }
/* LiteralString */ .chroma .s { color: #FC6A5D }
/* LiteralStringAffix */ .chroma .sa { color: #FC6A5D }
/* LiteralStringBacktick */ .chroma .sb { color: #586e75 }
/* LiteralStringChar */ .chroma .sc { color: #FC6A5D }
/* LiteralStringDelimiter */ .chroma .dl { color: #FC6A5D }
/* LiteralStringDouble */ .chroma .s2 { color: #FC6A5D }
/* LiteralStringEscape */ .chroma .se { color: #cb4b16 }
/* LiteralStringInterpol */ .chroma .si { color: #FC6A5D }
/* LiteralStringOther */ .chroma .sx { color: #FC6A5D }
/* LiteralStringRegex */ .chroma .sr { color: #dc322f }
/* LiteralStringSingle */ .chroma .s1 { color: #FC6A5D }
/* LiteralStringSymbol */ .chroma .ss { color: #FC6A5D }
/* LiteralNumber */ .chroma .m { color: #F05E66 }
/* LiteralNumberBin */ .chroma .mb { color: #F05E66 }
/* LiteralNumberFloat */ .chroma .mf { color: #F05E66 }
/* LiteralNumberHex */ .chroma .mh { color: #F05E66 }
/* LiteralNumberInteger */ .chroma .mi { color: #F05E66 }
/* LiteralNumberIntegerLong */ .chroma .il { color: #F05E66 }
/* LiteralNumberOct */ .chroma .mo { color: #F05E66 }
/* Operator */ .chroma .o { color: #F05E65 }
/* OperatorWord */ .chroma .ow { color: #719e07 }
/* Comment */ .chroma .c { color: #586e75 }
/* CommentHashbang */ .chroma .ch { color: #586e75 }
/* CommentMultiline */ .chroma .cm { color: #586e75 }
/* CommentSingle */ .chroma .c1 { color: #586e75 }
/* CommentSpecial */ .chroma .cs { color: #719e07 }
/* CommentPreproc */ .chroma .cp { color: #719e07 }
/* CommentPreprocFile */ .chroma .cpf { color: #719e07 }
/* GenericDeleted */ .chroma .gd { color: #dc322f }
/* GenericEmph */ .chroma .ge { font-style: italic }
/* GenericError */ .chroma .gr { color: #dc322f; font-weight: bold }
/* GenericHeading */ .chroma .gh { color: #cb4b16 }
/* GenericInserted */ .chroma .gi { color: #719e07 }
/* GenericStrong */ .chroma .gs { font-weight: bold }
/* GenericSubheading */ .chroma .gu { color: #268bd2 }

/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #495050 }
/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; }
/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; }
/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc }
/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #495050 }