html { -webkit-text-size-adjust: 100%; }

body { margin: 0; padding: 0; font-family: -apple-system, "Helvetica Neue", Helvatica, Verdana, Arial, "Source-Han-Sans-SC", "Heiti SC", Heiti, sans; font-size: 15px; color: #222831; background-color: #ffffff; }
@media (prefers-color-scheme: dark) { body { color: #E3E7EF; background-color: #222222; } }

.s { color: #595E66; }
@media (prefers-color-scheme: dark) { .s { color: #92979F; } }

a { text-decoration: none; color: inherit; }

#header { padding: 10px 0; background-color: #eeeeee; }
@media (prefers-color-scheme: dark) { #header { background-color: #3d3d3d; } }
#header .content { display: flex; flex-wrap: nowrap; justify-content: space-between; max-width: 620px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
#header .content .leading, #header .content .trailing { display: flex; gap: 20px; }
#header .content a.nav-item { display: flex; font-size: 16px; font-weight: 500; line-height: 40px; }
#header .content a.nav-item:hover { color: #b55400; }
@media (prefers-color-scheme: dark) { #header .content a.nav-item:hover { color: #E67B1E; } }
#header .content .nav-item-home { gap: 6px; }
#header .content .nav-item-home .site-logo { width: 40px; height: 40px; background-size: cover; background-repeat: no-repeat; background-image: url("/assets/site/logo.svg"); }
@media (prefers-color-scheme: dark) { #header .content .nav-item-home .site-logo { background-image: url("/assets/site/logo-dark.svg"); } }
#header .content .nav-item-home .site-name { font-family: Charter, Palatino, Cambria, Times, "Source-Han-Serif-SC", SimSun, serif; font-size: 1.35rem; font-weight: bold; }
#header .content .nav-item-home .site-name strong { color: #b55400; }
@media (prefers-color-scheme: dark) { #header .content .nav-item-home .site-name strong { color: #E67B1E; } }
#header .content .nav-item:before { content: ""; display: block; width: 32px; height: 40px; line-height: 40px; background-color: clear; }
#header .content .nav-item:before { mask-size: 24px 24px; mask-position: center; mask-repeat: no-repeat; -webkit-mask-size: 24px 24px; -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; background-color: #222831; }
@media (prefers-color-scheme: dark) { #header .content .nav-item:before { background-color: #E3E7EF; } }
#header .content .nav-item:hover:before { background-color: #b55400; }
@media (prefers-color-scheme: dark) { #header .content .nav-item:hover:before { background-color: #E67B1E; } }
#header .content .nav-item-home:before { content: none; }
#header .content .nav-item-blog:before { mask-image: url("/assets/icons/align-left.svg"); -webkit-mask-image: url("/assets/icons/align-left.svg"); }
#header .content .nav-item-now:before { mask-image: url("/assets/icons/coffee.svg"); -webkit-mask-image: url("/assets/icons/coffee.svg"); }

#footer { font-size: 0.85rem; line-height: 20px; color: #595E66; background-color: #eeeeee; }
@media (prefers-color-scheme: dark) { #footer { color: #92979F; background-color: #3d3d3d; } }
#footer .content { padding: 40px 20px; max-width: 840px; box-sizing: border-box; text-align: center; margin: 0 auto; }
#footer .content .nav-list { margin: 20px auto; }
#footer .content .nav-list a.nav-item { color: inherit; text-decoration: none; font-weight: bold; display: inline-block; margin: 0 6px; padding: 2px 4px; }
#footer .content .nav-list a.nav-item:hover { color: #222831; }
@media (prefers-color-scheme: dark) { #footer .content .nav-list a.nav-item:hover { color: #E3E7EF; } }
#footer .content .copyright { margin: 10px 0 40px 7px; }