@media (min-width: 1200px) {
  .post-container,
  .sidebar-container {
    padding-right: 5%;
  }
}
@media (min-width: 768px) {
  .post-container {
    padding-right: 5%;
  }
}
.sidebar-container {
  color: #bfbfbf;
  font-size: 14px;
}
.sidebar-container h5 {
  color: #a3a3a3;
  padding-bottom: 1em;
}
.sidebar-container h5 a {
  color: #a3a3a3 !important;
  text-decoration: none;
}
.sidebar-container a {
  color: #bfbfbf !important;
}
.sidebar-container a:hover,
.sidebar-container a:active {
  color: #0085a1 !important;
}
.sidebar-container .tags a {
  border-color: #bfbfbf;
}
.sidebar-container .tags a:hover,
.sidebar-container .tags a:active {
  border-color: #0085a1;
}
.sidebar-container .short-about img {
  width: 80%;
  display: block;
  border-radius: 5px;
  margin-bottom: 20px;
}
.sidebar-container .short-about p {
  margin-top: 0px;
  margin-bottom: 20px;
}
.sidebar-container .short-about .list-inline > li {
  padding-left: 0px;
}
.catalog-container {
  padding: 0px;
}
.side-catalog {
  display: block;
  overflow: auto;
  height: 100%;
  padding-bottom: 40px;
  width: 195px;
}
.side-catalog.fixed {
  position: fixed;
  top: -21px;
}
.side-catalog.fold .catalog-toggle::before {
  content: "+";
}
.side-catalog.fold .catalog-body {
  display: none;
}
.side-catalog .catalog-toggle::before {
  content: "−";
  position: relative;
  margin-right: 5px;
  bottom: 1px;
}
.side-catalog .catalog-body {
  position: relative;
  list-style: none;
  height: auto;
  overflow: hidden;
  padding-left: 0px;
  padding-right: 5px;
  text-indent: 0;
}
.side-catalog .catalog-body li {
  position: relative;
  list-style: none;
}
.side-catalog .catalog-body li a {
  padding-left: 10px;
  max-width: 180px;
  display: inline-block;
  vertical-align: middle;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  text-decoration: none;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.side-catalog .catalog-body .h1_nav,
.side-catalog .catalog-body .h2_nav {
  margin-left: 0;
  font-size: 13px;
  font-weight: bold;
}
.side-catalog .catalog-body .h3_nav {
  margin-left: 6px;
  font-size: 13px;
  font-weight: bold;
}
.side-catalog .catalog-body .h4_nav {
  margin-left: 12px;
  font-size: 12px;
}
.side-catalog .catalog-body .h4_nav a {
  max-width: 170px;
}
.side-catalog .catalog-body .h5_nav .h6_nav {
  margin-left: 18px;
  font-size: 12px;
}
.side-catalog .catalog-body .h5_nav .h6_nav a {
  max-width: 170px;
}
.side-catalog .catalog-body .active {
  border-radius: 4px;
  background-color: #f5f5f5;
}
.side-catalog .catalog-body .active a {
  color: #0085a1 !important;
}
@media (max-width: 1200px) {
  .side-catalog {
    display: none;
  }
}
/*
  Please note this CSS is currently in   prototype form. We'll implement a cleaned up version in Web Starter Kit.
*/
.paper-snackbar {
  transition-property: opacity, bottom, left, right, width, margin, border-radius;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  /*font-family: RobotoDraft;*/
  font-size: 14px;
  min-height: 14px;
  background-color: #323232;
  background-color: #0085a1;
  position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  line-height: 22px;
  padding: 18px 24px;
  bottom: 0px;
  opacity: 0;
}
@media (min-width: 640px) {
  .paper-snackbar {
    /*
    Desktop:
      Single-line snackbar height: 48 dp tall
      Minimum width: 288 dp
      Maximum width: 568 dp
      2 dp rounded corner
      Text: Roboto Regular 14 sp
      Action button: Roboto Medium 14 sp, all-caps text
      Default background fill: #323232 100%
    */
    min-width: 288px;
    max-width: 568px;
    display: inline-flex;
    border-radius: 2px;
    margin: 24px;
    bottom: -100px;
  }
}
@media (max-width: 640px) {
  .paper-snackbar {
    /*
  Mobile:
    Single-line snackbar height: 48 dp
    Multi-line snackbar height: 80 dp
    Text: Roboto Regular 14 sp
    Action button: Roboto Medium 14 sp, all-caps text
    Default background fill: #323232 100%
  */
    left: 0px;
    right: 0px;
  }
}
.paper-snackbar .action {
  background: inherit;
  display: inline-block;
  border: none;
  font-size: inherit;
  text-transform: uppercase;
  color: #ffeb3b;
  margin: 0px 0px 0px 24px;
  padding: 0px;
  min-width: min-content;
  outline: 0px;
}
/* Everything from here down is actually just for the demo - the material buttons and card, and various other pieces of styling */
/* Variables */
/* Buttons */
.paper-button {
  position: relative;
  padding: 4px 0;
  margin: 1em;
  width: 160px;
  overflow: hidden;
  user-select: none;
  color: #000000;
  text-transform: uppercase;
  border-radius: 3px;
  outline-color: #a3a3a3;
}
.paper-button:hover {
  cursor: pointer;
}
.paper-button button,
.paper-button input[type="submit"] {
  background: inherit;
  border: none;
  display: block;
  width: 100%;
  height: 100%;
  /*font-family: 'Roboto';*/
  font-size: 1em;
  color: #000000;
  text-transform: uppercase;
}
.paper-button.colored,
.paper-button.colored button {
  color: #4285f4;
}
.paper-button.raised-button.colored {
  background-color: #4285f4;
}
.paper-button .raised-button {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.paper-button.raised-button.colored {
  background: #4285f4;
  color: #fff;
}
.paper-button[disabled] {
  background-color: #eaeaea !important;
  color: #a8a8a8 !important;
  cursor: auto;
}
.paper-button:hover {
  background-color: #eaeaea;
}
.paper-button.raised-button.colored:hover {
  background-color: #3367d6;
}
button.paper-button {
  border: 0;
  /*font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;*/
  font-size: 1em;
  line-height: 25px;
  background-color: #ffffff;
}
.paper-button input[type="submit"] {
  outline-color: #a3a3a3;
}
.paper-button.colored.raised-button input[type="submit"] {
  color: #ffffff;
}
/** Shadows **/
.paper-shadow-animated.paper-shadow {
  transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
.paper-shadow-top-z-1 {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.16);
}
.paper-shadow-bottom-z-1 {
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
}
.paper-shadow-top-z-2 {
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.paper-shadow-bottom-z-2 {
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2);
}
.paper-shadow-top-z-3 {
  box-shadow: 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.paper-shadow-bottom-z-3 {
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24);
}
.paper-shadow-top-z-4 {
  box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21);
}
/** Card **/
.card {
  background: white;
  width: 300px;
  height: 300px;
  position: relative;
  margin: 16px;
  border-radius: 2px;
}
.highlight,
pre.highlight {
  background: #282c34;
  color: #abb2bf;
}
.highlight pre {
  background: #282c34;
}
.highlight .hll {
  background: #282c34;
}
.highlight .c {
  color: #5c6370;
  font-style: italic;
}
.highlight .err {
  color: #960050;
  background-color: #1e0010;
}
.language-coq .highlight .err {
  background-color: transparent;
}
.highlight .k,
.language-coq .highlight .err {
  color: #c678dd;
}
.highlight .l {
  color: #98c379;
}
.highlight .n {
  color: #abb2bf;
}
.highlight .o {
  color: #abb2bf;
}
.highlight .p {
  color: #abb2bf;
}
.highlight .cm {
  color: #5c6370;
  font-style: italic;
}
.highlight .cp {
  color: #5c6370;
  font-style: italic;
}
.highlight .c1 {
  color: #5c6370;
  font-style: italic;
}
.highlight .cs {
  color: #5c6370;
  font-style: italic;
}
.highlight .ge {
  font-style: italic;
}
.highlight .gs {
  font-weight: 700;
}
.highlight .kc {
  color: #c678dd;
}
.highlight .kd {
  color: #c678dd;
}
.highlight .kn {
  color: #c678dd;
}
.highlight .kp {
  color: #c678dd;
}
.highlight .kr {
  color: #c678dd;
}
.highlight .kt {
  color: #c678dd;
}
.highlight .ld {
  color: #98c379;
}
.highlight .m {
  color: #d19a66;
}
.highlight .s {
  color: #98c379;
}
.highlight .na {
  color: #d19a66;
}
.highlight .nb {
  color: #e5c07b;
}
.highlight .nc {
  color: #e5c07b;
}
.highlight .no {
  color: #e5c07b;
}
.highlight .nd {
  color: #e5c07b;
}
.highlight .ni {
  color: #e5c07b;
}
.highlight .ne {
  color: #e5c07b;
}
.highlight .nf {
  color: #abb2bf;
}
.highlight .nl {
  color: #e5c07b;
}
.highlight .nn {
  color: #abb2bf;
}
.highlight .nx {
  color: #abb2bf;
}
.highlight .py {
  color: #e5c07b;
}
.highlight .nt {
  color: #e06c75;
}
.highlight .nv {
  color: #e5c07b;
}
.highlight .ow {
  font-weight: 700;
}
.highlight .w {
  color: #f8f8f2;
}
.highlight .mf {
  color: #d19a66;
}
.highlight .mh {
  color: #d19a66;
}
.highlight .mi {
  color: #d19a66;
}
.highlight .mo {
  color: #d19a66;
}
.highlight .sb {
  color: #98c379;
}
.highlight .sc {
  color: #98c379;
}
.highlight .sd {
  color: #98c379;
}
.highlight .s2 {
  color: #98c379;
}
.highlight .se {
  color: #98c379;
}
.highlight .sh {
  color: #98c379;
}
.highlight .si {
  color: #98c379;
}
.highlight .sx {
  color: #98c379;
}
.highlight .sr {
  color: #56b6c2;
}
.highlight .s1 {
  color: #98c379;
}
.highlight .ss {
  color: #56b6c2;
}
.highlight .bp {
  color: #e5c07b;
}
.highlight .vc {
  color: #e5c07b;
}
.highlight .vg {
  color: #e5c07b;
}
.highlight .vi {
  color: #e06c75;
}
.highlight .il {
  color: #d19a66;
}
.highlight .gu {
  color: #75715e;
}
.highlight .gd {
  color: #f92672;
}
.highlight .gi {
  color: #a6e22e;
}
.highlighter-rouge .highlight {
  margin-bottom: 10px;
  border-radius: 6px;
}
.highlighter-rouge .highlight pre {
  font-size: 14px;
  line-height: 1.5;
  color: #555;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
  word-wrap: normal;
}
.highlighter-rouge .highlight .rouge-table .rouge-gutter,
.highlighter-rouge .highlight .rouge-table .rouge-code {
  border: 0 !important;
}
.highlighter-rouge .highlight .rouge-code pre {
  color: #abb2bf;
}
.highlighter-rouge .highlight .table-responsive {
  margin: 0px;
  border: 0px;
}
.highlighter-rouge .highlight .table {
  margin: 0px;
  table-layout: fixed;
}
.highlighter-rouge .highlight table > tbody > tr > td {
  margin: 0;
  border: 0;
  padding: 0;
}
.highlighter-rouge .highlight table > tbody > tr > td > pre {
  padding: 14px;
}
.highlighter-rouge .highlight td.rouge-gutter {
  width: 56px;
}
.highlighter-rouge .highlight .lineno {
  text-align: right;
  border-radius: 0px;
}
/* Landscape phones and down */
@media (max-width: 480px) {
  .highlighter-rouge .highlight {
    margin-left: -15px;
    margin-right: -15px;
    border-radius: 0px;
  }
  .highlighter-rouge .highlight td.rouge-gutter {
    width: 36px;
  }
  .highlighter-rouge .highlight table > tbody > tr > td > pre {
    padding: 14px 10px;
  }
}
.search-page {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  background: #fff;
  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1);
  -webkit-transform: translate(0, 100%);
  -ms-transform: translate(0, 100%);
  transform: translate(0, 100%);
  opacity: 0;
}
.search-page.search-active {
  opacity: 1;
  -webkit-transform: translate(0, 0) scale(1, 1);
  -ms-transform: translate(0, 0) scale(1, 1);
  transform: translate(0, 0) scale(1, 1);
}
.search-page.search-active .search-main {
  opacity: 1;
}
.search-page .search-main {
  padding-top: 80px;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
  transition: all 400ms cubic-bezier(0.32, 1, 0.23, 1) 250ms;
}
.search-page .search-main .row,
.search-page .search-main .row > div {
  height: 100%;
}
.search-page .search-icon-close-container {
  position: absolute;
  z-index: 1;
  padding: 16px;
  top: 0;
  right: 2px;
}
.search-page .search-icon-close-container i {
  font-size: 20px;
}
.search-page #search-input {
  font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
  font-size: 30px;
  font-weight: bold;
  color: #404040;
}
@media only screen and (min-width: 768px) {
  .search-page #search-input {
    margin-left: 20px;
  }
}
.search-page #search-results {
  overflow: auto;
  height: 100%;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}
.search-icon a,
.search-icon-close {
  cursor: pointer;
  font-size: 30px;
  color: #311e3e;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
.search-icon a:hover,
.search-icon-close:hover {
  opacity: 0.8;
}
.search-icon,
.search-icon-close {
  font-size: 16px;
}
body {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 16px;
  color: #404040;
  overflow-x: hidden;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
p {
  margin: 30px 0;
}
@media screen and (max-width: 768px) {
  p {
    margin: 25px 0;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  line-height: 1.1;
  font-weight: bold;
}
h4 {
  font-size: 21px;
}
a {
  color: #404040;
}
a:hover,
a:focus {
  color: #0085a1;
}
a img:hover,
a img:focus {
  cursor: zoom-in;
}
article {
  overflow: hidden;
}
blockquote {
  color: gray;
  font-style: italic;
  font-size: 0.95em;
  margin: 20px 0 20px;
}
blockquote p {
  margin: 0;
}
small.img-hint {
  display: block;
  margin-top: -20px;
  text-align: center;
}
br + small.img-hint {
  margin-top: -40px;
}
img.shadow {
  box-shadow: rgba(0, 0, 0, 0.258824) 0px 2px 5px 0px;
}
select {
  -webkit-appearance: none;
  margin-top: 15px;
  color: #337ab7;
  border-color: #337ab7;
  padding: 0em 0.4em;
  background: white;
}
select.sel-lang {
  min-height: 28px;
  font-size: 14px;
}
table {
  margin-top: 10px;
}
table.table > tbody th,
table.table > thead th,
table.table > tbody td,
table.table > thead td {
  border: 1px solid #eee !important;
}
@media screen and (max-width: 767px) {
  .table-responsive {
    border: 0;
  }
}
hr.small {
  max-width: 100px;
  margin: 15px auto;
  border-width: 4px;
  border-color: white;
}
pre,
.table-responsive {
  -webkit-overflow-scrolling: touch;
}
pre code {
  display: block;
  width: auto;
  white-space: pre;
  word-wrap: normal;
}
code,
kbd,
pre,
samp {
  font-family: "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;
}
.postlist-container {
  margin-bottom: 15px;
}
.post-container a {
  color: #337ab7;
}
.post-container a:hover,
.post-container a:focus {
  color: #0085a1;
}
.post-container h1,
.post-container h2,
.post-container h3,
.post-container h4,
.post-container h5,
.post-container h6 {
  margin: 50px 0 20px;
  line-height: 1.4;
}
.post-container h1 + p,
.post-container h2 + p,
.post-container h3 + p,
.post-container h4 + p,
.post-container h5 + p,
.post-container h6 + p {
  margin-top: 20px;
}
.post-container h2::before {
  content: " ";
  display: block;
  border-bottom: 1px solid #ececec;
  margin-top: 44px;
  margin-bottom: 30px;
}
.post-container h4 {
  font-size: 22px;
  font-weight: 600;
  color: gray;
}
.post-container h4 + p {
  margin-top: 10px;
}
.post-container h5,
.post-container h6 {
  font-size: 20px;
  font-weight: 600;
  color: gray;
}
.post-container h5 + p,
.post-container h6 + p {
  margin-top: 10px;
}
@media screen and (max-width: 768px) {
  .post-container h1 {
    font-size: 30px;
  }
  .post-container h2 {
    font-size: 22px;
  }
  .post-container h3 {
    font-size: 20px;
  }
  .post-container h4 {
    font-size: 19px;
  }
  .post-container h5,
  .post-container h6 {
    font-size: 18px;
  }
}
.post-container ul,
.post-container ol {
  margin-bottom: 40px;
}
@media screen and (max-width: 768px) {
  .post-container ul,
  .post-container ol {
    padding-left: 30px;
  }
}
@media screen and (max-width: 500px) {
  .post-container ul,
  .post-container ol {
    padding-left: 20px;
  }
}
.post-container ol ol,
.post-container ol ul,
.post-container ul ol,
.post-container ul ul {
  margin-bottom: 5px;
}
.post-container li p {
  margin: 0;
  margin-bottom: 5px;
}
.post-container li h1,
.post-container li h2,
.post-container li h3,
.post-container li h4,
.post-container li h5,
.post-container li h6 {
  line-height: 2;
  margin-top: 20px;
}
.post-container .pager li {
  width: 48%;
}
.post-container .pager li.next {
  float: right;
}
.post-container .pager li.previous {
  float: left;
}
.post-container .pager li > a {
  width: 100%;
}
.post-container .pager li > a > span {
  color: #a3a3a3;
  font-weight: normal;
  letter-spacing: 0.5px;
}
.post-container .anchorjs-link {
  position: absolute;
  text-decoration: none !important;
}
@media only screen and (max-width: 767px) {
  /**
   * Layout
   * Since V1.6 we use absolute positioning to prevent to expand container-fluid
   * which would cover tags. A absolute positioning make a new layer.
   */
  .navbar-default .navbar-collapse {
    position: absolute;
    right: 0;
    border: none;
    background: white;
    box-shadow: 0px 5px 10px 2px rgba(0, 0, 0, 0.2);
    box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
    border-radius: 2px;
    width: 170px;
  }
  /**
   * Animation
   * HuxBlog-Navbar using genuine Material Design Animation
   */
  #huxblog_navbar {
    /**
     * Sharable code and 'out' function
     */
    opacity: 0;
    transform: scaleX(0);
    transform-origin: top right;
    transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
    -webkit-transform: scaleX(0);
    -webkit-transform-origin: top right;
    -webkit-transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
    /**
     *'In' Animation
     */
  }
  #huxblog_navbar a {
    font-size: 13px;
    line-height: 28px;
  }
  #huxblog_navbar .navbar-collapse {
    height: 0px;
    transform: scaleY(0);
    transform-origin: top right;
    transition: transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
    -webkit-transform: scaleY(0);
    -webkit-transform-origin: top right;
    -webkit-transition: -webkit-transform 400ms cubic-bezier(0.32, 1, 0.23, 1) 0ms;
  }
  #huxblog_navbar li {
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #huxblog_navbar.in {
    transform: scaleX(1);
    -webkit-transform: scaleX(1);
    opacity: 1;
    transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
    -webkit-transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #huxblog_navbar.in .navbar-collapse {
    transform: scaleY(1);
    -webkit-transform: scaleY(1);
    transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
    -webkit-transition: -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
  }
  #huxblog_navbar.in li {
    opacity: 1;
    transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
    -webkit-transition: opacity 450ms cubic-bezier(0.23, 1, 0.32, 1) 205ms;
  }
}
.navbar-custom {
  background: none;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 3;
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.navbar-custom .navbar-brand {
  font-weight: 800;
  color: white;
  height: 56px;
  line-height: 25px;
}
.navbar-custom .navbar-brand:hover {
  color: rgba(255, 255, 255, 0.8);
}
.navbar-custom .nav li a {
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.navbar-custom .nav li a:active {
  background: rgba(0, 0, 0, 0.12);
}
@media only screen and (min-width: 768px) {
  .navbar-custom {
    background: transparent;
    border-bottom: 1px solid transparent;
  }
  .navbar-custom body {
    font-size: 20px;
  }
  .navbar-custom .navbar-brand {
    color: white;
    padding: 20px;
    line-height: 20px;
  }
  .navbar-custom .navbar-brand:hover,
  .navbar-custom .navbar-brand:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a {
    color: white;
    padding: 20px;
  }
  .navbar-custom .nav li a:hover,
  .navbar-custom .nav li a:focus {
    color: rgba(255, 255, 255, 0.8);
  }
  .navbar-custom .nav li a:active {
    background: none;
  }
}
.navbar-custom.invert .navbar-toggle:active {
  background-color: rgba(0, 0, 0, 0.05);
}
.navbar-custom.invert .navbar-toggle .icon-bar {
  background-color: #404040;
}
.navbar-custom.invert .navbar-brand {
  color: #404040;
}
.navbar-custom.invert .navbar-brand:hover,
.navbar-custom.invert .navbar-brand:focus {
  color: #0085a1;
}
.navbar-custom.invert .nav li a {
  color: #404040;
}
.navbar-custom.invert .nav li a:hover,
.navbar-custom.invert .nav li a:focus {
  color: #0085a1;
}
@media only screen and (min-width: 1170px) {
  .navbar-custom {
    -webkit-transition: background-color 0.3s;
    -moz-transition: background-color 0.3s;
    transition: background-color 0.3s;
    /* Force Hardware Acceleration in WebKit */
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .navbar-custom.is-fixed {
    /* when the user scrolls down, we hide the header right above the viewport */
    position: fixed;
    top: -61px;
    background-color: rgba(255, 255, 255, 0.9);
    border-bottom: 1px solid #f2f2f2;
    -webkit-transition: -webkit-transform 0.3s;
    -moz-transition: -moz-transform 0.3s;
    transition: transform 0.3s;
  }
  .navbar-custom.is-fixed .navbar-brand {
    color: #404040;
  }
  .navbar-custom.is-fixed .navbar-brand:hover,
  .navbar-custom.is-fixed .navbar-brand:focus {
    color: #0085a1;
  }
  .navbar-custom.is-fixed .nav li a {
    color: #404040;
  }
  .navbar-custom.is-fixed .nav li a:hover,
  .navbar-custom.is-fixed .nav li a:focus {
    color: #0085a1;
  }
  .navbar-custom.is-visible {
    /* if the user changes the scrolling direction, we show the header */
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    -ms-transform: translate3d(0, 100%, 0);
    -o-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.intro-header {
  background: no-repeat center center;
  background-color: #a3a3a3;
  background-attachment: scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
  margin-bottom: 0px;
  /* 0 on mobile, modify by Hux */
}
.intro-header.style-text {
  background: none;
}
.intro-header.style-text .site-heading,
.intro-header.style-text .post-heading,
.intro-header.style-text .page-heading {
  padding: 85px 0 20px;
  color: #404040;
}
.intro-header.style-text .site-heading .subheading,
.intro-header.style-text .post-heading .subheading,
.intro-header.style-text .page-heading .subheading {
  margin-bottom: 15px;
}
.intro-header.style-text .tags a,
.intro-header.style-text .tags .tag {
  border-color: #404040;
  color: #404040;
}
.intro-header.style-text .tags a:hover,
.intro-header.style-text .tags .tag:hover,
.intro-header.style-text .tags a:active,
.intro-header.style-text .tags .tag:active {
  background-color: rgba(0, 0, 0, 0.05);
}
@media only screen and (min-width: 768px) {
  .intro-header {
    margin-bottom: 20px;
    /* response on desktop */
  }
}
.intro-header .site-heading,
.intro-header .post-heading,
.intro-header .page-heading {
  padding: 85px 0 55px;
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading,
  .intro-header .post-heading,
  .intro-header .page-heading {
    padding: 150px 0;
  }
}
.intro-header .site-heading {
  padding: 95px 0 70px;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading {
    padding: 150px 0;
  }
}
.intro-header .site-heading,
.intro-header .page-heading {
  text-align: center;
}
.intro-header .site-heading h1,
.intro-header .page-heading h1 {
  margin-top: 0;
  font-size: 50px;
}
.intro-header .site-heading .subheading,
.intro-header .page-heading .subheading {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 18px;
  line-height: 1.1;
  display: block;
  font-weight: 300;
  margin: 10px 0 0;
}
@media only screen and (min-width: 768px) {
  .intro-header .site-heading h1,
  .intro-header .page-heading h1 {
    font-size: 80px;
  }
}
.intro-header .post-heading h1 {
  font-size: 30px;
  margin-bottom: 24px;
}
.intro-header .post-heading .subheading,
.intro-header .post-heading .meta {
  line-height: 1.1;
  display: block;
}
.intro-header .post-heading .subheading {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  font-size: 17px;
  line-height: 1.4;
  font-weight: normal;
  margin: 10px 0 30px;
  margin-top: -5px;
}
.intro-header .post-heading .meta {
  font-family: 'Lora', 'Times New Roman', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 16px;
}
.intro-header .post-heading .meta a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .post-heading h1 {
    font-size: 55px;
  }
  .intro-header .post-heading .subheading {
    font-size: 30px;
  }
  .intro-header .post-heading .meta {
    font-size: 20px;
  }
}
.intro-header .header-img-credit {
  position: absolute;
  bottom: 6px;
  right: 9px;
  color: white;
  opacity: 0.3;
  font-size: 10px;
  z-index: 1;
}
.intro-header .header-img-credit a {
  color: white;
}
@media only screen and (min-width: 768px) {
  .intro-header .header-img-credit {
    font-size: 12px;
    bottom: 10px;
    right: 15px;
  }
}
.post-preview > a {
  color: #404040;
}
.post-preview > a:hover,
.post-preview > a:focus {
  text-decoration: none;
  color: #0085a1;
}
.post-preview > a > .post-title {
  font-size: 21px;
  line-height: 1.3;
  margin-top: 30px;
  margin-bottom: 8px;
}
.post-preview > a > .post-subtitle {
  font-size: 15px;
  line-height: 1.3;
  margin: 0;
  font-weight: 300;
  margin-bottom: 10px;
}
.post-preview > .post-meta {
  font-family: 'Lora', 'Times New Roman', serif;
  color: #a3a3a3;
  font-size: 16px;
  font-style: italic;
  margin-top: 0;
}
.post-preview > .post-meta > a {
  text-decoration: none;
  color: #404040;
}
.post-preview > .post-meta > a:hover,
.post-preview > .post-meta > a:focus {
  color: #0085a1;
  text-decoration: underline;
}
@media only screen and (min-width: 768px) {
  .post-preview > a > .post-title {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 10px;
  }
  .post-preview > a > .post-subtitle {
    font-size: 16px;
  }
  .post-preview .post-meta {
    font-size: 18px;
  }
}
.post-content-preview {
  font-family: "霞鹜文楷", "LXGW WenKai", sans-serif !important;
  font-size: 13px;
  font-style: italic;
  color: #a3a3a3;
}
.post-content-preview:hover {
  color: #0085a1;
}
@media only screen and (min-width: 768px) {
  .post-content-preview {
    font-size: 14px;
  }
}
.section-heading {
  font-size: 36px;
  margin-top: 60px;
  font-weight: 700;
}
.caption {
  text-align: center;
  font-size: 14px;
  padding: 10px;
  font-style: italic;
  margin: 0;
  display: block;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}
footer {
  font-size: 20px;
  padding: 50px 0 65px;
}
footer .list-inline {
  margin: 0;
  padding: 0;
}
footer .copyright {
  font-size: 14px;
  text-align: center;
  margin-bottom: 0;
}
footer .copyright a {
  color: #337ab7;
}
footer .copyright a:hover,
footer .copyright a:focus {
  color: #0085a1;
}
.btn {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 1px;
  border-radius: 0;
  padding: 15px 25px;
}
.btn-lg {
  font-size: 16px;
  padding: 25px 35px;
}
.btn-default:hover,
.btn-default:focus {
  background-color: #0085a1;
  border: 1px solid #0085a1;
  color: white;
}
.pager {
  margin: 20px 0 0 !important;
  padding: 0px !important;
}
.pager li > a,
.pager li > span {
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 10px;
  background-color: white;
  border-radius: 0;
}
@media only screen and (min-width: 768px) {
  .pager li > a,
  .pager li > span {
    font-size: 14px;
    padding: 15px 25px;
  }
}
.pager li > a {
  color: #404040;
}
.pager li > a:hover,
.pager li > a:focus {
  color: white;
  background-color: #0085a1;
  border: 1px solid #0085a1;
}
.pager li > a:hover > span,
.pager li > a:focus > span {
  color: white;
}
.pager .disabled > a,
.pager .disabled > a:hover,
.pager .disabled > a:focus,
.pager .disabled > span {
  color: #a3a3a3;
  background-color: #404040;
  cursor: not-allowed;
}
::-moz-selection {
  color: white;
  text-shadow: none;
  background: #0085a1;
}
::selection {
  color: white;
  text-shadow: none;
  background: #0085a1;
}
img::selection {
  color: white;
  background: transparent;
}
img::-moz-selection {
  color: white;
  background: transparent;
}
/* Hux add tags support */
.d-none {
  display: none !important;
}
.tags {
  margin-bottom: -5px;
}
.tags.tags-sup a,
.tags.tags-sup .tag {
  padding: 0 10px 0 12px;
}
.tags a,
.tags .tag {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 999em;
  padding: 0 10px 0 10px;
  color: #ffffff;
  line-height: 24px;
  font-size: 12px;
  text-decoration: none;
  margin: 0 1px;
  margin-bottom: 6px;
  cursor: pointer;
}
.tags a > sup,
.tags .tag > sup {
  margin-left: -2px;
  font-weight: 700;
}
.tags a:hover,
.tags .tag:hover,
.tags a:active,
.tags .tag:active {
  color: white;
  border-color: white;
  background-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
@media only screen and (min-width: 768px) {
  .tags a,
  .tags .tag {
    margin-right: 5px;
  }
}
#tag-heading {
  padding: 70px 0 60px;
}
@media only screen and (min-width: 768px) {
  #tag-heading {
    padding: 55px 0;
  }
}
#tag_cloud {
  margin: 20px 0 15px 0;
}
#tag_cloud a,
#tag_cloud .tag {
  transition-property: all;
  transition-duration: 0.4s;
  transition-timing-function: ease;
  font-size: 14px;
  border: none;
  line-height: 28px;
  margin: 0 2px;
  margin-bottom: 8px;
  background: #f3f5f5;
}
#tag_cloud a:hover,
#tag_cloud .tag:hover,
#tag_cloud a:active,
#tag_cloud .tag:active,
#tag_cloud a.focus,
#tag_cloud .tag.focus {
  background-color: #0085a1 !important;
}
#tag_cloud a.focus,
#tag_cloud .tag.focus {
  box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 6px, rgba(0, 0, 0, 0.239216) 0 1px 4px;
}
#tag_cloud a.tag-button--all,
#tag_cloud .tag.tag-button--all {
  font-weight: 700;
  color: #0085a1 !important;
}
#tag_cloud a.tag-button--all:hover,
#tag_cloud .tag.tag-button--all:hover,
#tag_cloud a.tag-button--all:active,
#tag_cloud .tag.tag-button--all:active,
#tag_cloud a.tag-button--all.focus,
#tag_cloud .tag.tag-button--all.focus {
  background-color: #e4e4e4 !important;
}
@media only screen and (min-width: 768px) {
  #tag_cloud {
    margin-bottom: 25px;
  }
}
.tag-comments {
  font-size: 12px;
}
@media only screen and (min-width: 768px) {
  .tag-comments {
    font-size: 14px;
  }
}
.t:first-child {
  margin-top: 0px;
}
.listing-seperator {
  color: #0085a1;
  font-size: 21px !important;
}
.listing-seperator::before {
  margin-right: 5px;
}
@media only screen and (min-width: 768px) {
  .listing-seperator {
    font-size: 20px !important;
    line-height: 2 !important;
  }
}
.mini-post-list {
  margin: 20px 0 15px 0;
}
.mini-post-list .tag-text {
  font-weight: 200;
  /* Hux learn from
     *     TypeIsBeautiful,
     *     [This Post](http://zhuanlan.zhihu.com/ibuick/20186806) etc.
     */
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial", "PingFang SC", "Hiragino Sans GB", "STHeiti", "Microsoft YaHei", "Microsoft JhengHei", "Source Han Sans SC", "Noto Sans CJK SC", "Source Han Sans CN", "Noto Sans SC", "Source Han Sans TC", "Noto Sans CJK TC", "WenQuanYi Micro Hei", SimSun, sans-serif;
  line-height: 1.7;
}
.mini-post-list .post-preview {
  position: relative;
}
.mini-post-list .post-preview > a .post-title {
  font-family: "霞鹜文楷", "LXGW WenKai", sans-serif !important;
  font-size: 16px;
  font-weight: 500;
  margin-top: 20px;
}
.mini-post-list .post-preview > a .post-subtitle {
  font-size: 13px;
}
.mini-post-list .post-preview > .post-meta {
  position: absolute;
  right: 5px;
  bottom: 0px;
  margin: 0px;
  font-size: 12px;
  line-height: 12px;
}
@media only screen and (min-width: 768px) {
  .mini-post-list .post-preview {
    margin-left: 20px;
  }
  .mini-post-list .post-preview > a > .post-title {
    font-size: 18px;
    line-height: 1.3;
  }
  .mini-post-list .post-preview > a > .post-subtitle {
    font-size: 14px;
  }
  .mini-post-list .post-preview .post-meta {
    font-size: 18px;
  }
}
/* Tags support End*/
/* Hux make all img responsible in post-container */
.post-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto 1.6em auto;
}
/* Hux Optimize UserExperience */
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
  background-color: inherit;
}
.navbar-default .navbar-toggle:active {
  background-color: rgba(255, 255, 255, 0.25);
}
/* Hux customize Style for navBar button */
.navbar-default .navbar-toggle {
  border-color: transparent;
  padding: 19px 16px;
  margin-top: 2px;
  margin-right: 2px;
  margin-bottom: 2px;
  border-radius: 50%;
}
.navbar-default .navbar-toggle .icon-bar {
  width: 18px;
  border-radius: 0px;
  background-color: white;
}
.navbar-default .navbar-toggle .icon-bar + .icon-bar {
  margin-top: 3px;
}
.page-fullscreen .intro-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.page-fullscreen #tag-heading {
  position: fixed;
  left: 0;
  top: 0;
  padding-bottom: 150px;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
  -webkit-flex-direction: column;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.page-fullscreen footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  padding-bottom: 20px;
  opacity: 0.6;
  color: #fff;
}
.page-fullscreen footer .copyright {
  color: #fff;
}
.page-fullscreen footer .copyright a {
  color: #fff;
}
.page-fullscreen footer .copyright a:hover {
  color: #ddd;
}
.MathJax_SVG_Display {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.no-scroll {
  overflow-y: hidden;
}

/*  ---------------------------------新增 ---------------------------------------*/
/* 侧边大纲整体美化 */
.side-catalog .catalog-body {
    padding-left: 0 !important;
}

/* 统一列表项样式 */
.side-catalog .catalog-body li {
    list-style: none !important;
    margin-bottom: 4px !important; /* 每个标题间留一点空隙 */
}

.side-catalog .catalog-body li a {
    display: block !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;   /* 圆角方框 */
    color: #666 !important;          /* 默认文字颜色较淡 */
    transition: all 0.2s ease-in-out !important;
    font-size: 13px !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    height: auto !important;         /* 允许长标题换行或更好显示 */
}

/* 悬停效果：模仿标签云的反馈 */
.side-catalog .catalog-body li a:hover {
    background-color: rgba(0, 133, 161, 0.1) !important;
    color: #0085a1 !important;
    padding-left: 18px !important;    /* 悬停时有个向右的小位移 */
}

/* 一级标题：最大、不缩进、加粗 */
.side-catalog .catalog-body .h1_nav a {
    margin-left: 0 !important;
    font-size: 15px !important;   /* 字号最大 */
    font-weight: 900 !important;
    color: #333 !important;
}

/* 二级标题：稍小、开始缩进、较粗 */
.side-catalog .catalog-body .h2_nav a {
    margin-left: 20px !important;  /* 二级标题开始缩进 */
    font-size: 13.5px !important;
    font-weight: 700 !important;
}

/* 三级标题：标准字号、进一步缩进 */
.side-catalog .catalog-body .h3_nav a {
    margin-left: 40px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* 四级及以下：最小字号、深缩进、颜色较淡 */
.side-catalog .catalog-body .h4_nav a { margin-left: 60px !important; font-size: 12px !important; color: #888 !important; }
.side-catalog .catalog-body .h5_nav a, 
.side-catalog .catalog-body .h6_nav a { 
    margin-left: 80px !important; 
    font-size: 12px !important; 
    color: #999 !important; 
}

/* 激活状态 (Active)：模仿选中的标签 */
.side-catalog .catalog-body .active a {
    background-color: #0085a1 !important; /* 变成主题实色 */
    color: #ffffff !important;            /* 文字变白 */
    font-weight: bold !important;
    box-shadow: 0 4px 10px rgba(0, 133, 161, 0.2) !important;
}

/* 针对长标题的处理 */
.side-catalog .catalog-body li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- 引导线新增部分 --- */

/* 为容器左侧留出主轴空间 */
.side-catalog .catalog-body {
    border-left: 1px solid #e8e8e8; /* 垂直主轴线 */
    margin-left: 10px !important;
}

/* 所有列表项定位基准 */
.side-catalog .catalog-body li {
    position: relative;
}

/* 绘制水平引导短线 */
/* H2及以上级别的标题左侧显示短横线 */
.side-catalog .catalog-body .h2_nav::after,
.side-catalog .catalog-body .h3_nav::after,
.side-catalog .catalog-body .h4_nav::after,
.side-catalog .catalog-body .h5_nav::after,
.side-catalog .catalog-body .h6_nav::after {
    content: "";
    position: absolute;
    background-color: #e8e8e8;
    height: 1px;
    top: 15px; /* 对齐文字中心 */
}

/* 不同层级短线的长度与位置映射 */
.side-catalog .catalog-body .h2_nav::after { left: 0; width: 12px; }
.side-catalog .catalog-body .h3_nav::after { left: 0; width: 24px; }
.side-catalog .catalog-body .h4_nav::after { left: 0; width: 36px; }
.side-catalog .catalog-body .h5_nav::after,
.side-catalog .catalog-body .h6_nav::after { left: 0; width: 48px; }

/* 激活状态下引导线的颜色同步 */
.side-catalog .catalog-body .active::after {
    background-color: #0085a1 !important;
    height: 2px; /* 激活时线稍微加粗一点点 */
}

/* 移除长标题溢出隐藏限制，否则引导线可能被切断（可选） */
.side-catalog .catalog-body li {
    overflow: visible !important;
}

/* 微信图标悬停显示二维码 */
.wechat-icon {
  position: relative;
  display: inline-block;
}

.wechat-qrcode {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  margin-bottom: 15px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  background: white;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  text-align: center;
  white-space: nowrap;
  z-index: 9999;
  pointer-events: none;  /* 防止鼠标经过二维码时触发事件 */
/* --- 新增/修改以下部分 --- */
	display: flex;          /* 启用Flex布局 */
    flex-direction: column; /* 内容垂直排列 */
    align-items: center;    /* 强制水平居中 */
/* ---------------------- */
}

.wechat-icon:hover .wechat-qrcode {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* 小箭头 */
.wechat-qrcode::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: white;
}

.wechat-qrcode img {
  width: 140px;
  height: auto;
  /*display: block;*/
  margin: 0 auto 8px auto;
  border-radius: 4px;
  /*margin-bottom: 8px;*/
}

.wechat-qrcode p {
  margin: 0;
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* --- 正文全局样式美化 --- */
/* --- 仿 Typora 主题全局属性 --- */
.post-container {
/*
    width: 100%;
    padding: 0 20px; /* 给移动端留点边距 */
 */
    /* 保持 Typora 风格属性 */
    font-size: 18px;
    color: #000000;
    line-height: 1.6;
    text-align: left;
    font-family: "霞鹜文楷", "LXGW WenKai", system-ui, serif;
    word-break: break-word;
}

/* 段落间距 */
.post-container p {
    font-size: 18px;
    padding: 4px 0;
    margin: 0;
    line-height: 26px;
    color: #000000;
}

/* --- 标题系统 --- */
.post-container h1, 
.post-container h2, 
.post-container h3, 
.post-container h4 {
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: black;
    border-bottom: none; /* 清除 Hux 原有样式 */
}

/* 一级标题：蓝色 */
.post-container h1 {
    font-size: 3rem;
	text-align: center;
    color: #0085a1;
}

.post-container h2 {
  font-size: 2rem;
  border-bottom: 2px solid rgb(0, 133, 161);
}
.post-container h2 span {
 display: inline-block;
 font-weight: bold;
 background: rgb(0, 133, 161);
 color: #ffffff;
 padding: 3px 10px 1px;
 border-top-right-radius: 3px;
 border-top-left-radius: 3px;
 margin-right: 3px;
}
.post-container h2:after {
 display: inline-block;
 content: "";
 vertical-align: bottom;
 border-bottom: 36px solid #efebe9;
 border-right: 20px solid transparent;
}

/* --- 引用块 (Blockquote) 仿 Typora 深蓝色系美化 --- */
.post-container blockquote {
    display: block;
    font-size: 0.95em;
    /* 使用标题的深蓝色作为左边框 */
    border-left: 4px solid rgb(0,142,198) !important;
    /* 背景使用极淡的蓝色，形成呼吸感 */
    background: rgba(0, 142, 198, 0.04) !important;
    
    padding: 15px 20px;
    margin: 25px 0;
    border-radius: 0 6px 6px 0; /* 右侧圆角，匹配你之前的标签风格 */
    color: #555;
    position: relative;
}

/* 引用块内部文字样式 */
.post-container blockquote p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.7;
    color: #444 !important;
    font-style: normal; /* 文楷字体本身很有书法感，不再强制斜体 */
}

/* 进阶装饰：在引用块右上角加一个淡色图标（可选） */
.post-container blockquote::after {
    content: "🔗";
    position: absolute;
    top: -10px;
    left: 10px;
    font-size: 40px;
    color: rgba(0, 79, 168, 0.1);
    font-family: serif;
}

/* 链接：橙红加粗底线 */
.post-container a {
    text-decoration: none !important;
    font-weight: bold;
    color: rgb(0,142,198) !important;
    border-bottom: 1px solid rgb(0,142,198) !important;
    transition: all 0.2s;
}
.post-container a:hover {
    opacity: 0.8;
}

/* 行内代码：橙红色调 */
.post-container p code, 
.post-container li code {
    font-size: 1.05em; /* 适当缩小，25px在网页端过大 */
    padding: 2px 4px;
    border-radius: 4px;
    margin: 0 2px;
    color: rgb(0,142,198) !important;
    background-color: rgba(27,31,35,.05) !important;
    font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;
}

/* 图片：居中 */
.post-container img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    border-radius: 4px;
}

/* 列表样式 */
.post-container ul, 
.post-container ol {
    padding-left: 25px;
    margin: 8px 0;
}
.post-container li {
    line-height: 26px;
    font-weight: 500;
}


/* 导航栏整体样式美化 */
#huxblog_navbar .navbar-nav li a {
    font-family: "霞鹜文楷", "LXGW WenKai", sans-serif !important;
    font-size: 16px !important;
    letter-spacing: 1.5px;      /* 增加字间距，显得更优雅 */
    color: #333 !important;     /* 默认深灰 */
    transition: all 0.3s ease;  /* 平滑过渡 */
    padding: 20px 15px;         /* 增加点击区域 */
}

/* 悬停状态：变成 Typora 标题的深蓝色 */
#huxblog_navbar .navbar-nav li a:hover {
    color: rgb(0, 79, 168) !important;
    background-color: rgba(0, 79, 168, 0.05); /* 淡淡的蓝色底色 */
}

/* 搜索图标稍微缩小一点以对齐文字 */
#huxblog_navbar .navbar-nav li.search-icon a i {
    font-size: 14px;
}