:root {
    --fg: #d9d7cc;
    --fag: #8ce5e9;
    --faag: #35cfd5;
    --bg: #251b41;
    --bg2: #491ebe;
    --purple-gradient: rgba(2, 0, 36, 1) 0%, rgb(144, 64, 150) 0%, rgb(52, 1, 99) 100%;
    --font-default: Atkinson Hyperlegible, sans-serif, sans-serif;
    --font-mono: Atkinson Hyperlegible Mono, monospace, monospace;
}
body {
    color: var(--fg);
    background: linear-gradient(30deg, var(--bg) 0%, var(--bg2) 100%);
    min-height: 100vh;
    font-family: var(--font-default);
}
@keyframes logoanim {
    0% {
        /* https://stackoverflow.com/a/63791417 for a version with angle */
        background-position: 100px 0%;
    }
}
#logo {
    background-image: linear-gradient(
        90deg in oklab,
        hsl(0deg 100% 50%),
        hsl(30deg, 100%, 50%),
        hsl(60deg, 100%, 50%),
        hsl(90deg, 100%, 50%),
        hsl(120deg, 100%, 50%),
        hsl(150deg, 100%, 50%),
        hsl(180deg, 100%, 50%),
        hsl(210deg, 100%, 50%),
        hsl(240deg, 100%, 50%),
        hsl(270deg, 100%, 50%),
        hsl(300deg, 100%, 50%),
        hsl(330deg, 100%, 50%),
        hsl(360deg, 100%, 50%) 100px
    );
    background-size: 100px 100%;
    background-repeat: repeat;
    background-clip: text;
    color: transparent;
    animation: 5s linear logoanim infinite;
    text-stroke: 1px white;
}

header {
    background: linear-gradient(100deg, var(--purple-gradient));
    border-bottom: var(--bg) 2px solid;
    a {
        text-decoration: none;
    }
}
a {
    --link-color: var(--fag);
}

.blog-post .tag, .blog-list .tag {
    font-family: var(--font-mono);
    padding: 3px;
    margin: 5px;
    background: #493d5f;
    color: var(--faag);
}
.blog-post {
    code {
        color: #00f2ff;
        font-family: var(--font-mono);
    }
    code.sourceCode {
        --code-token-constant: #00ff9d;
        --code-token-comment: #8a9cad;
        --code-token-keyword: #ff0000;
        --code-token-parameter: #dd00ff;
        --code-token-function: #0095ff;
        --code-token-string: #09ff00;
        --code-token-string-expression: #09ff00;
        --code-token-punctuation: #dd0000;
        --code-token-link: #ee0000;
        .op {
            color: var(--code-token-punctuation);
        }
        .kw {
            color: var(--code-token-keyword);
        }
        .dv {
            color: var(--code-token-constant);
        }
        .va {
            /* color: var(--code-token-function); */
        }
        .st {
            color: var(--code-token-string);
        }

    }

    div.sourceCode {
        border: 1px solid #7f8f97;
        margin-top: 1em;
        margin-bottom: 1em;
        .attribution {
            padding: 0.5em;
            border-bottom: 1px solid #7f8f97;
            text-align: right;
            background-color: #24292e;
        }
    }
    pre.sourceCode {
        background-color: #697885;
        background-image: linear-gradient(-10deg,var(--purple-gradient));
        background-blend-mode: multiply;
    }
}

hr {
    margin: 1em 1em;
}