@font-face{
    font-family: 'Source Han Sans VF';
    src: local('Source Han Sans SC'),
         local('Noto Sans SC'),
         local('Noto Sans CJK SC'),
         url('SourceHanSansSC-VF-GB2312subset.woff2') format('woff2-variations');
    font-weight: 200 900;
    font-style: normal;
    font-stretch: normal;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    height: 100%;
    background-color: light-dark(#cfcfcf, #171717);
}

/* 要注意表单元素并不继承父级 font 的问题 */
body {
    color: light-dark(#000, #fff);
    background-color: light-dark(#cfcfcf, #171717);
    font-family: 'Fira Sans', 'Noto Sans SC', 'Source Han Sans VF', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

.container {
    flex-grow: 1;
}

a {
    color: #5481bc;
}

pre, code { 
    background-color: light-dark(#bfbfbf, #343540);
    font-family: 'Fira Mono', Consolas, "Courier New", monospace;
    line-height: 1.25;
}
code { 
    padding: 2px 4px;
    color: light-dark(#000, #fff);
}
pre {
    padding: 8px;
    overflow: auto;
    max-height: 400px;
}
pre code {
    padding: 3px;
    color: light-dark(#000, #fff);
}

.col-9 {
    width: 100%;
    padding: 0;
}
@media (min-width: 768px) {
    .col-9 {
        width: 90%;
        padding: 0 5%;
    }
}

#nav-title {
    display: flex;
    flex-direction: row;
    height: 3em;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: light-dark(#bfbfbf, #343540);
    white-space: wrap;
}

#nav-title {
    .back-index img {
        height: 100%;
        width: auto;
        white-space: nowrap;
        overflow: hidden;
        background-color: #f4df4b;
    }

    .back-index {
        display: inline-block;
        height: 100%;
    }

    .site-desc, .back-desc {
        display: block;
        background-color: #f4df4b;
        color: #000;
        padding: 0 0.5em 0 0.5em;
        margin-right: 1em;
        height: 100%;
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
    }

    .back-desc {
        font-size: 1.3em;
        line-height: 2.4em;
        font-weight: 400;
    }

    .site-desc #site-title {
        font-size: 1.3em;
        font-weight: 400;
    }

    .site-desc #description {
        font-size: 0.8em;
        line-height: 0.2;
    }

    & #title-space {
        flex-grow: 1;
    }
}

/* Dropdown menu */
.dropdown {
    position: relative;
    display: inline-block;
    height: 100%;
}

input[itemprop='menu-box'] {
    display: none;
}

.menu-label {
    cursor: pointer;
    height: 100%;
    display: inline-block;
    align-items: center;
    padding-left: 0.6em;
    padding-right: 0.8em;
    background-color: light-dark(#fff, #343540);
    font-weight: 400;
    transition: ease filter 0.3s;
    white-space: nowrap;
}

.menu-label:hover {
    filter: brightness(150%);
}

.menu-label:before{
    content: "";
    background: #89b53f;
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80%;
    width: 0.5em;
}

.menu-items {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    list-style: none;
    width: 10em;
}

input[itemprop='menu-box']:checked + .menu-label + .menu-items {
    display: block;
}

.menu-items li {
    padding: 0.5em 0.5em;
    background-color: light-dark(#bfbfbf, #343549);
    &:hover {
        filter: brightness(150%);
    }
    border-bottom: 1px solid;
    border-bottom-color: light-dark(#f2f2f2,#4A5157)
}

.menu-items li a {
    text-decoration: none;
    display: block;
}

#nav-menu {
    display: flex;
    flex-direction: row;
    margin-bottom: 1em;
    border-right: none;
    height: 2em;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    background-color: light-dark(#fff, #343540);
    white-space: wrap;
    & #nav-spacer {
        flex-grow: 1;
    }
}

.menu-label[for='other-menu'] {
    &:before {
        display: none;
    }
    border-top: 5px solid #89b53f;
    padding-top: 0.2em;
    & ~ .menu-items {
        width: 16em;
        z-index: 1;
        & input[name='s'] {
            max-width: 12em;
        }
    }
}

.menu-label[for='newpost-menu'] {
    &:before {
        background: #b63437;
    }
    & ~ .menu-items {
        width: 15em;
    }
}

.menu-label[for='category-menu'] {
    &:before {
        background: #285e94;
    }
    & ~ .menu-items {
        width: 5em;
    }
}

.menu-label[for='date-menu']:before {
    background: #e27838;
}

.menu-label[for='comment-menu'] {
    &:before {
        background: #454ca5;
    }
    & ~ .menu-items {
        width: 15em;
    }
}


.menu-label[for='newpost-menu'] ~ .menu-items {
    left: 0;
    right: unset;
}


/* Index entries */

.entry {
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 1em 0em 1em;
    border-bottom: 1px solid #4a5157;
    margin-bottom: 0;
    background-color: light-dark(#f2f2f2, #23242b);
}

.entry-left {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
}

.entry-title {
    margin: 0;
    padding-top: 0.15em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.entry-meta {
    list-style: none;
    line-height: 1.5;
    color: #999;
}

.entry-meta li {
    display: inline-block;
    margin: 0;
}

.entry-meta li > * {
    padding-right: 0.5em;
    color: light-dark(#000, #fff);
}

.entry-meta li[itemprop='author'] {
    background-color: light-dark(#bfbfbf, #343540);
    padding-left: 0.5em;
}

.entry-content {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    height: 2em;
}

.entry-category {
    padding: 5px 0 5px 5px;
    margin: 1em;
    line-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: stretch;
    align-items: end;
    min-width: 4em;
}

.entry-category li {
    font-weight: 400;
    height: 1.5em;
    text-align: left;
    width: 100%;
    border-left: 5px solid;
}

.entry-category li > a {
    display: inline-block;
    text-decoration: none;
    color: light-dark(#000, #fff);
    padding-left: 0.25em;
    transition: background 0.3s ease;
    width: 100%;
    height: 100%;
    background: light-dark(#f2f2f2ff, #23242bff);
}

.entry-category li > a:hover {
    background: unset;
}

/* post page */
.post {
    max-width: 100%;
    padding: 0 1em 0em 1em;
    background-color: light-dark(#f2f2f2, #23242b);
}

.post-title a {
    text-decoration: none;
}

.post-meta {
    line-height: 1.5;
    margin: 0;
}

.post-meta li {
    list-style: none;
    display: inline-block;
    padding-right: 0.5em;
    color: light-dark(#000, #fff);
}

.post-meta li[itemprop='cid'] {
    padding-left: 0.5em;
    background-color: light-dark(#bfbfbf, #343540);
    font-weight: 400;
    float: right;
}

/*
.post-meta li[itemprop='author'] {
    background-color: light-dark(#e2e2da, #42434b);
    padding-left: 0.5em;
}
*/

.post-meta-cats {
    list-style: none;
}

.post-meta-cats li {
    display: inline-block;
    height: 1.5em;
    margin: 0;
    border-left: 5px solid;
}

.post-meta-cats li > a {
    font-weight: 400;
    display: inline-block;
    text-decoration: none;
    color: light-dark(#000, #FFF);
    padding-left: 0.25em;
    padding-right: 0.25em;
    transition: background 0.3s ease;
    background: light-dark(#f2f2f2ff, #23242bff);
}
.post-meta-cats li > a:hover {
    background: unset;
}

/* post keywords */
.tags {
    padding-top: 1em;
}
.tags a {
    padding: 3px;
    border: 1px solid;
    font-weight: 400;
}

.tags a:hover {
    text-decoration: none;
    padding: 1px;
    border: 3px solid;
}

/* post near */
.post-near {
    background-color: light-dark(#f2f2f2, #23242b);
    display: flex;
    flex-direction: row;
    align-items: center;
    max-width: 100%;
    padding: 1em 0 1em;
    position: relative;
}

.post-near a {
    color: #fff;
    text-decoration: none;
}

.post-near #larrow{
    width: auto;
    height: 1.5em;
}

.post-near #rarrow {
    width: auto;
    height: 1.5em;
    transform: rotate(180deg);
}

.near-bar {
    display: flex;
    flex-grow: 1;
    height: 1.5em;
    background-color: #8098a2;
    justify-content: space-between;
    max-width: calc(100% - 3em);
    font-weight: 500;
    color: #fff;
}

.near-bar #ltext {
    padding-left: 0.5em;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.near-bar #rtext {
    padding-right: 0.5em;
    text-align: right;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Page nav */
.page-navigator {
  list-style: none;
  margin: 25px 0;
  padding: 0;
  text-align: center;
}
.page-navigator li {
  display: inline-block;
  margin: 0 4px;
}
.page-navigator a {
  display: inline-block;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
}
.page-navigator a:hover {
  background: #EEE;
  text-decoration: none;
}

.page-navigator .current a {
  color: #444;
  background: #EEE;
}

/* Temporary Sidebar Hide Fix */
@media (max-width: 767px) {
    .kit-hidden-mb {
        display: none; } }
@media (max-width: 991px) {
    .kit-hidden-tb {
        display: none; } }
/* ------------------
 * Comment list
 * --------------- */
#comments {
    max-width: 100%;
    margin-top: 1em;
    padding: 1em 1em 1em 1em;
    background-color: light-dark(#f2f2f2, #23242b);
}

#comments-header {
    margin-bottom: 1em;
}

#comments-header > h3 {
    display: inline-flex;
}

#comments-header > h3[itemprop='count'] {
    color: #fff;
    padding: 0 0.5em 0 0.5em;
    background-color: #8098a2;
}
.comment-list, .comment-list ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.comment-list li {
    margin: 0.5em 0 0.5em;
    padding: 0.25em 0 0.25em 0.5em;
    border-left: 2px solid #EEE;
}
/*
.comment-list li.comment-level-odd {
  background: #343540;
}
.comment-list li.comment-level-even {
  background: #23242b;
}
.comment-list li.comment-by-author {
  background: #414d51;
}
*/
.comment-meta {
    margin-left: 0.5em;
    display: inline-block;
}
.comment-meta a {
  color: #999;
}
.comment-author {
  display: inline-block;
  color: light-dark(#000, #fff);
}
.comment-author .avatar {
  float: left;
  margin-right: 0.5em;
}
.comment-list li .comment-reply {
    text-align: right;
    font-weight: 400;
}

/* Comment new reply */
.comment-list .respond {
  margin-top: 15px;
  border-top: 1px solid #EEE;
}
.respond .cancel-comment-reply {
  float: right;
  margin-top: 15px;
  font-size: .92857em;
}
#comment-form label {
  display: inline-block;
  margin-bottom: .5em;
  font-weight: bold;
  min-width: 4em;
  padding-right: 0.5em;
  text-align: end;
}
#comment-form .required:before{
  content: " *";
  color: #C00;
}

textarea {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    width: 100%;
}

#footer {
    font-size: 0.8em;
    padding: 0 5% 0 5%;
    display: block;
}