*,
*::before,
*::after{
    box-sizing:border-box;
}
:root {
    /* Layout */
    --content-width: 760px;
    --radius:8px;
    --border-width:1px;

    /* Typography */
    --font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        "PingFang SC",
        "Microsoft YaHei UI",
        "Microsoft YaHei",
        sans-serif;
    --font-size:1rem;
    --line-height:1.8;
    --title-size:1.6rem;

    /* Spacing */
    --space-1:.25rem;
    --space-2:.5rem;
    --space-3:.75rem;
    --space-4:1rem;
    --space-5:1.5rem;
    --space-6:2rem;
    --space-7:3rem;
    color-scheme: light dark;

    /* Colors */
    --background: #fff;
    --heading: #222;
    --text: #444;
    --link: #3273dc;
    --visited: #8b6fcb;
    --focus:#4c9aff;

    
    --border:#999;
    --time:#666;

    --code-bg: #f2f2f2;
    --code-text: #222;
    --input-bg:#f9f9f9;
    --input-border:#ddd;
    --input-text:#333;
    --placeholder:#aaa;

    /* Others */
    --code-padding:.125rem .25rem;
    --blockquote-padding:1.25rem;
    --date-width:10ch;
    --input-width:24rem;
    --input-padding-y:.5rem;
    --input-padding-x:1rem;
    --border-color:#999;
    --transition-fast:.2s;
}
@media(prefers-color-scheme:dark) {
    :root {
        --background: #121212;
        --heading: #eee;
        --text: #ddd;
        --link: #8cc2dd;
        --visited: #8b6fcb;
        --code-bg: #000;
        --code-text: #ddd;
        --input-bg:#212121;
        --input-border:#28586a;
        --input-text:#eee;
        --time:#94a3b8;
    }
}
@media (prefers-reduced-motion: reduce) {
    *{
        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;
    }
}
body {
    margin:0 auto;
    padding:var(--space-5);
    max-width:var(--content-width);
    font-family:var(--font-family);
    font-size:var(--font-size);
    line-height:var(--line-height);
    color:var(--text);
    background:var(--background);
    overflow-wrap:anywhere;
}
h1,h2,h3,h4,h5,h6{
    color:var(--heading);
    line-height:1.3;
}
a {
    color: var(--link);
    cursor: pointer;
    text-decoration: none;
}
a:hover {
    text-decoration: underline
}
header{
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    margin-bottom:var(--space-5);
}
nav {
    display:flex;
    gap:var(--space-4);
    flex-wrap:wrap;
}
strong,
b {
    color: var(--heading)
}
button {
    margin: 0;
    cursor: pointer;
    font:inherit;
}
table {
    width: 100%
}
hr {
    border: 0;
    border-top: var(--border-width) dashed
}
img {
    max-width: 100%
}
code {
    font-family:ui-monospace,
                SFMono-Regular,
                Consolas,
                monospace;
    padding: var(--code-padding);
    background-color: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--radius);
}
blockquote {
    border-left: var(--border-width) solid var(--border);
    color: var(--code-text);
    padding-left: var(--blockquote-padding);
    font-style: italic
}
footer {
    margin-top:var(--space-7);
    padding-bottom:var(--space-4);
    text-align: center
}
.title{
    text-decoration:none;
}
.title:hover {
    text-decoration: none;
}
.title h1 {
    margin:0;
    font-size: var(--title-size);
}
.inline {
    width: auto !important
}
.highlight,
.code {
    padding: 1px 15px;
    background-color: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--radius);
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    overflow-x: auto
}
.blog-posts {
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap:var(--space-3);
}
.blog-posts li {
    display: flex;
    gap:var(--space-6);
    align-items:baseline;
}
.blog-posts time {
    color: var(--time);
}
.blog-posts li span {
    flex: 0 0 var(--date-width);
}
.blog-posts li a:visited {
    color: var(--visited)
}
#searchInput {
    max-width:var(--input-width);
    padding:
        var(--input-padding-y)
        var(--input-padding-x);
    font-size: var(--font-scale);
    color: var(--input-text);
    background-color: var(--input-bg);
    border: var(--border-width) solid var(--input-border);
    border-radius: var(--radius);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#searchInput:hover {
    border-color: var(--border);
}     
#searchInput:focus {
    border-color:var(--focus);
    box-shadow:0 0 0 .1rem var(--focus);
}
#searchInput::placeholder {
    color: var(--placeholder);
    opacity: 1;
}
[hidden] {
    display: none !important;
}