:root {
    --gap: 24px;
    --content-gap: 20px;
    --nav-width: 1024px;
    --main-width: 720px;
    --header-height: 60px;
    --footer-height: 60px;
    --radius: 8px;
    --theme: #fff;
    --entry: #fff;
    --primary: rgba(0, 0, 0, 0.88);
    --secondary: rgba(0, 0, 0, 0.56);
    --tertiary: rgba(0, 0, 0, 0.16);
    --content: rgba(0, 0, 0, 0.88);
    --hljs-bg: #1c1d21;
    --code-bg: #f5f5f5;
    --border: #eee
}

@media screen and (max-width:600px) {
    :root {
        --gap: 14px
    }
}

.dark {
    --theme: #1d1e20;
    --entry: #2e2e33;
    --primary: rgba(255, 255, 255, 0.84);
    --secondary: rgba(255, 255, 255, 0.56);
    --tertiary: rgba(255, 255, 255, 0.16);
    --content: rgba(255, 255, 255, 0.64);
    --hljs-bg: #2e2e33;
    --code-bg: #37383e;
    --border: #5b5d67
}

.list {
    background: var(--code-bg)
}

.dark.list {
    background: var(--theme)
}