/* ------------------------------------
 * Typecho Default Theme
 *
 * @author  Typecho Team
 * @link  http: //typecho.org/
 * @update  2013-10-28
 * --------------------------------- */

/* ------------------
 * Global style
 * --------------- */
body {
  background-color: #FFF;
  color: #444;
  font-family: 'CustomFonts', Georgia, "Times New Roman",  "Microsoft YaHei", sans-serif;
}

/**
*
**/
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -520;
    pointer-events: none;
}

/*****/
a {
  /* color: #3354AA; */
  color: #338c8d;
  text-decoration: none;
}
a:hover, a:active {
  color: #444;
}

pre{ 
  background: #ecececab;
  font-family: 'Fira Code', 'JetBrains Mono', Consolas, 'Courier New', monospace;;
  font-size: 85%;
  padding: 1em;
  overflow: auto;
  max-height: 400px;
  position: relative;
  border: 1px solid #f3f0f0;
  overflow: auto;
}
code { padding: 2px 4px; color: #B94A48; }

pre code {
  display: block;
  padding: .8em .3em;
  color: #444;
  border-top: 1px solid #fca2a2;
  white-space: pre-line;
  background-color: transparent;
  /* border-radius: 0px 0px 5px 5px; */
}
pre .code-tip {
  color: #d9968c;
}

pre #copyButton {
  position: absolute;
  top: .2rem;
  right: .8rem;
  display: none;
  background-color: #dddada;
  color: #000;
  border: none;
  padding: 5px 3px;
  cursor: pointer;
  border-radius: 3px;
}

blockquote {
  /* margin: 1em 0; */
  margin: 2em 1em 1em 2em;
  padding-left: 1em;
  border-left: 4px solid #ecbebe;
  color: #a08b8b;
}

.article-footer {
  margin-bottom: 1rem;
  margin-top: -.4rem;
  padding: 1rem;
  background-color: #f1f7fd;
  border-radius: 5px;
  /* border: 1px solid #f1f2f3; */
  box-shadow: 0 2px 10px 0 #5d5252;
  font-size: 80%;
}
.article-footer .header{
  font-size: 1.2em;
}
.article-footer .body a:hover{
  border-bottom: 2px solid #338c8d;
  color: #338c8d;
}
#license:last-child{
border-top: 1px solid #beb9be;
padding-top: 1rem;
}


table {
  /* border: 1px solid #ddd;
  width: 100%; */
  border-collapse: collapse;
  border-radius: 5px;
  /* overflow: hidden; */
  margin: 2rem 0;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
table th,
table td {
  padding: 5px 10px;
  border: 1px solid #e1c1c1;
/*border: 1px solid #eee;*/
  text-align: left;
}
table th {
  /*background: #f3f3f3;*/
  background: #e1c1c1;
}

tbody tr{
  background-color: #ffffff;
  border-bottom: 1px solid #dddddd;
}

tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

/* tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
} */

tbody tr:hover {
  background-color: #f1f1f1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei","Microsoft Yahei", sans-serif;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
textarea {
  padding: 5px;
  border: 1px solid rgb(213 228 230 / 85%);
  width: 100%;
  border-radius: 2px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  /* box-shadow: 0 2px 10px 0 #f4ecec; */
  /* box-shadow: 0 2px 2px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.06),0 1px 5px 0 rgba(0,0,0,.12); */
}
textarea {
  resize: vertical;
}

.container{
  margin-top: 1rem;
}

/* Special link style */
.post-meta a,
.post-content a,
.widget a,
.comment-content a {
  color: #5e74d3;
}


.widget-reply a{
  color: #f166a8;
}

.post-meta a:hover,
.post-content a:hover,
.widget a:hover,
.comment-content a:hover {
  /* border-bottom-color: transparent; */
  border-bottom: 1px solid #03A9F4;;
}

/* ------------------
 * Header
 * --------------- */

#header {
  padding-top: 0.4rem;
  /* border-bottom: 1px solid #EEE; */
  /*  */
}

#logo {
  /*color: #333;*/
  color: #e58585cf;
  font-size: 2.5em;
}

#logo:hover {
  /*color: #333;*/
  color: #fff;
  font-size: 2.5em;
}


@keyframes typingWords {
  0% {
      width: 0;
  }
}

@keyframes cursor {
  50% {
      border-color: transparent;
  }
}

#logo img {
    max-height: 64px;
}

.description {
  margin: .5em 0 0 2em;
  color: #cbb5b5;
  font-style: italic;
  /* width: 19em; */
  /* animation: typingWords 5s steps(18) infinite, cursor 0.5s steps(1) infinite; */
  white-space: nowrap;
  overflow: hidden;
  /* border-right: 1px solid #e48989; */
}

/* Navigation menu */
/* #nav-menu {
  margin: 25px 0 0;
  padding: 0;
} */

#nav-menu {
  margin: 25px 0 0;
  padding: 0;
  /* border: solid 1px #f4f3f3; */
  border-radius: 2px;
  background-color:#fff;
  /* box-shadow: 0 2px 10px 0 #e4e4e4; */
  box-shadow: 0 2px 10px 0 #5d5252;
}

#nav-menu a {
  display: block;
  margin-right: -1px;
  /**padding: 0 20px;*/
  padding: 0 2rem;
  /* border: 1px solid #EEE; */
  border-right:1px solid #EEE;
  border-bottom: none;
  height: 32px;
  line-height: 32px;
  color: #444;
  float: left;
  font-weight: 600;
}
#nav-menu a:hover,
#nav-menu .current {
  /*ackground: #F6F6F6;*/
  background: #e1c1c1;
}

/* Search */
#search {
  position: relative;
  margin-top: 15px;
}
#search input {
  padding-right: 30px;
}
#search button {
  position: absolute;
  right: 4px;
  top: 2px;
  border: none;
  padding: 0;
  width: 24px;
  height: 24px;
  background: transparent url(../img/icon-search.png) no-repeat center center;
  direction: ltr; /* fix RTL language */
  text-indent: -9999em;
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) {
  #search button {
    background-image: url(../img/icon-search@2x.png);
    -webkit-background-size: 24px 24px;
    -moz-background-size: 24px 24px;
    -o-background-size: 24px 24px;
    background-size: 24px 24px;
  }
}


/* ------------------
 * Main
 * --------------- */

/* .post {
  padding: 15px 0 20px;
border-bottom: 1px solid #EEE;
} 
*/

.post {
  padding: 15px 15px 20px 20px;
  border: 1px solid #f4f3f3;
  margin-bottom: 1rem;
  margin-top: .5rem;
  /* background-color: #f2c28d47; */
  background-color: #FFF;
  border-radius: 5px;
  box-shadow: 0 2px 10px 0 #5d5252;
}
.post-title {
  margin: .83em 0;
  /* font-size: 1.2em; */
}
.post-meta {
  margin-top: -0.5em;
  padding: 0;
  color: #999;
  font-size: .92857em;
}
.post-meta li {
  display: inline-block;
  margin: 0 8px 0 0;
  padding-left: 12px;
  /* border-left: 1px solid #EEE; */
}
.post-meta li:first-child {
  margin-left: 0;
  padding-left: 0;
  border: none;
}
.post-content {
  line-height: 1.5;
}
.post-content p {
  line-height: 2.2;
  margin-bottom: 1.5em;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6{
  /* background-color: #cadddf70; */
  margin: 1.5em 0;
}

.post-content h1{
  padding-left: 1em;
  border-left: 4px solid #84bf48;
  border-bottom: 1px solid #84bf48;
  border-radius: 0px 3px 3px 0px;
}

.post-content h2{
    padding-left: .3em;
    border-left: 4px solid #37cbe3;
    border-bottom: 1px solid #37cbe3;
    /* font-size: 1.6em !important; */
    border-radius: 0px 3px 3px 0px;
}
.post-content h2:before{
  font-weight:600;
  margin-right: .6em;
  content:'#';
  color:#2fb0c5;
}

.post-content h3{
    padding-left: .3em;
    border-left: 4px solid #ea7332;
    border-bottom: 1px solid #ea7332;
    /* font-size: 1.4em; */
    border-radius: 0px 3px 3px 0px;
}
.post-content h3:before{
  font-weight:600;
  margin-right: .6em;
  content:'##';
  color:#ea7332;
}

.post-content h4{
    padding-left: .3em;
    border-left: 4px solid  #8b53db;
    border-bottom: 1px solid  #8b53db;
    /* font-size: 1.2em; */
    border-radius: 0px 3px 3px 0px;
}
.post-content h4:before{
  font-weight:600;
  margin-right: .6em;
  content:'###';
  color: #8b53db;
}

.post-content h5{
    margin: .3em 0;
    padding-left: .8em;
    border-left: 4px solid #e33772;
}

.post-content h6{
    margin: .3em 0;
    padding-left: .8em;
    border-left: 4px solid #a3b024;
}

.post-content a:hover{
    border-bottom: 2px solid #5e74d3;
}

.post-content .gallery-img:hover{
  border-bottom: none !important;
}



.post .tags {
  clear: both;
  font-size: 1.1em;
}

.post .tags a{
  background-color: #74a0df;
  color: #fcfcfc;
  padding: .3em .5em .4em 0.5em;
  margin-right: .1em;
  font-size: .8em;
  border-radius: 15px;
}

.post .tags a:hover{
  background-color: #3785f1;
  color: #ffffff;
  padding: .3em .5em .4em 0.5em;
  margin-right: .1em;
  font-size: .8em;
  border-radius: 15px;
}


.post-near {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  color: #999;
}
.post-near li {
  margin: 10px 0;
}

.archive-title-box{
  text-align: center;
  padding: .1em 0;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px 0 #5d5252;
}

.archive-title {
  /* margin: 1em 0 -1em; */
  /* padding-top: 20px; */
  color: #4289c1;
  font-size: 1.3em;
}
.more {
  text-align: center;
}
.more a {
  padding: .3rem;
  border: solid 1px #eebebe;
  color: #d092c5c4;
}

.more a:hover{
  padding: .3rem;
  background-color: #1b080a;
  color: #f6f7f9c4;
}

.protected .text {
  width: 50%;
}

/* Page nav */

.page-navigator {
  list-style: none;
  margin: 25px 0;
  padding: 0;
  text-align: center;
  background-color: #fff;
  border: solid 1px #f4f3f3;
  border-radius: 5px;
  box-shadow: 0 2px 10px 0 #5d5252;
}
.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;*/
  background: rgb(177 234 242 / 52%);
}

/* ------------------
 * Comment list
 * --------------- */
#comments {
  /* padding-top: 15px; */
  padding: 15px 15px 20px 20px;
  border: solid 1px #e4e4e4;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 2px 10px 0 #5d5252;
}
.comment-list, .comment-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.comment-list li {
  padding: 14px;
  margin-top: 10px;
  border: 1px solid #8ac4a0;
  border-radius: 5px;
}
.comment-list li.comment-level-odd {
  background: #F6F6F3;
}
.comment-list li.comment-level-even {
  background: #FFF;
}
.comment-list li.comment-by-author {
  background: #FFF9E8;
  border-radius: 5px;
}
.comment-list li .comment-reply {
  text-align: right;
  font-size: .92857em;
}
.comment-meta a {
  color: #999;
  font-size: .92857em;
}
.comment-author {
  display: block;
  margin-bottom: 3px;
  color: #444;
}
.comment-author .avatar {
  float: left;
  margin-right: 10px;
  border-radius: 29px;
}
.comment-author cite {
  font-weight: bold;
  font-style: normal;
}

/* Comment 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: block;
  margin-bottom: .5em;
  font-weight: bold;
}
#comment-form .required:after {
  content: " *";
  color: #C00;
}

/* ------------------
 * secondary
 * --------------- */
#secondary {
  padding-top: 15px;
  word-wrap: break-word;
}
/* .widget {
  margin-bottom: 30px;
} */
.widget {
  margin-bottom: 30px;
  border-radius: 5px;
  border: solid 1px #f4f3f3;
  background-color: #fff;
  margin-left: -5rem;
  margin-top: -.38rem;
  padding: 0em 1em;
  box-shadow: 0 2px 10px 0 #5d5252;
}
.widget-list {
  list-style: none;
  padding: 0;
  border-top: 1px solid #f1e6e6;
}
.widget-list li {
  margin: 5px 0;
  line-height: 1.6;
  padding-right: .1rem;
}

.widget-list li ul {
  margin-left: 15px;
}

.widget-category ul{
  display: flex;
  flex-wrap: wrap;
}

.widget-category ul li {
  margin-right: 2rem;
}


/* ------------------
 * Footer 
 * --------------- */
#footer {
  padding: 3em 0;
  line-height: 1.5;
  text-align: center;
  color: #bf7d7d;
  font-family: "Times New Roman", "Microsoft YaHei", sans-serif;
}

#footer a:hover{
  color: #FFF;
}


/* -----------------
 * Error page
 * -------------- */
.error-page {
  margin-top: 100px;
  margin-bottom: 100px;
  color: #FFF;
}


/* -----------------
 * Content format
 *--------------- */
.post-content, .comment-content {
  line-height: 1.6;
  word-wrap: break-word;
}
.post-content h2, .comment-content h2 {
  font-size: 1.28571em;
}
.post-content img, .comment-content img,
.post-content video, .comment-content video {
  max-width: 100%;
}
.post-content a img,
.comment-content a img {
  background: #FFF;
  position: relative;
  bottom: -4px;  /* hidden img parent link border  */
  border-radius: 4px;
  box-shadow: 0 2px 10px 0 #5d5252;
  margin-bottom: 1rem;
}
.post-content hr, .comment-content hr {
  margin: 2em auto;
  width: 100%;
  border: 1px solid #F1C0C0;
  border-width: 2px 0 0 0;
}


/* -----------------
 * Misc
 *--------------- */
.aligncenter, div.aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
img.alignleft {
  margin: 0 15px 0 0;
}
img.alignright {
  margin: 0 0 0 15px;
}


/* -----------------
 * Responsive
 *--------------- */
@media (max-width: 767px) {
  body {
    font-size: 81.25%;
  }
  #nav-menu a {
    float: none;
    /* display: inline-block; */
    display: table-cell;
    margin: 0 -2px;
  }
}

/* @media (max-width: 768px) {
  #header,
  .post-title,
  .post-meta {
    text-align: center;
  }
} */
@media (max-width: 768px) {
  .post-title,
  .post-meta {
    text-align: center;
  }
}


@media (min-width: 992px) {
  .container {
    max-width: 952px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1160px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1320px;
  }
}

@media (min-width: 1660px) {
  .container {
    max-width: 88%;
  }
}


/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
  display: none !important;
  visibility: hidden; }

/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.sr-only {
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px; }

/*
* Extends the .sr-only class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.sr-only.focusable:active,
.sr-only.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto; }

/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
  visibility: hidden; }

.submit{
width:6rem;
height:1.8rem;
color:#fff;
border-radius: 2px;
border:0px;
background-color:#76b4f4;
font-size:112%;
}


.back-to-top {
  position: fixed;
  bottom: 5rem;
  right: .5rem;
  display: none; 
  background-color: #03a9f48a;
  color: white;
  border: none;
  border-radius: 50px;
  padding: .4em .6em;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.back-to-top::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 10px solid white; 
  margin-right: 5px; 
}

.back-to-top:hover {
  background-color: #0056b387;
}

#nav-toggler {
  display: none;
}

@media (max-width: 991px) {
  #nav-toggler {
    display: block;
  }

  #header {
    padding-bottom: 1rem;
    box-shadow: 0 2px 10px 0 #f4f2f2;
  }

  .site-name {
      display: flex;
      justify-content: space-around;
  }
  .site-name a {
    width: 80%;
  }
  .site-search{
    width: 100%;
    /* display: block; */
  }

  #nav-menu {
    box-shadow: none;
    margin: .6rem 0 0;
    display: none;
  }

  #nav-menu a{
    display: flex;
  }
  .post {
    box-shadow: 0 2px 10px 0 #d4cdcd;
  }
  .page-navigator{
    box-shadow: 0 2px 10px 0 #d4cdcd;
  }
}

.replyhide {
  text-align: center;
  background: rgb(249 249 249 / 68%);
  border-radius: 3px;
  border: 1px dashed #cc1a1a;
  padding: 10px 0px 10px 0px;
  color: #e67992c4;
}

/* .timer{
  padding: 1rem 0rem;
    text-align: center;
    font-size: 1.5em;
    font-family: "微软雅黑", sans-serif;
}

.timer .lunar {
  margin-top: 1em;
  color: #666;
} */

.links{
  font-family: "微软雅黑", sans-serif;
}

.links ul{
  padding: .5rem .5rem;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: space-between;
}

.links ul li{
  margin: 0rem .3rem 0rem 0rem !important;
}

.links ul li a{
  color: #656977;
}

.post,.widget.page-navigator{
  border-radius: 1px !important;
}

.theme-control{
  position: fixed;
  bottom: 3rem;
  right: .5rem;
  border-radius: 3px;
  padding: .2em .3em;
  cursor: pointer;
  display: inline-block;
  background-color: #e1ddd8ab;

}

#dark-mode{
  opacity: .8;
  transition: .5s ease all;
}

#backToTopBtn{
  margin-top: .6rem;
}
.dark-mode{
  background-color: #010101 !important;
  color: #9e9e9e !important;
}
.dark-mode-b{
  box-shadow:none;
}
.transition {
  transition: background-color 0.3s ease, color 0.3s ease;
}