/**
 *  Publish Foundation theme
 *  Copyright (c) John Sundell 2019
 *  MIT license, see LICENSE file for details
 */

/* Colors */

:root {
    --header-background-color-light: #c62f1c;
    --header-background-color-dark: #c62f1c;
    --footer-background-color-light: #2c2c2c;
    --footer-background-color-dark: #2c2c2c;
    --wrapper-background-color-light: #f5f5f5;
    --wrapper-background-color-dark: #3d3d3d;
    --article-background-color-light: #fff;
    --article-background-color-dark: #292929;
    --blockquote-background-color-light: #efefef;
    --blockquote-background-color-dark: #353535;
    --blockquote-headline-color-light: 4px solid #c62f1c;
    --blockquote-headline-color-dark: 4px solid #c62f1c;
    --h2-border-bottem-line-light: 1px solid #ececec;
    --h2-border-bottem-line-dark: 1px solid #3a3a3a;
    --inline-code-background-light: #f2f2f2;
    --inline-code-background-dark: #7d5353;
    --sidebar-active-background-light: #f4f4f4;
    --sidebar-active-background-dark: #353535;
    --search-input-border-color-light: 1px solid #d1d1d1;
    --search-input-border-color-dark: 1px solid #5d5d5d;

    --tag-text-color-light: #ddd;
    --tag-text-color-dark: #ddd;
    --footer-text-color-light: #8a8a8a;
    --footer-text-color-dark: #8a8a8a;
    --item-title-color-light: #333;
    --item-title-color-dark: #e3e3e3;
    --content-text-color-light: #404040;
    --content-text-color-dark: #a3a3a3;
    --inline-code-text-color-light: #c7254e;
    --inline-code-text-color-dark: #fbdde5;
    --content-link-text-color-light: #0d75bb;
    --content-link-text-color-dark: #6190e8;


    --content-background-color-light: #fff;
    --content-background-color-dark: #333;
    --index-item-more-color-light: #8a8a8a;
    --index-item-more-color-dark: #7a7a7a;
    --item-list-separator-color-light: 1px solid #ececec;
    --item-list-separator-color-dark: 1px solid #3a3a3a;

    --item-title-hover-color: #ff3300;
    --section-header-title-color-light: #333;
    --section-header-title-color-dark: #bbb;
    --shadow-color: #2a2a2a;
    --healthnote-green: #01675D;
    --index-list-blockquote-dark: black;
    --index-list-blockquote-light: white;
    --tint-color: #ee4e3a;

    --article-shadow-light: 0 1.2px 3.5px rgba(0, 0, 0, 0.16);
    --article-shadow-dark: 0 8px 32px rgba(0, 0, 0, 0.32);

    --ads-border-color-light: #1a5e47;
    --ads-border-color-dark: #1a5e47;
    --ads-background-color-light: #eaf3f2;
    --ads-background-color-dark: #133632;
    --ads-content-text-color-light: rgb(127, 140, 141);
    --ads-content-text-color-dark: rgb(127, 140, 141);

}

* {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: 'Fira Code', LXGWWenKai, "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;
}

body {
    background: var(--header-background-color-light);
    text-align: center;
    /*    font-family: 'Fira Code', LXGWWenKai, "Times New Roman", times, "Heti Song", serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", -apple-system, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;*/
    line-height: 1.22857;
    font-size: 15px;
    color: var(--content-text-color-light);
    font-feature-settings: "tnum";
    font-variant: tabular-nums;
    /* letter-spacing:2px; */
    height: 100%;
}

.indexViewContainer{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
}

.viewContainer {
    /* width: 960px; */
    max-width: 1200px;
    position: relative;
    display: flex;
    margin: auto;
    justify-content: space-between;
}

.container {
    background: #f4f5f5;
    text-align: left;
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

/* 侧边栏 */
.side-nav {
    position: sticky;
    top: 30px;
    width: 200px;
    background-color: var(--article-background-color-light);
    display: block;
    padding: 30px 30px 10px 10px;
    height: 100%;
    border-radius: 5px;
    box-shadow: var(--article-shadow-light);
}

/* 填充空间 */
.spacer {
    height: 30px;
    margin: -30px 0 0;
    background-color: #00000000;
    width: 100%;
}

.wrapper {
    background: var(--wrapper-background-color-light);
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px 40px 30px 40px;
    text-align: left;
}

/* 中间内容 */
.indexCenterContent{
    width: 100%;
    position: relative;
}
.centerContent {
    max-width: 900px;
    position: relative;
    padding-right: 10px;
}

div .publishDate {
    vertical-align: center;
}


header {
    position: relative;
    background-color: var(--header-background-color-light);
    background-position: right;
    background-position-y: top;
    background-repeat: no-repeat;
    background-size: 400px;
    line-height: 1.5em;
    padding: 0 20px;
    height: 350px;
}

header a {
    display: inline-block;
    text-decoration: none;
}

header h2 {
    /* margin-top: 80px; */
    font-size: 65px;
    color: #ffffff;
}

header nav li {
    display: inline-block;
    margin-left: 10px;
    margin-right: 10px;
}

header nav a {
    display: block;
    color: #cacaca;
    padding: 0 10px;
    line-height: 30px;
    text-decoration: none;
}

header nav a:hover {
    color: #fff;
    /* background-color:var(--healthnote-green); */
}

header nav .selected {
    color: #fff;
    /* background-color: var(--healthnote-green); */
}



header nav .search a {
    background-image: url(/img/search.svg);
    background-repeat: no-repeat;
    background-size: 65% 65%;
    background-position: center center;
    width: 34px;
    color: transparent !important;
    user-select: none;
}

header .wrapper {
    padding: 0px 0 0px 0;
    text-align: center;
    background-color: #00000000;
}

header .logo {
    max-width: 100%;
    /* margin-top: 50px; */
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    padding: 50px 0 50px 0;
}

header .logo img {
    width: 100px;
    height: 100px
}

/* Header 的社交图标*/
.headerIcons {
    display: block;
    /* opacity: 0.6; */
}

.headerIcons a {
    color: blue;
}

.headerIcons .icon {
    padding: 0 18px 0 18px;
    font-size: 30px;
    width: 24px;
    height: 24px;
    position: relative;
}

.headIconWeixin {
    background-image: url('/img/whiteWeixin.svg');
    background-size: 21px 21px;
    background-repeat: no-repeat;
}

/* 头部的微信公共号 */
.weixinHeadQcode {
    position: relative;
    width: 400px;
    height: 246px;
    background-image: url("/img/weixincode.jpg");
    margin-left: auto;
    margin-right: auto;
    display: none;
    z-index: 9999;
    border-radius: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.headIconTwitter {
    background-image: url('/img/whiteTwitter.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.headIconEmail {
    background-image: url('/img/whiteEmail.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.headIconGithub {
    background-image: url('/img/whiteGithub.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.headIconZhihu {
    background-image: url('/img/whiteZhihu.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.headIconRss {
    background-image: url('/img/whiteRss.svg');
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
}

.license {
    text-align: center;
    padding: 20px 0 60px 0;
    /*    font-family: sans-serif;*/
}

.license p {
    font-size: 13px;
    text-align: center;
    text-indent: 0em;
}

/* nav */

nav {
    display: inline-block;
    /* background-color: #fff; */
    /* border-radius: 10px; */
    margin-top: 30px;
    overflow: hidden;
    vertical-align: center;
    /*    font-family: LXGWWenKai, sans-serif;*/
    font-weight: 400;
}

nav .searchIcon {
    width: 16px;
    height: 16px;
}


.mobileSidenav {
    display: none;
    height: 100%;
    width: 200;
    position: fixed;
    z-index: 1;
    top: 0;
    right: 0;
    background-color: #c4c4c4ee;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.mobileSidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}


.search .search-box input[type="submit"] {
    background-image: url('data:image/svg+xml,%3Csvg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Crect fill="%23FFF" transform="rotate(-45 9 29.5)" x="-1" y="27" width="20" height="5" rx="2.5"/%3E%3Ccircle stroke="%23FFF" stroke-width="5" cx="23" cy="15" r="12"/%3E%3C/g%3E%3C/svg%3E');
}

article {
    background-color: var(--article-background-color-light);
    padding: 20px 60px 20px 60px;
    border-radius: 4px;
    margin-block-end: 12px;
    margin-inline-start: 0px;
    box-shadow: var(--article-shadow-light);
}

article h1 {
    color: var(--item-title-color-light);
}

article h2 {
    border-bottom: var(--h2-border-bottem-line-light);
}

article a {
    text-decoration: none;
    color: var(--content-link-text-color-light);
    /* border-bottom: 1px solid #d1e9ff; */
}

article p {
    /*    text-indent: 2em;*/
    line-height: 1.4em;
    text-align: justify;
    margin-block-start: 16px;
    margin-block-end: 16px;
    font-size: 1.1em;
}
article p.info,
article blockquote p,
article .sponsorship .content>ul,
article .services .content>ul {
    /* position: relative; */
    background-color: var(--blockquote-background-color-light);
    padding: 10px 20px 10px 10px;
    /* border-top-right-radius: 7px;
     border-bottom-right-radius: 7px; */
    border-left: var(--blockquote-headline-color-light);
    margin-left: 0px;
    text-indent: 0em;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

article p code,
article li code,
.discover .content code {
    background-color: var(--inline-code-background-light);
    display: inline-block;
    padding: 0 5px 0px 5px;
    border-radius: 3px;
    font-size: 0.9em;
    margin: 1px;
    line-break: auto;
}

article p code,
article li code {
    color: var(--inline-code-text-color-light);
    display: inline;
}

h1 {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 28px;
    font-weight: bold;
}

h2 {
    margin-bottom: 25px;
    margin-top: 25px;
    font-size: 22px;
    text-align: left;
    padding-bottom: 12px;
}

h3 {
    margin-bottom: 13px;
    margin-top: 20px;
    font-size: 18px;
    text-align: left;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

h4 {
    margin-bottom: 7px;
    margin-top: 15px;
    font-size: 16px;
    text-align: left;
}

h5 {
    margin-bottom: 7px;
    margin-top: 7px;
    font-size: 14px;
}

h6 {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: normal;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--item-title-color-light);
}

p {
    /* margin: 0px;
     margin-bottom: 10px; */
    line-height: 1.6em;
    font-size: 1em;
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    text-align: left;
}

.index-list {
    padding: 0px;
}

.index-list .content {
    margin-bottom: 0;
}

.index-list blockquote p {
    background-color: var(--index-list-blockquote-light);
}


.index-list ul.indexul {
    padding: 0px;
    margin: 0px;
}

.index-list li.indexli {
    background-color: var(--content-background-color-light);
    margin: 0px;
    margin-bottom: 10px;
    list-style: none;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 1.2px 3.5px rgb(0 0 0 / 16%);
}


.index-list li article h2 {
    font-size: 24px;
    /* color:#4078f2; */
}

.index-list li article h3 {
    font-size: 1.2em;
}

.index-list li article h4,
.index-list li article h5 {
    font-size: 1.0em;
}

.index-item-more {
    color: var(--index-item-more-color-light);
    font-weight: normal;
    float: right;
    line-height: 1em;
    margin: 0px;
    padding: 0px;
    margin-top: -16px;
    text-decoration: none;
}

.index-item-more a {
    text-decoration: none;
    color: var(--content-link-text-color-light);
    font-size: 14px;
}

.index-title {
    color: var(--item-title-color-light);
}

.index-item-more a:hover {
    color: blue;
}

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

.index-title a:hover {
    color: var(--item-title-hover-color);
}


/* table */

.content thead {
    background-color: lightslategrey;
    text-align: center;
}

.content table {
    border-collapse: collapse;
    max-width: 80%;
    min-width: 30%;
    margin-top: 15px;
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

.content table,
th,
td {
    border: 1px solid gray;
}

.content td {
    padding: 5px;
}

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

.item-list a {
    text-decoration: none;
}

a.browse-all {
    color: var(--content-link-text-color-light);
    /* font-weight: bold; */
    /*    font-family: LXGWWenKai, sans-serif;*/
    float: right;
    line-height: 1em;
    padding-top: 10px;
}

a.browse-all:hover {
    text-decoration: none;
}

.content {
    margin-top: 20px;
    margin-bottom: 20px;
    /* text-align: justify; */
}

.content img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 90%
}

.content video {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 90%
}

.content ul {
    margin-top: 10px;
    margin-bottom: 10px;
    list-style: cross-fade();
    margin-left: 11px;
    font-weight: 400;
    font-size: 1.1em;
}

.content li {
    line-height: 1.6em;

}

.content ol {
    margin-top: 10px;
    margin-bottom: 10px;
    line-height: 1.6em;
    list-style: decimal;
    margin-left: 12px;
}

.content ol li {
    margin-left: 30px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.6em;
    font-size: 1.1em;
}

.content ul li {
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    line-height: 1.6em;
    font-size: 1em;
}

.content ol ul,
.content ol ol,
.content ul ol,
.content ul ul {
    margin-top: 10px;
    margin-left: 10px;
}

.index-list article {
    box-shadow: none;
}

.post-title {
    text-align: center;
    padding: 30px 30px 30px 30px;
    display: block;
}

.description {
    margin-bottom: 40px;
}

blockquote {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 0px;
    margin-right: -10px;
    background-color: var(--blockquote-background-color-light);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}



/* Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 15px;
}

.grid.compact {
    grid-template-columns: repeat(3, 1fr);
}

.grid>* {
    display: flex;
}

.item-list.grid>li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    vertical-align: text-top;
}

.item-list article {
    margin: 0px;
    padding: 5px 40px 40px 40px;
}

.item-list.grid ul {
    margin: 0px;
    padding: 0px;
}

.item-list.grid p {
    margin: 0px;
}

.item-list.grid li:hover {
    background-color: #ddd;
}

.item-list.grid a:any-link {
    cursor: pointer;
}

.item-list.grid a {
    padding: 0px;
    margin: 0px;
}


/* item-list */

.item-list>li {
    display: block;
    padding: 0px;
    border-radius: 10px;
    background-color: var(--content-background-color-light);
    margin-bottom: 10px;
    /* border-bottom: 1px solid #00000000; */
}

.item-list>li:last-child {
    margin-bottom: 0;
    /* border-bottom: 1px solid #00000000; */
}

.item-list h1 {
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: bold;
    color: var(--item-title-color-light);
    text-rendering: optimizeLegibility;
}

.item-list h1 a {
    border-bottom: 0px;
    color: var(--item-title-color-light);
}

.item-list p {
    margin-bottom: 0;
}


.itme-list-title a:hover {
    color: var(--item-title-hover-color);
}

.item-list article img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    margin-bottom: 10px;
    max-width: 90%;
}

.section-header {
    margin-top: 15px;
    margin-bottom: 15px;

}

.float-container::after {
    display: block;
    content: "";
    clear: both;
}

/* .section-header .browse-all {
 font-size: 14px;
 color: #0269c8;
 font-weight: normal;
 float: right;
 line-height: 1em;
 margin: 0px;
 padding-right: 20px;
 margin-top: 8px;
 text-decoration: none;
 }

 .browse-all:hover {
 color: blue;
 } */

/* .browse-all-tag {
 color: var(--item-title-color);
 font-weight: bold;
 float: right;
 line-height: 1em;
 margin: 0px;
 padding: 0px;
 margin-top: 10px;
 text-decoration: none;
 font-size: 0.8em;
 } */




.section-header h2 {
    /* display: inline-block; */
    float: left;
    font-size: 24px;
    padding-left: 30px;
    background-repeat: no-repeat;
    background-size: 25px 25px;
    background-position-y: 3px;
    background-image: url(/img/topic.svg);
    margin: 0px;
    font-weight: normal;
    color: var(--section-header-title-color-light);
}

/* section-header ending */

.item-page .tag-list {
    display: inline-block;
}



.browse-all {
    display: block;
    margin-bottom: 20px;
    margin-right: 20px;
}



footer {
    color: var(--footer-text-color-light);
    text-align: center;
    /* margin-top: 20px; */
    /* margin-bottom: 30px; */
    /* border-top: 1px var(--healthnote-green) solid; */
    padding: 30px 30px 80px 30px;
    margin-left: auto;
    margin-right: auto;
    font-size: 10px;
    background-color: var(--footer-background-color-light);
    /*    font-family: LXGWWenKai, sans-serif;*/
}


footer p {
    margin: 5px;
    text-align: center;
}


footer li {
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

footer img {
    width: 20px;
    height: 20px;
}

footer .twitter {
    width: 23px;
    height: 23px;
}

hr {
    display: block;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    border-top-style: inset;
    border-top-width: 1px;
}

article hr {
    display: block;
    margin-top: 2em;
    margin-bottom: 2em;
    margin-left: auto;
    margin-right: auto;
    width: 256px;
    border-style: solid;
    border-color: #cdd8e7;
    border-width: 0.5px;
    border-radius: 10px;
}

/* about */
.about {
    max-width: 960px;
    margin: auto;
}

.about img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    text-align: center;
}

.about h4 {
    font-weight: normal;
}

.about blockquote {
    margin-bottom: 30px;
}

.about h3 {
    font-size: 24px;
    text-align: center;
    padding: 60px 0 20px 0;
    /*    font-family: LXGWWenKai, sans-serif;*/
    font-weight: 400;
}

/* common */
.page-common {
    max-width: 960px;
    margin: auto;
}

.page-common img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20px;
    margin-bottom: 50px;
    text-align: center;
}

.page-common h4 {
    font-weight: normal;
}

.page-common blockquote {
    margin-bottom: 30px;
}

.page-common h3 {
    font-size: 24px;
    text-align: center;
    padding: 60px 0 20px 0;
    font-weight: 400;
}

/* item-nav*/
.item-navigator {
    font-size: 13px;
    /* white-space: nowrap; */
    text-overflow: ellipsis;
    /* height: 15px; */
    padding-top: 20px;
    padding-top: 20px;
}

.item-navigator a {
    text-decoration: none;
    color: var(--content-link-text-color-light);
    /*    font-family: LXGWWenKai, sans-serif;*/
}

.item-navigator table {
    width: 100%;
}

.item-navigator td {
    width: 50%;
    text-overflow: ellipsis;
    border: 0px solid #0094ff;
    /* height: 15px; */
    vertical-align: top;
}

.item-navigator .previous-item {
    /* float: left; */
    text-overflow: ellipsis;
    background-image: url("/img/leftarrow.svg");
    background-repeat: no-repeat;
    background-position-x: left;
    background-size: 13px 13px;
    padding-left: 18px;
}

.item-navigator .next-item {
    /* float: right; */
    /* display: block; */
    text-overflow: ellipsis;
    background-image: url("/img/rightarrow.svg");
    background-repeat: no-repeat;
    background-position-x: right;
    background-size: 13px 13px;
    padding-right: 18px;
    text-align: right;
}


/* tags */

.all-tags {
    display: flex;
    flex-wrap: wrap;
    text-align: justify;
    padding-bottom: 20px;
}

.searchContent .all-tags {
    padding: 0 20px 20px 20px;
}

.all-tags li {
    font-size: 12px;
    margin-right: 10px;
    padding: 6px 6px;
    margin-bottom: 10px;
}

.tagResultContent {
    padding: 10px 20px 0px 20px;
    max-width: 960px;
    margin: auto;
}

.tagResult {
    max-width: 960px;
    margin: auto;
}

.tag-list {
    margin-bottom: 5px;
    font-size: 1em;
}

.tag {
    display: inline-block;
    background-color: #000;
    color: #ddd;
    padding: 4px 6px;
    border-radius: 5px;
    margin-right: 5px;
    font-weight: 600;
}

.tagdate {
    display: inline-block;
    line-height: 1.8em;
    /* background-color: blueviolet; */
    padding: 4px 6px;
    color: #555;
    background-color: #00000000;
}

.tag-list a,
.tag a {
    text-decoration: none;
    color: var(--tag-text-color-light);
    border-bottom: 0px;
}

li.selectedTag {
    box-shadow: 3px 3px 4px rgb(0 0 0 / 32%);
    offset: 3px;
    transform: translateX(-2px) translateY(-2px);
}

li.selectedTag a {
    color: yellow;
}

/* Tags Color */
.tag.variant-0 {
    background-color: #66293c !important;
}

.tag.variant-1 {
    background-color: #913e37 !important;
}

.tag.variant-2 {
    background-color: #ca7618 !important;
}

.tag.variant-3 {
    background-color: #a38138 !important;
}

.tag.variant-4 {
    background-color: #2f7176 !important;
}

.tag.variant-5 {
    background-color: #246089 !important;
}

.tag.variant-6 {
    background-color: #498840 !important;
}

.tag.variant-7 {
    background-color: #484781 !important;
}

/* Archive 页面  */
/* .archiveList {
 padding: 20px;
 background: var(--article-background-color-light);
 box-shadow: 0 1.2px 3.5px rgba(0, 0, 0, 0.16);
 border-radius: 5px;
 } */

.reading-time {
    display: inline-block;
    line-height: 0.8em;
    /* background-color: blueviolet; */
    padding: 4px 4px 10px 10px;
    color: #eee;
    background-color: #00000000;
}
.archiveContent {
    /* margin: 20px; */
    font-size: 20px;
    background: var(--article-background-color-light);
    box-shadow: var(--article-shadow-light);
    border-radius: 5px;
    padding: 20px 60px 80px 60px;
}

.archiveContent h3 {
    font-size: 22px;
}

.archiveContent ul {
    padding-left: 20px;
    font-size: 15px;
}

.archiveContent li {
    line-height: 1.6em;
    font-size: 1.1em;
    padding-bottom: 10px;
}

.archiveContent a {
    color: var(--content-link-text-color-light);
}


.emptySpace {
    line-height: 0;
    color: rgba(255, 255, 255, 0.001);
}


.searchContent {
    padding: 0px 0px 20px 0px;
    max-width: 960px;
    margin: auto;
}

.searchform {
    /* background: #F9F0DA; */
    margin-top: 0px;
    margin-bottom: 0px;
    padding-bottom: 15px;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.searchform input {
    border: var(--search-input-border-color-light);
    border-radius: 5px;
    background: transparent;
    top: 0;
    font-size: 12px;
    color: var(--content-text-color-light);
}


.site-search-form {
    padding: 5px;
    /* border: 1px solid #CCC;
     border-radius: 10px;
     display: block;
     margin-bottom:40px;
     margin-top: 20px;
     max-width:500px;
     min-width:200px; */
    margin-left: auto;
    margin-right: auto;
}

.st-search-input {
    width: 100%;
    height: 30px;
    font-size: 16px;
    border: none;
    color: #404040;
    outline: none;
    padding-left: 10px;
}

.st-search-input::-ms-clear {
    display: none;
}

.st-search-input:valid+.clearSearchInput {
    display: inline;
}

.local-search-input-cls {
    width: 400px;
    margin: 10px 0;
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #CCC;
    color: #666;
    font-size: 14px;
    color: #404040;
}

.local-search-result-cls {
    /* margin-top: 30px; */
    color: #404040;
    max-width: 960px;
    /* min-width: 700px; */
    /* min-height: 500px; */
}

.local-search-result-cls .local-search-empty {
    color: #888;
    line-height: 44px;
    text-align: center;
    display: block;
    font-size: 16px;
    font-weight: normal;
}

.local-search-result-cls ul {
    min-height: 0;
    height: auto;
    overflow-y: auto;
    margin-left: auto;
    margin-right: auto;
}

.local-search-result-cls li {
    text-align: left;
    padding: 20px 40px 20px 40px;
    margin-bottom: 20px;
    line-height: 30px;
    font-weight: normal;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--article-background-color-light);
    border-radius: 4px;
    box-shadow: var(--article-shadow-light);
}

/* .local-search-result-cls li:last-child {
 border-bottom: none;
 } */

.local-search-result-cls a {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
    color: var(--item-title-color-light);
    padding: 20px 0 20px 0;
}

.local-search-result-cls a:hover {
    color: var(--item-title-hover-color);
}

.local-search-result-cls p {
    text-align: justify;
    margin-top: 10px;
    font-size: 1.1em;
    line-height: 1.4em;
    /* max-height: 124px; */
    overflow: hidden;
    color: var(--content-text-color-light);
}

.local-search-result-cls em.search-keyword {
    /* color: #ff502c;
     background-color: #fff5f5; */
    color: #fff5f5;
    background-color: #ff502c;
    padding-left: 3px;
    padding-right: 3px;
    border-radius: 4px;
}



/* .local-search-plugin {
 .local-search-input-cls {
 opacity: 0.6;
 width: 160px;
 transition: all 0.3s;
 &:hover {
 opacity: 1;
 width: 200px;
 transition: all 0.3s;
 }
 }
 .icon {
 position: relative;
 left: -30px;
 color: #999;
 cursor: pointer;
 }
 } */

.clearSearchInput {
    display: none;
    position: absolute;
    width: 14px;
    height: 14px;
    margin: 9px 0 0 -20px;
    background: url("/img/clear.svg") no-repeat;
    background-size: 12px 12px;
    outline: none;
}

/* 分享按钮区域 */

.post-actions {
    position: sticky;
    top: 200px;
    display: block;
    float: left;
    margin: 50px 0 0 -40px;
    column-count: 1;
    width: 40px;
    height: auto;
}

.post-actions-mobile {
    position: relative;
    /* top: 200px; */
    display: none;
    /* float:left; */
    /* margin: 50px 0 0 -50px; */
    /* column-count: 1; */
    /* width:px; */
    margin-left: auto;
    margin-right: auto;
    height: auto;
}

.actionButton {
    position: relative;
    width: 36px;
    height: 36px;
    background-color: var(--article-background-color-light);
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .04);
    cursor: pointer;
    margin: 0 0 10px 0;
}

.actionButton .twitter {
    background-image: url("/img/buttonTwitterGray.svg");
    background-size: 20px 20px;
}

.actionButton .twitter:hover {
    background-image: url("/img/buttonTwitterColor.svg");
    background-size: 22px 22px;
}

.actionButton .weibo {
    background-image: url("/img/buttonWeiboGray.svg");
    background-size: 20px 20px;
}

.actionButton .weibo:hover {
    background-image: url("/img/buttonWeiboColor.svg");
    background-size: 22px 22px;
}

.actionButton .weixin {
    background-image: url("/img/buttonWeixinGray.svg");
    background-size: 20px 20px;
}

.actionButton .weixin:hover {
    background-image: url("/img/buttonWeixinColor.svg");
    background-size: 22px 22px;
}

.actionButton .comment {
    background-image: url("/img/buttonCommentGray.svg");
    background-size: 17px 17px;
}

.actionButton .comment:hover {
    background-image: url("/img/buttonCommentColor.svg");
    background-size: 20px 20px;
}

.actionButton .donate {
    background-image: url("/img/buttonDonateGray.svg");
    background-size: 20px 20px;
    position: relative;
}

.actionButton .donate:hover {
    background-image: url("/img/buttonDonateColor.svg");
    background-size: 22px 22px;
    position: relative;
}

.actionButton .donateQcode {
    position: fix;
    width: 400px;
    height: 246px;
    background-image: url("/img/wechat_reward.jpg");
    margin: 0 0 0 50px;
    display: none;
    z-index: 9999;
    border-radius: 0;
    background-color: transparent;
}


.actionButton .weixinQcode {
    position: fix;
    width: 400px;
    height: 246px;
    background-image: url("/img/weixincode.jpg");
    margin: 0 0 0 50px;
    display: none;
    z-index: 9999;
    border-radius: 0;
    background-color: transparent;
}

/* 广告 */
.sponser {
    position: relative;
    margin-top: 25px;
    margin-bottom: 15px;
    border-radius: 8px;
    border: 1.5px solid var(--ads-border-color-light);
    /* padding: 15px 20px 15px 20px; */
    /* color: #f2f2f2; */
    background-color: var(--ads-background-color-light);
    cursor: pointer;
    z-index: 0;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.sponser .adsContent {
    padding: 10px 20px 0px 20px;
}

.sponser .HStack {
    display: flex;
    flex-direction: row;
}

.sponser .HStack img {
    width: 120px;
    /* height: 64px; */
    margin: auto;
    /* border-radius: 8px; */
}

.sponser .label {
    position: absolute;
    top: -10px;
    left: 20px;
    background-color: var(--ads-border-color-light);
    padding: 3px 6px 3px 6px;
    border-radius: 5px;
    color: #f2f2f2;
    font-size: 10px;
    /*    font-family: LXGWWenKai, sans-serif;*/
}

.sponser .textContainer {
    padding: 0 0px 0 20px;
    margin-top: 10px;
}

.sponser .title {
    /*    font-family: LXGWWenKai, sans-serif;*/
    font-size: 18px;
    color: var(--item-title-color-light);
}

.sponser .document {
    font-size: 12px;
    /*    font-family: LXGWWenKai, sans-serif;*/
    color: var(--ads-content-text-color-light);
}

.sponser .textContainer p {
    text-indent: 0;
    margin-block-start: 5px;
    margin-block-end: 19px;
}

.supporter {
    position: relative;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 2px solid #078076;
    padding: 15px 20px 15px 20px;
    background-color: var(--article-background-color-light)
}

.supporter p {
    font-size: 1.2em;
}

.supporter a {
    cursor: pointer;
    color: #0269c8;
    font-weight: bold;
}

.supporter img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.supporter .label {
    position: absolute;
    top: -10px;
    left: 20px;
    background-color: #078076;
    padding: 3px 6px 3px 6px;
    border-radius: 5px;
    color: #f2f2f2;
    font-size: 1.4em;
}


/*.toc {*/
/*    position: sticky;*/
/*    position: -webkit-sticky;*/
/*    top: 10px;*/
/*    display:block;*/
/*    float:right;*/
/*    margin: -20px 0 0 0px;*/
/*}*/

.sidebar {
    /* position:absolute;
     top: 0;
     right: 0; */
    /* padding-top: 260px;
     padding-right: 20px; */
    overflow-x: hidden;
    /*overflow-y: auto; */
    width: 180px;
    /* position:fixed; */
    /* float: right; */

}

.sideTags {
    width: 200px;
}

.sidebar .active {
    color: #2c2c2c;
    font-weight: 500;
    background-color: var(--sidebar-active-background-light);
    border-radius: 1px;
    padding: 2px;
}

@media (max-width:1000px) {
    .side-nav {
        display: none;
    }
}


@media (max-width:960px) {
    .centerContent {
        width: 100%;
        padding-right: 0;
    }

    .viewContainer {
        width: 100%
    }
}


/* `code`在手机safari中显示不换行 */
@media (max-width:800px) {

    article p code,
    article li code,
    .discover .content code {
        line-break: anywhere
    }
}

@media (max-width: 700px) {
    header .logo img {
        padding: 80px 0px 10px 0px;
        width: 380px;
    }
}

@media(max-width: 600px) {
    .wrapper {
        padding: 0 0 10px 0;
        background-color: var(--article-background-color-light);
    }

    article {
        border-radius: 0;
        padding: 20px;
    }

    header nav li {
        display: inline-block;
        margin-left: 3px;
        margin-right: 3px;
    }

    article {
        box-shadow: none;
    }

    .centerContent {
        padding-right: 0;
    }

    .post-actions {
        display: none;
    }

    .content article {
        padding: 20px 0 20px 0;
    }

    /* .all-tags {
     padding-left: 20px;
     padding-right: 20px;
     } */

    .tagResultContent {
        padding: 20px 20px 0px 40px;
        max-width: 960px;
    }

    /* .tagResultContent .all-tags {
     padding: 0 20px 0px 20px;
     } */

    /* .tag-detail-header {
     display: none;
     } */

    .searchContent {
        padding: 20px 10px 20px 10px;
    }

    .searchform {
        width: 300px;
    }

    .searchContent .all-tags {
        padding: 0 30px 0px 30px;
    }

    /* .site-search-form {
     margin-top: 0px;
     margin-bottom: 0px;
     } */

    /* .local-search-result-cls {
     padding-left: 20px;
     padding-right: 20px;
     max-width: auto;
     min-width: auto;
     } */

    .item-navigator {
        padding-left: 20px;
        padding-right: 20px;
    }

    .gt-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 缩小后，给内容之间添加分割线。使用在最近更新、tag内容显示，在暗黑模式下，应该修改显示颜色*/
    .item-list>li {
        border-bottom: var(--item-list-separator-color-light);
        margin-bottom: 0px;
    }

    .index-list li.indexli {
        border-bottom: var(--item-list-separator-color-light);
    }

    .item-list article {
        padding: 5px 20px 40px 20px;
    }

    .weixinHeadQcode {
        width: 300px;
        height: 185x;
    }

    .post-actions {
        display: none;
    }

    .supporter {
        margin-left: 10px;
        margin-right: 10px;
    }

    .sponser img {
        height: 60px;
    }

    .sponser .title {
        font-size: 14px;
    }

    .sponser .document {
        font-size: 10px;
    }

    /* Archive */
    .archiveContent {
        box-shadow: none;
        border-radius: 0;
        padding: 20px 25px 80px 25px;
    }

    /* search */
    .local-search-result-cls li {
        text-align: left;
        padding: 20px 10px 20px 10px;
        margin-bottom: 0px;
        border-radius: 0px;
        box-shadow: none;
        border-bottom: var(--h2-border-bottem-line-light);
    }

    .tagResultContent .all-tags {
        padding-bottom: 0px;
    }
}


@media (max-width: 450px) {
    header .logo img {
        padding: 80px 0px 20px 0px;
        width: 320px;
    }

    nav {
        font-weight: 600;
    }

    /* Nav */
    header nav li {
        margin-left: -3px;
        margin-right: -3px;
    }

    /* 调整手机端的各级标题大小 */

    .content-with-sidebar h1 {
        font-size: 22px;
    }

    .index-list h1 {
        font-size: 22px;
    }

    .content-with-sidebar h2 {
        font-size: 20px;
    }

    .index-list li article h2 {
        font-size: 20px;
        border-bottom: none;
    }

    .content-with-sidebar h3 {
        font-size: 18px;
    }

    .index-list li article h3 {
        font-size: 18px;
    }

    .content-with-sidebar h4 {
        font-size: 17px;
    }

    .index-list li article h4 {
        font-size: 17px;
    }

    .content-with-sidebar h5 {
        font-size: 16px;
    }

    .index-list li article h5 {
        font-size: 16px;
    }

    /* 标题在手机端需要特别处理 */
    .post-title {
        text-align: left;
        padding: 0;
    }

    /* 取消首页阴影 */
    .index-list li.indexli {
        box-shadow: none;
    }

    .sponser .title {
        font-size: 16px;
        padding-bottom: 5px;
    }

    .sponser img {
        display: none;
    }

    .sponser .document {
        font-size: 12px;
    }

    .sponser .textContainer {
        padding: 0 0px 0 0px;
    }

    .all-tags li {
        font-size: 11px;
        margin-right: 10px;
        padding: 5px 5px;
        margin-bottom: 10px;
    }
}



@media (prefers-color-scheme: dark) {
    .supporter {
        background-color: var(--article-background-color-dark)
    }

    .container {
        background: var(--wrapper-background-color-dark);
    }

    .wrapper {
        background-color: var(--wrapper-background-color-dark);
    }

    .tag a {
        color: var(--tag-text-color-dark);
    }

    body {
        background-color: var(--header-background-color-dark);
        color: var(--content-text-color-dark);
    }

    header {
        background-color: var(--header-background-color-light);
    }

    footer {
        background-color: var(--footer-background-color-dark);
    }

    .side-nav {
        background-color: var(--article-background-color-dark);
    }

    .sidebar .active {
        background-color: var(--sidebar-active-background-dark);
    }

    article {
        background-color: var(--article-background-color-dark);
    }

    blockquote {
        background-color: var(--blockquote-background-color-dark);
    }

    article p.info,
    article blockquote p,
    article .sponsorship .content>ul,
    article .services .content>ul {
        /* position: relative; */
        background-color: var(--blockquote-background-color-dark);
        border-left: var(--blockquote-headline-color-dark);
    }

    /* 评论输入区域背景 */
    .gt-container .gt-header-textarea {
        background-color: var(--blockquote-background-color-dark);
    }

    .archiveContent {
        background-color: var(--article-background-color-dark);
    }

    .local-search-result-cls li {
        background-color: var(--article-background-color-dark);
    }

    .searchform input,
    .local-search-result-cls p {
        color: var(--content-text-color-dark);
    }

    .actionButton {
        background-color: var(--article-background-color-dark);
    }

    article p code,
    article li code,
    .discover .content code {
        background-color: var(--inline-code-background-dark);
        display: inline-block;
        padding: 0 5px 0px 5px;
        border-radius: 3px;
        font-size: 0.9em;
        margin: 1px;
        line-break: auto;
    }


    article,
    .side-nav,
    .index-list li.indexli,
    .archiveList,
    .local-search-input-cls li {
        box-shadow: var(--article-shadow-dark)
    }

    .searchform input {
        border: var(--search-input-border-color-dark);
    }

    footer {
        color: var(--footer-text-color-dark);
    }

    .index-title,
    article h1,
    .item-list h1,
    .item-list h1 a,
    .local-search-result-cls a {
        color: var(--item-title-color-dark);
    }

    article h2 {
        border-bottom: var(--h2-border-bottem-line-dark);
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--item-title-color-dark);
    }

    article p code,
    article li code {
        color: var(--inline-code-text-color-dark);
        display: inline;
    }

    .item-list>li,
    .index-list li.indexli {
        border-bottom: var(--item-list-separator-color-dark);
    }

    article a,
    .item-navigator a,
    .index-item-more a,
    .archiveContent a,
    a.browse-all {
        color: var(--content-link-text-color-dark);
        /* border-bottom: none; */
    }

    .sponser {
        border: 2px solid var(--ads-border-color-dark);
        background-color: var(--ads-background-color-dark);
    }

    .sponser .label {
        background-color: var(--ads-border-color-light);
    }

    .sponser .title {
        color: var(--item-title-color-dark);
    }

    .sponser .document {
        color: var(--ads-content-text-color-dark);
    }
}

@media (prefers-color-scheme: dark) and (max-width: 600px) {

    article,
    .side-nav,
    .index-list li.indexli,
    .archiveList,
    .local-search-input-cls li {
        box-shadow: none;
    }

    .wrapper {
        background-color: var(--article-background-color-dark);
    }

    .local-search-result-cls li {
        border-bottom: var(--h2-border-bottem-line-dark);
    }

    article hr {
        border-color: #3d4045;
    }


}

/* 
 @media (prefers-color-scheme: dark) and (max-width: 450px) {

 } */