@layer vars;
@import url(highlight.css) layer(highlight);
@import url(base.css) layer(base);
@layer custom;
@layer dark;
@import url(gsc.css) layer(gsc);

@layer vars {
    * {
        --black-body-bg: rgb(37, 37, 37);
    }
}

@layer custom {
    a[href$=".pdf"]::before {
        background-image: url(pdf.png);

        content: "";
        display: inline-block;
        vertical-align: middle;
        width: 1.2em;
        height: 1.2em;
        background-size: 100%;
        margin-inline-end: 0.5em;
        opacity: 0.8;
    }
    body {
        background-color: aliceblue;
    }

    iframe {
        width: min(100%, 30rem);
        height:  14rem;
    }
}

@layer dark {
    * {
        font-optical-sizing: auto;
        font-style: normal;
        --title-color: papayawhip;
    }

    @media (prefers-color-scheme: dark) {

        body,
        div {
            background-color: lab(from var(--black-body-bg) l a b);
            color: lab(from rgb(223, 221, 221) calc(l - 1) a b);
        }

        a{
            color: lab(from rgb(229 229 229) calc(l - 1) a b);
        }

        pre, code {
            background-color: rgb(32, 27, 27);
            border: 1px solid #3a3939;
            scrollbar-color: rgb(44 41 41) rgb(0, 9, 9);
        }

        a.site-nav,
        a.page-link {
            color: bisque;
        }

        a.site-title {
            color: var(--title-color);
        }

        a.site-title:visited {
            color: var(--title-color);
        }

        a.post-link {
            color: lab(from seashell calc(l - 1) a b);
        }

        a:visited {
            color: lab(from slategray calc(l + 20) a b);
        }

        a:hover {
            color: lab(from rgb(255, 206, 251) calc(l - 10) a b);
            text-decoration: underline;
        }

        a.site-title:hover {
            color: inherit;
        }

        blockquote {
            color: #9ea75a;
        }

        .highlight {
            background: #292929;
        }

        .highlight .nt {
            color: rgb(204, 203, 203);
        }


        .highlighter-rouge .highlight {
            background: var(--black-body-bg);
        }
    }
}