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;
}
::-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;
}
@media only screen and (max-width: 767px) {
  .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;
  }
  #huxblog_navbar {
    opacity: 0;
    transform: scaleX(0);
    transform-origin: top right;
    transition: all 200ms cubic-bezier(0.47, 0, 0.4, 0.99) 0ms;
  }
  #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;
  }
  #huxblog_navbar li {
    opacity: 0;
    transition: opacity 100ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #huxblog_navbar.in {
    transform: scaleX(1);
    opacity: 1;
    transition: all 250ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
  }
  #huxblog_navbar.in .navbar-collapse {
    transform: scaleY(1);
    transition: 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;
  }
}
.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 .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;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  .navbar-custom.is-fixed {
    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 {
    -webkit-transform: translate3d(0, 100%, 0);
    -moz-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }
}
.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:focus,
.navbar-default .navbar-toggle:hover {
  background-color: inherit;
}
.navbar-default .navbar-toggle:active {
  background-color: rgba(255, 255, 255, 0.25);
}
.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;
}
.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;
}
.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;
  }
}
.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;
  }
}
.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;
}
.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;
    margin-bottom: 10px;
  }
  .post-preview > a > .post-subtitle {
    font-size: 16px;
  }
  .post-preview .post-meta {
    font-size: 18px;
  }
}
.post-content-preview {
  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;
  }
}
.post-container img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.5em auto 1.6em auto;
}
@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;
  }
}
.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-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;
  }
}
.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;
}
.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: 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;
}
.paper-snackbar {
  transition-property: opacity, bottom, left, right, width, margin, border-radius;
  transition-duration: 0.5s;
  transition-timing-function: ease;
  font-size: 14px;
  min-height: 14px;
  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 {
    min-width: 288px;
    max-width: 568px;
    display: inline-flex;
    border-radius: 2px;
    margin: 24px;
    bottom: -100px;
  }
}
@media (max-width: 640px) {
  .paper-snackbar {
    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;
}
.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;
}
.friend-avatar {
  border-radius: 50%;
  overflow: hidden;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border: 2px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.big-img-handle {
  max-width: 35px;
  max-height: 35px;
  width: auto;
  height: auto;
  object-fit: contain;
  border: 2px solid #ccc;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
  .big-img-handle {
    max-width: 30px;
  }
}
.hover-scale {
  transition: transform 0.3s ease;
}
.hover-scale:hover {
  transform: scale(1.1);
}
.cursor {
  cursor: pointer !important;
}
.line {
  padding-bottom: 5px;
}
.image-link {
  cursor: pointer;
}
.image-link:active {
  opacity: 0.8;
  transition: opacity 0.1s ease;
}
.chat-widget-container {
  /* 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;
  color: #bfbfbf;
  font-size: 14px;
  line-height: 1.7;
}
.chat-widget-container h5 {
  color: #a3a3a3;
  padding-bottom: 1em;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}
.chat-widget {
  width: 100%;
  height: 300px;
  border-radius: 0;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: none;
}
.chat-widget:hover {
  border-color: #eee;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.chat-widget-loaded {
  opacity: 1;
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  border-radius: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.chat-messages::-webkit-scrollbar {
  display: none;
}
.chat-widget:hover .chat-messages {
  border-radius: 8px 8px 0 0;
}
.message {
  margin-bottom: 10px;
  max-width: 85%;
  clear: both;
  word-wrap: break-word;
}
.user-message {
  float: right;
  background: #0085a1;
  color: white;
  padding: 8px 12px;
  border-radius: 12px 12px 0 12px;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.ai-message {
  float: left;
  background: #f5f5f5;
  color: #404040;
  padding: 8px 12px;
  border-radius: 12px 12px 12px 0;
  font-size: 13px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ai-message p {
  margin: 0 0 8px 0;
}
.ai-message p:last-child {
  margin-bottom: 0;
}
.ai-message h1,
.ai-message h2,
.ai-message h3,
.ai-message h4,
.ai-message h5,
.ai-message h6 {
  margin: 8px 0;
  font-weight: 600;
  line-height: 1.25;
}
.ai-message h1 {
  font-size: 16px;
}
.ai-message h2 {
  font-size: 15px;
}
.ai-message h3,
.ai-message h4,
.ai-message h5,
.ai-message h6 {
  font-size: 14px;
}
.ai-message code {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  padding: 2px 4px;
  font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 12px;
}
.ai-message pre {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  padding: 8px;
  overflow-x: auto;
  margin: 8px 0;
}
.ai-message pre code {
  background-color: transparent;
  padding: 0;
  white-space: pre;
}
.ai-message ul,
.ai-message ol {
  margin: 8px 0;
  padding-left: 20px;
}
.ai-message blockquote {
  margin: 8px 0;
  padding-left: 10px;
  border-left: 3px solid #ddd;
  color: #666;
}
.ai-message a {
  color: #0085a1;
  text-decoration: none;
}
.ai-message a:hover {
  text-decoration: underline;
}
.ai-message img {
  max-width: 100%;
  border-radius: 3px;
}
.ai-message table {
  border-collapse: collapse;
  margin: 8px 0;
  font-size: 12px;
}
.ai-message table th,
.ai-message table td {
  border: 1px solid #ddd;
  padding: 4px 8px;
}
.ai-message table th {
  background-color: rgba(0, 0, 0, 0.05);
}
.chat-input {
  padding: 8px 10px;
  border-top: 1px solid transparent;
  display: flex;
  gap: 6px;
  border-radius: 0;
  background-color: transparent;
  transition: all 0.3s ease;
}
.chat-widget:hover .chat-input {
  border-top-color: #eee;
  background-color: #f9f9f9;
  border-radius: 0 0 8px 8px;
}
.chat-input textarea {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 18px;
  resize: none;
  height: 36px;
  font-size: 14px;
  color: #404040;
  font-family: inherit;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset;
}
.chat-input textarea:focus {
  outline: none;
  border-color: #0085a1;
  box-shadow: 0 0 0 2px rgba(0, 133, 161, 0.2);
}
.chat-input button {
  padding: 6px 14px;
  background: #0085a1;
  color: white;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  min-width: 60px;
}
.chat-input button:hover {
  background-color: #006f8a;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.chat-input button:disabled {
  background-color: #a3a3a3;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.typing-effect {
  display: inline-block;
  min-width: 4px;
}
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 14px;
  background: #404040;
  animation: blink 1s infinite;
  vertical-align: middle;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #0085a1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.thinking-dots {
  display: inline-block;
  margin-left: 4px;
}
.thinking-dots::after {
  content: '...';
  animation: thinking 1.5s infinite;
  display: inline-block;
  width: 12px;
  text-align: left;
}
@keyframes thinking {
  0% {
    content: '.';
  }
  33% {
    content: '..';
  }
  66% {
    content: '...';
  }
  100% {
    content: '.';
  }
}
.fade-in {
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}