@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/crimson-text-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/crimson-text-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/crimson-text-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Crimson Text';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/crimson-text-600-italic.woff2') format('woff2');
}

.hljs{background:#f0f0f0;display:block;overflow-x:auto;padding:.5em}
.hljs,.hljs-subst,.hljs-tag .hljs-title{color:#000}
.hljs-attribute,.hljs-deletion,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-title,.hljs-variable{color:#800}
.hljs-comment,.hljs-quote{color:#888}
.hljs-addition,.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#080}
.hljs-meta{color:#88f}
.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-tag,.hljs-strong,.hljs-title,.hljs-type{font-weight:700}
.hljs-emphasis{font-style:italic}
@define-mixin font-main{font-family:'Crimson Text', Helvetica Neue,Arial,Hiragino Sans GB,WenQuanYi Micro Hei,Microsoft YaHei,sans-serif}
@define-mixin font-code{font-family:'Crimson Text', consolas,monaco,Source Code Pro,hack,monospace}body,html,input{margin:0}
body,html{
  height:100%;
  /* font-family: "Crimson Text", Verdana, Helvetica Neue,Arial,Hiragino Sans GB,WenQuanYi Micro Hei,Microsoft YaHei,sans-serif; */
  font-family: "Crimson Text"; 
  /* font-family: Verdana; */
}
ul{list-style:none;margin:0;padding:0}
a{text-decoration:none}
a:hover{opacity:.9}::-moz-selection{background-color:#293846;color:#fcfcfc}::selection{background-color:#293846;color:#fcfcfc}
.clearfix:after,.clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.clearfix{zoom:1}
 .main.page{padding-bottom:70px;padding-top:1px;}
 
 .main.page .header{
  text-align:center; 
  background-color: #000000; 
  position: fixed; 
  width: 100%; 
  margin-bottom: 0px;
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 1;
  top: 0px;
}
 
 .main.page .header .tag{font-size:32px;font-weight:700;margin:30px 0 0}
 
 .main.page .header .tag-sub{color:#7f8c8d;font-size:8px;font-weight:200;margin:10px 0 0}
 
 .main.page .header .search-wrap{margin:10px auto 0;max-width:300px;position:relative}
 
 .main.page .header .search-wrap .search{border:1px solid #ddd;border-radius:100px;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:.8;padding:10px 25px;width:100%}
 
 .main.page .header .search-wrap .search:focus{opacity:1;outline:0}
 
 .main.page .header .search-wrap .icon{opacity:.3;position:absolute;right:10px;top:5px}
 
 .main.page .article-list{margin-top:300px; width: 80%;
  border-right: #020202 1px;
}
 
 .main.page .article-list .searched{background-color:#009a61;color:#fcfcfc}
 
 .main.page .article-list .article{
  border-bottom:3px solid #908e8e20;
  border-right:3px solid #908e8e20;
  margin-bottom:55px;
  padding-bottom:45px; 
  background-color:#f4f3f3; 
  padding: 10px;
  border-radius:20px;
}
 
 .main.page .article-list .article:last-child{border-bottom:0}
 
 .main.page .article-list .article .title{color:#293846;
  display:flex;font-size:16px;font-weight:700;margin-bottom:0px;text-decoration:none; height: 80px;}
 
 .main.page .article-list .article .title .top{color:#7f8c8d;margin-right:5px}
 
 .main.page .article-list .article .cover{background-position:50%;
  background-repeat:no-repeat;background-size:cover;
  border:1px solid #ddd;border-radius:6px;-webkit-box-sizing:
  border-box;box-sizing:border-box;color:#eee;height:280px;
  margin-top:0px;
  width:100%
}
 
 @media (max-width:414px){
  
  .main.page .article-list .article .cover{height:180px}
}
  .main.page .article-list .article .preview{
    color:#293846;display:block;font-size:16px;line-height:28px;margin-top:10px}
  .main.page .article-list .article .info{
    color:#000000;
    font-size:10px;
    margin-bottom:10px;
    margin-top:0px}
  .main.page .article-list .article .avatar{background-repeat:no-repeat;background-size:cover;border:1px solid #ddd;border-radius:20px;float:left;height:20px;margin-right:10px;margin-top:-4px;width:20px}
  .main.page .article-list .article .name{margin-left:0px; text-decoration: dotted; font-size: 12px;}
  .main.page .article-list .article .date{color:#000000; font-size: 10px;}
  .main.page .article-list .article .tags{float:none;margin-left:0px; }
  .main.page .article-list .article .tags .tag{color:#000000;margin-right:5px;text-decoration:none; font-size: 10px;}
  .main.page .article-list .empty{font-size:24px;max-width:800px;overflow:hidden;text-align:center;-o-text-overflow:ellipsis;text-overflow:ellipsis}
  .main.page .article-list .empty span{font-weight:700}
  .main.page .page-nav{font-size:14px;height:50px;position:relative; width: 80%; text-align: center; margin: 0 auto; }
  .main.page .page-nav a{color:#7f8c8d;font-style:italic;text-decoration:none}
  .main.page .page-nav .nav{color:#7f8c8d;display:block;left:0;position:absolute;right:0;text-align:center;z-index:-1}
  .main.page .page-nav .prev{float:left}
  .main.page .page-nav .prev:before{border:2px solid #7f8c8d;border-radius:3px;content:"";display:block;float:left;height:3px;margin-right:7px;margin-top:5px;width:3px}
  .main.page .page-nav .next{float:right}
  .main.page .page-nav .next:after{border:2px solid #7f8c8d;border-radius:3px;content:"";display:block;float:right;height:3px;margin-left:7px;margin-top:5px;width:3px}
  .main.article { padding-top:120px; margin: 0 auto;width: 80%; padding-bottom: 120px;}
  .main.article .title{color:#293846;font-size:30px;font-weight:700;line-height:42px; padding-bottom: 10px;}
  .main.article .info {font-size:10px;margin-top:0px}
  .main.article .info .avatar{background-repeat:no-repeat;background-size:cover;border:1px solid #ddd;border-radius:20px;float:left;height:20px;margin-right:10px;margin-top:-4px;width:20px}
  .main.article .info .name{margin-left:5px; font-size: 10px;}
  .main.article .info .date{color:#000000;margin-right:5px; font-size: 10px;}
  .main.article .info .tags .tag{color:#000000;text-decoration:none; margin-right: 5px;}
  /* .main.article .cover { } */
  .main.article .recommend{margin-top:50px;overflow:auto}
  .main.article .recommend .nav{width:100%}
  .main.article .recommend .nav .head{color:#7f8c8d;font-size:12px;font-style:italic;margin-bottom:10px;text-align:center}
  .main.article .recommend .nav .link{color:#293846;display:block;text-align:center}
  .main.article .recommend .nav.prev.more{float:left;text-align:left;width:45%}
  .main.article .recommend .nav.prev.more .head,.main.article .recommend .nav.prev.more .link{text-align:left}
  .main.article .recommend .nav.next.more{float:right;text-align:right;width:45%}
  .main.article .recommend .nav.next.more .head,.main.article .recommend .nav.next.more .link{text-align:right}
  .main.article .author{margin-top:36px;padding-top:40px;text-align:center}
  .main.article .author .avatar{background-repeat:no-repeat;background-size:cover;border:20px solid #fff;border-radius:70px;height:70px;margin:0 auto;width:70px}
  .main.article .author .avatar:before{border-top:1px dashed #ddd;content:"";left:0;margin-top:36px;position:absolute;right:0;width:100%;z-index:-1}
  .main.article .author .name{font-size:16px;font-weight:700;margin-top:20px}
  .main.article .author .intro{color:#7f8c8d;font-size:14px;font-style:italic;margin-top:8px}
  .main.article #disqus_thread{margin-top:50px}.main.archive,.main.tag{padding-bottom:100px;padding-top:100px}
  
  .main.archive a,.main.tag a{border-bottom:1px dashed #009a61;color:#009a61;text-decoration:none}
  .main.archive .site .subtitle,.main.archive .site .title,.main.tag .site .subtitle,.main.tag .site .title{
    text-align:left;
  }
  .main.archive .header,.main.tag .header{font-size:18px;padding-top:60px}
  .main.archive .header .title,.main.tag .header .title{font-weight:700;margin-right:5px;margin-top:30px}
  .main.archive .header .subtitle,.main.tag .header .subtitle{font-style:italic}
  .main.archive .archive-list,.main.tag .archive-list{margin-top:10px;  display:block; width: 80%; font-size: 10px;}
  .main.archive .archive-list .archive-item,.main.tag .archive-list .archive-item{margin:40px 0}
  .main.archive .archive-list .archive-item .archive-year,.main.tag .archive-list .archive-item .archive-year{
    color:#293846;font-weight:700;margin:15px 0; font-size: 24px;}
  .main.archive .archive-list .archive-item .article-list .article-item,.main.tag .archive-list .archive-item .article-list .article-item{
    margin-bottom:10px
  }
  .main.archive .archive-list .archive-item .article-list .article-item .date,.main.tag .archive-list .archive-item .article-list .article-item .date{
    color:#7f8c8d;font-style:italic;margin-right:20px
  }
  .main.archive .tag-list,.main.tag .tag-list{margin-top:50px; max-width: 80%; margin: 0 auto;}
  .main.archive .tag-list .tag-item,.main.tag .tag-list .tag-item{
    float:left;margin-bottom:25px;margin-right:10px;
  }
  .main.archive .tag-list .tag-item .tag-name,.main.tag .tag-list .tag-item .tag-name{
    border:1px solid #eee;border-radius:3px;font-size:14px;padding:5px 7px;
  }
  .main.archive .tag-list .tag-item .tag-name:hover,.main.tag .tag-list .tag-item .tag-name:hover{
    background-color:#293846;border:1px solid #293846;color:#fcfcfc
  }

.main.archive ul{list-style:none;margin:0;padding:0; font-size: 12px; max-width: 80%;
  margin: 0 auto;
}

  .main .content{color:#293846;font-size:16px;line-height:1.7;margin-top:70px}
  .main .content h1+p,.main .content h2+p,.main .content h3+p,.main .content h4+p,.main .content h5+p,.main .content h6+p{margin-top:10px}
  .main .content h1{font-size:28px;margin-bottom:10px;margin-top:40px}
  .main .content h2{font-size:24px;margin-bottom:10px;margin-top:40px}
  .main .content h3{font-size:18px;margin-bottom:10px;margin-top:40px}
  .main .content p{margin-bottom:30px;margin-top:30px;text-align:left}
  .main .content.preview p{margin-bottom:10px;margin-top:10px; font-size:14px;}
  .main .content a{border-bottom:1px dashed #009a61;color:#009a61;text-decoration:none}
  .main .content a:hover{border-bottom:1px dashed #004e31;color:#004e31}
  .main .content code{background-color:#f7f7f7;border-radius:3px;color:#009a61;font-size:14px;margin:0 3px;padding:1px 4px}
  .main .content pre{margin:0}
  .main .content pre code{
    background-color:#1e1e1e;
    color: #020202;
    border:0px dashed #eee;
    border-radius:6px;
    color:inherit;
    display:block;
    font-size:14px;
    margin:0;
    overflow:auto;
    padding:10px 15px
  }
  .main .content blockquote{border-left:4px solid #009a61;font-style:italic;margin:25px 0 25px -23px;padding:0 10px 0 20px}
  .main .content table{border-collapse:collapse;border-color:#ddd;border-width:1px;font-size:14px;width:100%}
  .main .content table th{background-color:#eee;border:1px solid #ddd;padding:5px}
  .main .content table td{background-color:#fcfcfc;border:1px solid #ddd;padding:5px}
  .main .content ul{list-style:circle;padding-left:40px}
  .main .content ul li{margin:5px 0}
  .main .content ol{padding-left:40px}
  .main .content ol li{margin:5px 0}.main .content hr{border:0;border-top:1px dashed #ddd;margin:25px 0}
  .main .content img{border-radius:5px;cursor:pointer;display:block;margin:30px auto;max-width:100%;opacity:.6;-webkit-transition:opacity .3s ease-in;-o-transition:opacity .3s ease-in;transition:opacity .3s ease-in}
  .main .content .image-alt{color:#7f8c8d;font-style:italic;margin-bottom:30px;margin-top:-10px;text-align:center}
  .main .content .searched{background-color:#ff0}

  .main,a.name{color:#293846}
  .main {
    margin:0 auto;
    max-width:100%;
    min-height:100%;
    padding:0 0px;
    position:relative;
    margin-bottom: 0px;
    margin-top: 0px;
  }
  .main .site .logo{background-repeat:no-repeat;background-size:cover;border:1px solid #ddd;border-radius:50%;height:80px;margin:0 auto;width:80px}
  .main .site .title{font-size:14px;font-weight:700;margin:10px 0 0;text-align:center}
  .main .site .subtitle{color:#a1b2b4;font-size:12px;font-style:italic;font-weight:400;margin-top:10px;text-align:center}
  .main.about .info{margin-top:80px;text-align:center}
  .container {
    height:auto;
    min-height:100%;
    padding-bottom:0px;
  }
  .container .header{
    text-align:center; 
    background-color: #000000; 
    position: fixed; 
    width: 100%; 
    margin-bottom: 0px;
    padding-top: 10px;
    padding-bottom: 10px;
    opacity: 1;
    z-index: 2;
    top: 0px;
  }

  .container .header .logo{
    background-repeat:no-repeat;
    background-size:cover;
    border:1px solid #ddd;
    border-radius:50%;
    height:40px;
    margin:0 auto;
    width:40px}
  .container .header .title{font-size:14px;font-weight:700;margin:10px 0 0;text-align:center}
  .container .header .subtitle{color:#a1b2b4;font-size:12px;font-style:italic;font-weight:400;margin-top:10px;text-align:center}

  .container .header .search-wrap{margin:10px auto 0;max-width:200px;position:relative}

  .container .header .search-wrap .search{border:1px solid #ddd;border-radius:100px;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:.8;padding:10px 25px;width:200px}

  .container .header .search-wrap .search:focus{opacity:1;outline:0}

  .container .header .search-wrap .icon{opacity:.3;position:absolute;right:10px;top:5px}

  .containet .header-wrap .site { 
    background-color: #000000;
    height: 80px;
  }
  /* new header */

  .container .header-wrap {
    position: fixed;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    left: 0;
    padding: 0px;
    right: 0;
    /* z-index: 0; */
    margin-top: 0px;
    z-index: 3;
}

  .container .header-wrap .title{
    font-size:14px;
    font-weight:700;
    margin:10px 0 0;
    text-align:center}
  .container .header-wrap .subtitle{color:#a1b2b4;font-size:12px;font-style:italic;font-weight:400;margin-top:10px;text-align:center}

  .container .header-wrap .search-wrap{margin:10px auto 0;max-width:200px;position:relative}

  .container .header-wrap .search-wrap .search{border:1px solid #ddd;border-radius:100px;-webkit-box-sizing:border-box;box-sizing:border-box;opacity:.8;padding:10px 25px;width:200px}

  .container .header-wrap .search-wrap .search:focus{opacity:1;outline:0}

  .container .header-wrap .search-wrap .icon{opacity:.3;position:absolute;right:10px;top:5px}

  .header-wrap{
    position:fixed;
    -webkit-box-pack:justify;
    -ms-flex-pack:justify;-webkit-box-align:center;-ms-flex-align:center;
    -webkit-align-items:center;align-items:center;display:-webkit-box;display:
    -webkit-flex;display:-ms-flexbox;display:flex;font-size:12px;font-weight:700;
    -webkit-justify-content:space-between;justify-content:space-between;
    left:0;padding:0px;right:0;
    /* z-index:0; */
    margin-top: 0px;
    z-index: 3;
    height: 130px;
    background-color: #000000;
  }
  .header-wrap a{color:#a1b2b4}
  .header-wrap .index{
    -webkit-box-align:center;
    -ms-flex-align:center;
    -webkit-align-items:center;
    align-items:center;
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    /* display:flex */
  }

  .header-wrap .left {
    /* background-color: #009a61; */
    padding: 10px;
    position:relative;
    top: 10px;
    height: 100%;
    width: 10%;
  }
  .header-wrap .middle {
    /* background-color: #009a61; */
    padding: 10px;
    position:relative;
    top: 10px;
    height: 100%;
    width: 60%;
    margin-left: 10%;
  }
  .header-wrap .right {
    /* background-color: #13513a; */
    padding: 10px;
    position:relative;
    top: 10px;
    height: 100%;
    width: 30%;
    align-content: right;
    display: flex;
    justify-content: flex-end;
  }
  .header-wrap .index .logo{
    border:1px solid #ddd;
    border-radius:50%;
    height:30px;
    margin-right:10px;
    width:30px
  }
  .header-wrap .menu{
    display:-webkit-box;
    display:-webkit-flex;
    display:-ms-flexbox;
    display:flex;
    flex-direction: column;
    position: relative;
    left: 10px;
    z-index: 3;
    font-size: 10px;
  }
  .header-wrap .menu .menu-item{
    margin-right:10px
  }


  .container .main.article {
    margin-top: 120px;
  }

  .container .header-wrap {
    top: 0px;
  }
  .footer{background-color:#fcfcfc;border-top:1px solid #eee;clear:both;color:#a1b2b4;font-size:14px;height:32px;margin-top:-36px;position:relative;width:100%}
  .footer span{display:block;padding:8px 15px}.footer span a{font-weight:700}
  
  .footer .copyright{float:left}
  .footer .publish{float:right}
  .footer .publish a{color:#a1b2b4;text-decoration:none;} 


.footer   .menu {
  list-style: none;
  margin: 0;
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.footer .menu-item {
  margin: 30 ;
}

.footer .menu-item a {
  text-decoration: none;
  color: #333;
  padding: 5px 10px;
  border-radius: 3px;
  transition: background-color 0.3s ease;
}

.footer .menu-item a:hover {
  background-color: #e0e0e0;
}

.article-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

.code-window {
  background: #1e1e1e;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  margin: 20px 0;
  max-width: 800px;
}

.window-header {
  background: linear-gradient(180deg, #3c3c3c 0%, #2d2d2d 100%);
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid #1a1a1a;
}

.window-controls {
  display: flex;
  gap: 8px;
}

.control-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
}

.close { background: #ff5f57; }
.minimize { background: #ffbd2e; }
.maximize { background: #28ca42; }

.window-title {
  flex: 1;
  text-align: center;
  color: #999;
  font-size: 12px;
  font-weight: 500;
}

.code-content {
  padding: 16px;
  background: #1e1e1e;
  color: #d4d4d4;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.5;
  overflow-x: auto;
}

.code-content pre {
  margin: 0;
  white-space: pre-wrap;
  background-color: #293846;
}

/* Syntax highlighting */
.keyword { color: #569cd6; }
.string { color: #ce9178; }
.comment { color: #6a9955; }
.function { color: #dcdcaa; }
.variable { color: #9cdcfe; }
.number { color: #b5cea8; }