:root {
    color-scheme: light dark;
}
* {
    background-color:clear;
    border:none;
    direction:ltr;
    font-family: "SF Pro Display", "SF Pro Icons", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-family: system-ui;
    font-kerning: normal;
    font-style: normal;
    font-weight: normal;
    margin:0;
    padding:0;
    text-align:left;
    text-decoration: none;
}
html {
    -webkit-font-smoothing: antialiased;
    font-size: 100%;
}
main {
    background-color: #fff;
    margin: 15vw 0 15vw 0;
    padding: 5vw;
    font-size: 1.1rem;
    line-height: 1.6rem;
}
a {
    color: hsl(212, 97%, 43%);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
}
a:hover {
    background: hsla(212, 97%, 43%, 8%);
    color: hsl(212, 97%, 40%);
}
a:visited {
    text-decoration: underline dotted;
}
a.bsky {
    font-weight: 600;
    color: hsl(225, 87%, 62%);
}
a.bsky:hover {
    background: hsla(225, 87%, 62%, 8%);
    color: hsl(225, 87%, 52%);
}
a.mastodon {
    font-weight: 600;
    color: hsl(240, 89%, 68%);
}
a.mastodon:hover {
    background: hsla(240, 89%, 68%, 8%);
    color: hsl(240, 89%, 58%);
}
a.substack {
    font-weight: 600;
    color: hsl(20, 100%, 55%);
}
a.substack:hover {
    background: hsla(20, 100%, 45%, 8%);
    color: hsl(20, 100%, 45%);
}
h1, h2, h3 {
    color:#818181;
    letter-spacing: 0.01rem;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.8rem;
    max-width: 440px;
    padding: 1.6rem 0;
}
h1 b, h2 b, h3 b {
    color: #333;
    font-weight: 600;
    letter-spacing: 0.018rem;	
}
h4, p, details {
    padding: .4rem 3vw;
}
h4, p {
    max-width: 680px;
}
details {
/*     display: table; */
    padding: 0.17rem 3vw;
}
h4 {
    color: #333;
    font-weight: 600;
}
p, details summary {
    color: #4a4a4a;
}
p b {
    color: #333;
    font-weight: 600;
    letter-spacing: 0.008rem;
}
code, pre {
    font-family: ui-monospace, "SFMono", "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
    font-size: 1rem;
    line-height: 1.2em;
    word-break: break-all;
}
pre {
    background: #f8f8f8;
    color: #000;
    display: table;
    padding: 0.3rem 0.5rem;
}
.pre-scroller {
    margin: 0.3rem 1.7rem;
    width: 100%;
    overflow: auto;
}
details summary {
    list-style: none;
    &::before {
        color: #000;
        content: "+";
        font-weight: 600;
        padding: 0 0.5rem;
    }
    [open] &::before {
        content: "−";
    }
}
details summary::-webkit-details-marker {
    display: none;
}
p i {
    color: #aaa;
}
code, p span {
    background: #f2f2f2;
    border-radius: 0.2rem;
    color: #181818;
    margin-left: 1px;
    padding: 1px 3px;
}
p mark {
    animation: 2s anim 8s 1 normal forwards;
    animation-timing-function: ease-out;
    background-color: none;
    background: linear-gradient(90deg, hsla(59, 100%, 50%, 30%) 50%, rgba(0, 0, 0, 0%) 50%);
    background-size: 200% 100%;
    background-position: 100% 0;
    border-radius: 0.2rem;
    color: #444;
    padding: 1px 3px;
    margin-left: 1px;
}
@keyframes anim {
    to {
        background-position: 0 0;
    }
}
section {
    padding: 1.0rem 0;
}
footer {
    background:#969696;
    font-size: 0px;		
    height: 8px;
    width: 8px;
    margin-top: 2rem;
}
@media (prefers-color-scheme: dark) {
    main {
        background-color: #303030;
        color: #ddd;
    }
    h1, h2, h3, h4 {
        color: #aaa;
    }
    h1 b, h2 b, h3 b, h4 b {
        color: #fff;
    }
    a {
        color: rgba(84, 130, 255, 0.84);
    }
    a:hover {
        color: rgb(84, 130, 255);
    }
    footer {
        background: #999;
    }
    p, details summary {
        color: #d0d0d0;
    }
    p b {
        color: #fff;
    }
    p mark {
        color: #fff;
    }
    code, p span, pre {
        background: #444;
        color: #fff;
    }
    details summary {
        &::before {
            color: #fff;
        }
    }
}