@charset "UTF-8";
@font-face {
  font-family: "Playball";
  src: url("../fonts/Playball/Playball-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "Satisfy";
  src: url("../fonts/Satisfy/Satisfy-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
h1 {
  font-size: 26px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

h2 {
  font-size: 24px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

h3 {
  font-size: 20px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

h4 {
  font-size: 16px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

h5 {
  font-size: 14px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

h6 {
  font-size: 14px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-size: 100%;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5;
  background: #eaeaea;
  color: #34495e;
  white-space: normal;
  word-wrap: break-word;
}
body a {
  color: #34495e;
}

main {
  position: relative;
  z-index: 8;
  max-width: 960px;
  margin: -160px auto 10px;
}

.page {
  background: #eaeaea;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page > .container {
  flex: 1;
  overflow: hidden;
  margin-bottom: 20px;
  min-height: 96vh;
}

@font-face {
  font-family: "iconfont";
  src: url("//at.alicdn.com/t/font_425542_ayw19yrbb2xfxbt9.eot?t=1511273246658"); /* IE9*/
  src: url("//at.alicdn.com/t/font_425542_ayw19yrbb2xfxbt9.eot?t=1511273246658#iefix") format("embedded-opentype"), url("data:application/x-font-woff;charset=utf-8;base64,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") format("woff"), url("//at.alicdn.com/t/font_425542_ayw19yrbb2xfxbt9.ttf?t=1511273246658") format("truetype"), url("//at.alicdn.com/t/font_425542_ayw19yrbb2xfxbt9.svg?t=1511273246658#iconfont") format("svg"); /* iOS 4.1- */
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-linkedin:before {
  content: "\e724";
}

.icon-back:before {
  content: "\e697";
}

.icon-more:before {
  content: "\e6a7";
}

.icon-about:before {
  content: "\e602";
}

.icon-stackoverflow:before {
  content: "\ec1d";
}

.icon-tags:before {
  content: "\ea1b";
}

.icon-zhihu:before {
  content: "\e6ba";
}

.icon-up:before {
  content: "\e631";
}

.icon-steam:before {
  content: "\e93a";
}

.icon-weibo:before {
  content: "\e6ce";
}

.icon-home:before {
  content: "\e6d9";
}

.icon-calendar:before {
  content: "\e647";
}

.icon-facebook:before {
  content: "\e604";
}

.icon-circle:before {
  content: "\e61a";
}

.icon-archive:before {
  content: "\e619";
}

.icon-pen:before {
  content: "\e61b";
}

.icon-douban:before {
  content: "\e688";
}

.icon-category:before {
  content: "\e625";
}

.icon-tumblr:before {
  content: "\e82d";
}

.icon-turnoff:before {
  content: "\e648";
}

.icon-turnon:before {
  content: "\e649";
}

.icon-rss:before {
  content: "\e7ef";
}

.icon-folder:before {
  content: "\e646";
}

.icon-divide:before {
  content: "\e654";
}

.icon-twitter:before {
  content: "\e606";
}

.icon-github:before {
  content: "\e600";
}

.icon-instagram:before {
  content: "\e641";
}

* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

#mobile-nav .slideout-menu {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  color: #34495e;
  background: #f6f6f6;
  width: 180px;
  display: none;
  padding-top: 100px;
}
#mobile-nav .slideout-menu a {
  text-align: center;
  width: 180px;
  font-size: 18px;
  display: block;
  text-decoration: none;
  margin: 20px 0;
  padding: 5px 0;
}
#mobile-nav .slideout-menu .mobile-intro {
  opacity: 0;
  text-align: center;
  width: 150px;
  font-family: "Satisfy", cursive, LiSu, sans-serif;
  margin: 50px 10px 0;
  font-size: 18px;
}
#mobile-nav .slideout-menu .mobile-intro i {
  font-size: 30px;
}

.slideout-open {
  overflow: hidden;
}
.slideout-open .slideout-panel {
  position: relative;
  z-index: 2;
  will-change: transform;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.slideout-open body,
.slideout-open .slideout-panel {
  overflow: hidden;
}
.slideout-open #mobile-nav .slideout-menu {
  display: block;
}

.fixed-mobile {
  transform: translateX(180px);
}

.mobile-header {
  display: none;
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  background: #34495e;
  box-shadow: 0 2px 10px rgba(52, 73, 94, 0.9);
}
.mobile-header span, .mobile-header a {
  color: #fff;
}
.mobile-header span {
  float: left;
  margin-left: 12px;
  margin-top: 6px;
  cursor: pointer;
  padding: 0 10px;
}
.mobile-header span i {
  font-size: 22px;
}
.mobile-header .mobile-logo {
  opacity: 0;
  text-align: center;
}
.mobile-header .mobile-logo a {
  font-size: 30px;
  text-decoration: none;
  font-family: "Playball", cursive;
  margin-right: 42px;
}
.mobile-header .mobile-logo .mobile-intro-placeholder {
  font-family: "Satisfy", cursive, LiSu, sans-serif;
  opacity: 0;
  height: 0;
}

header.site-nav {
  display: none;
  width: 100%;
  min-height: 40px;
  background: rgba(52, 73, 94, 0.9);
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9;
  border: 1px solid transparent;
}
header.site-nav .nav-content {
  max-width: 960px;
  margin: 0 auto;
}
header.site-nav .logo {
  opacity: 0;
  float: left;
  font-size: 40px;
  font-family: "Playball", cursive;
}
header.site-nav .logo a {
  color: #fff;
}
header.site-nav .logo a::after {
  content: none;
}
header.site-nav a {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s;
  position: relative;
}
header.site-nav a::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  content: "";
  background: #fff;
  height: 2px;
  transition: all 0.3s;
}
header.site-nav a:hover::after {
  left: 0;
  right: 0;
}
header.site-nav .navbar ul {
  padding: 0;
  margin: 0;
  float: right;
  margin: 20px;
}
header.site-nav .navbar ul li {
  display: inline-block;
  list-style: none;
  margin: 0 20px;
  font-size: 18px;
}
header.site-nav .navbar ul li i {
  vertical-align: text-bottom;
}

.banner {
  position: relative;
}
.banner .show {
  position: relative;
  z-index: 2;
  font-size: 65px;
  height: 500px;
  background: #34495e;
  color: #fff;
  text-align: left;
}
.banner .show .banner-title {
  position: absolute;
  width: 100%;
  max-width: 960px;
  padding-left: 16px;
  transform: translateX(-50%);
  left: 50%;
  top: 36%;
  font-family: "Satisfy", cursive, LiSu, sans-serif;
}
.banner .show .banner-title .intro {
  opacity: 0;
}
.banner .show .banner-title .post-title {
  font-size: 36px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
}
.banner .show .banner-title .post-title .post-tags {
  padding: 20px 0 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.banner .show .banner-title .post-title .post-tags a {
  display: inline-block;
  text-decoration: none;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 14px;
  transition: all 0.3s;
}
.banner .show .banner-title .post-title .post-tags a:before {
  content: "#";
  font-size: 16px;
}
.banner .show .banner-title .post-title .post-tags a:hover {
  background: #fff;
  color: #34495e;
}

article#post-excerpt {
  min-height: 0;
}
article#post-excerpt header {
  text-align: center;
}
article#post-excerpt header h1 {
  font-size: 30px;
  margin: 0 auto 10px;
}
article#post-excerpt header a {
  display: inline-block;
  color: #34495e;
  position: relative;
}
article#post-excerpt header a.post-title-link {
  font-weight: bold;
}
article#post-excerpt header a::after {
  position: absolute;
  bottom: 0;
  left: 51%;
  right: 51%;
  content: "";
  background: #34495e;
  height: 2px;
  transition: all 0.3s;
}
article#post-excerpt header a:hover::after {
  left: 0;
  right: 0;
}
article#post-excerpt header a.post-category {
  color: #8a8a8a;
}
article#post-excerpt header a.post-category::after {
  content: none;
}
article#post-excerpt header .post-meta span.post-time {
  color: #8a8a8a;
  font-size: 14px;
  margin-bottom: 30px;
  font-weight: normal;
}
article#post-excerpt header .post-meta .post-visits {
  color: #8a8a8a;
  font-size: 14px;
}
article#post-excerpt .post-tags {
  padding: 10px 5px 0;
  margin: 0;
  border-top: 1px dashed #eaeaea;
}
article#post-excerpt .post-tags a {
  display: inline-block;
  color: #34495e;
  background: #eaeaea;
  border: 1px solid #eee;
  border-radius: 2px;
  padding: 0 10px;
  font-size: 12px;
  transition: all 0.3s;
}
article#post-excerpt .post-tags a:before {
  content: "#";
  font-size: 16px;
}
article#post-excerpt .post-tags a:hover {
  transform: translateY(-5px);
}

article.post {
  border-radius: 2px;
  min-height: 200px;
  margin: 0 auto 30px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
article.post:last-child {
  margin-bottom: 10px;
}
article.post.about {
  padding: 10px 20px 15px;
}
article.post a {
  color: #0099cc;
  position: relative;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s;
}
article.post a:hover {
  color: #f6695f;
}
article.post ul,
article.post ol {
  margin: 0.8em 0;
}
article.post li > ol,
article.post li > ul {
  margin: 0 0;
}
article.post ul,
article.post ol {
  padding-left: 30px;
}
article.post ul:first-child,
article.post ol:first-child {
  margin-top: 0;
}
article.post ul:last-child,
article.post ol:last-child {
  margin-bottom: 0;
}
article.post blockquote {
  font: 14px/22px helvetica, sans-serif;
  border-left: 4px solid #298efa;
  padding: 5px 15px;
  color: #777;
  background-color: rgba(0, 102, 255, 0.1);
  margin: 1em 0;
}
article.post .post-meta .post-time {
  font-size: 20px;
  margin-bottom: 30px;
  font-weight: bold;
}
article.post .post-meta .post-time i {
  font-weight: normal;
}
article.post .post-meta .post-category {
  color: #8a8a8a;
  font-weight: normal;
  font-size: 14px;
}
article.post .post-meta .post-visits {
  display: inline-block;
  color: #8a8a8a;
  font-size: 14px;
}
article.post img {
  box-sizing: border-box;
  max-width: 100%;
  display: block;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
  background: #fff;
  padding: 5px;
}
article.post .post-tags {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 5px 0 10px;
}
article.post .post-tags a {
  display: inline-block;
  text-decoration: none;
  color: #34495e;
  border: 1px solid #34495e;
  border-radius: 2px;
  padding: 0 5px;
  font-size: 12px;
}
article.post .post-tags a:before {
  content: "#";
  font-size: 16px;
}
article.post .post-footer {
  margin-top: 40px;
  text-align: center;
  font-family: "Satisfy", cursive, LiSu, sans-serif;
  color: #8a8a8a;
}
article.post .post-footer:after {
  content: "";
  display: inline-block;
  margin-left: 15px;
  width: 30%;
  border: 1px solid transparent;
  border-top-color: #8d8c8c;
}
article.post .post-footer:before {
  content: "";
  display: inline-block;
  margin-right: 15px;
  width: 30%;
  border: 1px solid transparent;
  border-top-color: #8d8c8c;
}
article.post #read-more {
  padding: 10px 0 20px;
  text-align: center;
}
article.post #read-more a {
  font-weight: normal;
  color: #34495e;
  padding: 5px 20px;
  border: 1px solid #34495e;
  border-radius: 2px;
  transition: all 0.3s;
}
article.post #read-more a:hover {
  background: #34495e;
  border-color: #34495e;
  color: #fff;
}

.post-toc {
  position: absolute;
  width: 200px;
  z-index: -1;
  top: 0;
  margin-left: 960px;
  padding: 10px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  word-wrap: break-word;
  box-sizing: border-box;
}
.post-toc .post-toc-title {
  margin: 0 10px;
  font-size: 20px;
  font-weight: normal;
  text-transform: uppercase;
}
.post-toc .post-toc-content {
  font-size: 14px;
}
.post-toc .post-toc-content .toc, .post-toc .post-toc-content .toc-item {
  list-style: none;
}
.post-toc .post-toc-content .toc {
  margin: 10px 0;
  padding-left: 20px;
}
.post-toc .post-toc-content .toc .toc-child {
  padding-left: 15px;
}
.post-toc .post-toc-content span {
  font-weight: normal;
}
.post-toc .post-toc-content .toc-link.active {
  color: #34495e;
}

code, pre {
  padding: 7px;
  font-size: 13px;
  font-family: Consolas, Monaco, Menlo, Consolas, monospace;
  background: #e8e8e8;
}

code {
  padding: 3px 5px;
  border-radius: 4px;
  color: #444;
  white-space: normal;
  word-break: break-all;
}

.highlight {
  margin: 1em 0;
  border-radius: 5px 5px 0 0;
  overflow-x: auto;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.125);
  position: relative;
}
.highlight table {
  position: relative;
}
.highlight table::after {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 2px 7px;
  font-size: 13px;
  font-weight: bold;
  color: #979797;
  background: #d9d9d9;
  content: "Code";
}
.highlight.html > table::after {
  content: "HTML";
}
.highlight.html > figcaption > span::after {
  content: " · HTML";
}
.highlight.html figcaption + table::after {
  display: none;
}
.highlight.js > table::after {
  content: "JavaScript";
}
.highlight.js > figcaption > span::after {
  content: " · JavaScript";
}
.highlight.js figcaption + table::after {
  display: none;
}
.highlight.bash > table::after {
  content: "Bash";
}
.highlight.bash > figcaption > span::after {
  content: " · Bash";
}
.highlight.bash figcaption + table::after {
  display: none;
}
.highlight.css > table::after {
  content: "CSS";
}
.highlight.css > figcaption > span::after {
  content: " · CSS";
}
.highlight.css figcaption + table::after {
  display: none;
}
.highlight.scss > table::after {
  content: "Scss";
}
.highlight.scss > figcaption > span::after {
  content: " · Scss";
}
.highlight.scss figcaption + table::after {
  display: none;
}
.highlight.java > table::after {
  content: "Java";
}
.highlight.java > figcaption > span::after {
  content: " · Java";
}
.highlight.java figcaption + table::after {
  display: none;
}
.highlight.xml > table::after {
  content: "XML";
}
.highlight.xml > figcaption > span::after {
  content: " · XML";
}
.highlight.xml figcaption + table::after {
  display: none;
}
.highlight.python > table::after {
  content: "Python";
}
.highlight.python > figcaption > span::after {
  content: " · Python";
}
.highlight.python figcaption + table::after {
  display: none;
}
.highlight.json > table::after {
  content: "JSON";
}
.highlight.json > figcaption > span::after {
  content: " · JSON";
}
.highlight.json figcaption + table::after {
  display: none;
}
.highlight.swift > table::after {
  content: "Swift";
}
.highlight.swift > figcaption > span::after {
  content: " · Swift";
}
.highlight.swift figcaption + table::after {
  display: none;
}
.highlight.ruby > table::after {
  content: "Ruby";
}
.highlight.ruby > figcaption > span::after {
  content: " · Ruby";
}
.highlight.ruby figcaption + table::after {
  display: none;
}
.highlight.php > table::after {
  content: "PHP";
}
.highlight.php > figcaption > span::after {
  content: " · PHP";
}
.highlight.php figcaption + table::after {
  display: none;
}
.highlight.c > table::after {
  content: "C";
}
.highlight.c > figcaption > span::after {
  content: " · C";
}
.highlight.c figcaption + table::after {
  display: none;
}
.highlight.cpp > table::after {
  content: "C++";
}
.highlight.cpp > figcaption > span::after {
  content: " · C++";
}
.highlight.cpp figcaption + table::after {
  display: none;
}
.highlight.scheme > table::after {
  content: "Scheme";
}
.highlight.scheme > figcaption > span::after {
  content: " · Scheme";
}
.highlight.scheme figcaption + table::after {
  display: none;
}
.highlight.objectivec > table::after {
  content: "Objective-C";
}
.highlight.objectivec > figcaption > span::after {
  content: " · Objective-C";
}
.highlight.objectivec figcaption + table::after {
  display: none;
}
.highlight.yml > table::after {
  content: "YAML";
}
.highlight.yml > figcaption > span::after {
  content: " · YAML";
}
.highlight.yml figcaption + table::after {
  display: none;
}
.highlight.stylus > table::after {
  content: "Stylus";
}
.highlight.stylus > figcaption > span::after {
  content: " · Stylus";
}
.highlight.stylus figcaption + table::after {
  display: none;
}
.highlight.sql > table::after {
  content: "SQL";
}
.highlight.sql > figcaption > span::after {
  content: " · SQL";
}
.highlight.sql figcaption + table::after {
  display: none;
}
.highlight.http > table::after {
  content: "HTTP";
}
.highlight.http > figcaption > span::after {
  content: " · HTTP";
}
.highlight.http figcaption + table::after {
  display: none;
}
.highlight.go > table::after {
  content: "Go";
}
.highlight.go > figcaption > span::after {
  content: " · Go";
}
.highlight.go figcaption + table::after {
  display: none;
}
.highlight figcaption {
  position: absolute;
  top: 0;
  width: 100%;
  padding: 2px 7px;
  font-size: 13px;
  font-weight: bold;
  color: #b1b1b1;
  background: #e0e0e0;
  z-index: 20;
  overflow-x: hidden;
  box-sizing: border-box;
}
.highlight figcaption > a {
  position: absolute;
  right: 0;
  display: inline-box;
  margin-right: 7px;
  font-weight: 400;
}
.highlight figcaption > a:hover {
  text-decoration: none;
  border: 0;
}
.highlight .code pre {
  margin: 0;
  padding: 30px 10px 10px;
}
.highlight .gutter {
  width: 10px;
  color: #cacaca;
}
.highlight .gutter pre {
  margin: 0;
  padding: 30px 7px 10px;
}
.highlight .line {
  height: 20px;
}
.highlight table, .highlight tr, .highlight td {
  margin: 0;
  padding: 0;
  width: 100%;
  border-collapse: collapse;
}
.highlight .code .comment,
.highlight .code .quote {
  color: #93a1a1;
}
.highlight .code .keyword,
.highlight .code .selector-tag,
.highlight .code .addition {
  color: #859900;
}
.highlight .code .number,
.highlight .code .string,
.highlight .code .meta .meta-string,
.highlight .code .literal,
.highlight .code .doctag,
.highlight .code .regexp {
  color: #2aa198;
}
.highlight .code .title,
.highlight .code .section,
.highlight .code .name,
.highlight .code .selector-id,
.highlight .code .selector-class {
  color: #268bd2;
}
.highlight .code .attribute,
.highlight .code .attr,
.highlight .code .variable,
.highlight .code .template-variable,
.highlight .code .class .title,
.highlight .code .type {
  color: #b58900;
}
.highlight .code .symbol,
.highlight .code .bullet,
.highlight .code .subst,
.highlight .code .meta,
.highlight .code .meta .keyword,
.highlight .code .selector-attr,
.highlight .code .selector-pseudo,
.highlight .code .link {
  color: #cb4b16;
}
.highlight .code .built_in,
.highlight .code .deletion {
  color: #dc322f;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-weight: bold;
}
.pagination .truncate-text {
  display: inline-block;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pagination i {
  font-size: 24px;
  vertical-align: sub;
}
.pagination a {
  display: block;
  width: 50%;
  text-decoration: none;
}
.pagination a:last-child {
  text-align: right;
}
.pagination .next,
.pagination .prev {
  transition: transform 0.3s;
}
.pagination .next:hover,
.pagination .prev:hover {
  transform: translateX(5px);
}
.pagination .next-post,
.pagination .prev-post {
  display: flex;
  align-items: center;
  color: #0099cc;
  font-size: 16px;
  transition: all 0.3s;
}
.pagination .next-post:hover,
.pagination .prev-post:hover {
  color: #f6695f;
  transform: translateX(5px);
}
.pagination .pre:hover,
.pagination .prev-post:hover {
  transform: translateX(-5px);
}

#valine_comments {
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 10px 20px 20px;
  margin: 20px 0;
}
#valine_comments .v_name {
  font-weight: bold;
}
#valine_comments .vwrap {
  padding: 0 10px 10px;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#valine_comments input {
  border-bottom-width: 2px;
  border-color: #0099cc;
  text-align: center;
}
#valine_comments input:focus {
  border-color: #f6695f;
}
#valine_comments .veditor {
  height: 8rem;
}
#valine_comments textarea {
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid transparent;
  border-radius: 2px;
}
#valine_comments textarea:focus {
  border-color: #2188ff;
  box-shadow: 0 0 0 0.2em rgba(3, 102, 214, 0.3), inset 0 1px 2px rgba(27, 31, 35, 0.075);
}
#valine_comments button.vsubmit.vbtn {
  font-weight: bold;
  border-radius: 3px;
  background: #33b1ff;
  color: #fff;
  border-color: #33b1ff;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.1s;
}
#valine_comments button.vsubmit.vbtn:hover {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
}

#giscus_thread .title {
  text-align: center;
}

#disqus_thread {
  margin-bottom: 30px;
}

footer {
  height: 170px;
  background: #34495e;
  text-align: center;
  color: #fff;
  font-size: 16px;
}
footer .social-links a i {
  display: inline-block;
  margin: 10px;
  color: #fff;
  font-size: 30px;
  transition: color 0.3s;
}
footer .social-links a i:hover {
  color: #f6695f;
}
footer .quote p {
  margin: 0 20px;
}
footer .quote p:before {
  content: "“";
  font-size: 45px;
  font-family: "黑体";
  display: inline-block;
  color: #ff665f;
  margin-top: -45px;
}
footer .copyright {
  font-size: 12px;
  color: #aaa;
  margin: 0;
}
footer .copyright p {
  margin: 10px 0 0;
}
footer .copyright a {
  color: #0099cc;
  text-decoration: none;
}
footer .copyright a:hover {
  text-decoration: underline;
}

.back-to-top {
  text-align: center;
  display: none;
  position: fixed;
  right: 80px;
  bottom: 40px;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-out;
  z-index: 10;
  cursor: pointer;
}
.back-to-top:hover {
  transform: translateY(-5px);
}
.back-to-top i {
  display: inline-block;
  margin-top: -6px;
  font-size: 35px;
}

.archives-container {
  min-height: 300px;
  padding: 20px;
  margin-bottom: 10px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
}
.archives-container .tag-title {
  font-weight: normal;
  font-size: 24px;
  margin: 0 0 20px;
}
.archives-container .tag-title i {
  color: #f6695f;
}
.archives-container .archives-wrapper {
  padding-left: 10px;
}
.archives-container .archive-year {
  line-height: 1;
  font-size: 26px;
  margin: 15px 0;
  color: #34495e;
}
.archives-container .archive-article {
  display: block;
  text-decoration: none;
  padding: 10px;
  transition: all 0.3s;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.archives-container .archive-article .archive-meta {
  color: #8a8a8a;
}
.archives-container .archive-article .archive-title {
  color: #34495e;
  font-size: 18px;
  padding-left: 20px;
}
.archives-container .archive-article:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px #eaeaea;
  border-color: #f6695f;
}
.archives-container .archive-article:hover .archive-title {
  color: #f6695f;
}

.tags-container {
  font-size: 24px;
  min-height: 300px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  border-radius: 2px;
}
.tags-container .tags-title {
  padding-left: 20px;
  border-left: 2px solid #f6695f;
}
.tags-container .tags-content {
  flex: 1;
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
.tags-container .tags-detail {
  width: 90%;
  text-align: center;
}
.tags-container .tags-detail a {
  text-decoration: none;
  margin: 5px;
  transition: color 0.3s;
}
.tags-container .tags-detail a:hover {
  color: #f6695f;
}

.category-container .category-meta {
  font-size: 24px;
  padding-left: 20px;
  border-left: 2px solid #f6695f;
}
.category-container ul {
  border-left: 2px dashed #f6695f;
  margin-left: 40px;
  padding-left: 20px;
}
.category-container ul li {
  font-size: 18px;
  list-style: none;
}
.category-container ul li a.category-item {
  display: inline-block;
  text-decoration: none;
  margin: 5px 0;
  transition: color 0.3s;
}
.category-container ul li a.category-item i {
  font-size: 26px;
}
.category-container ul li a.category-item:hover {
  color: #f6695f;
}
.category-container a.category-item span {
  font-size: 16px;
  color: #8a8a8a;
}
.category-container .category-item-name {
  font-size: 18px;
  margin: 0 0 20px;
  font-weight: normal;
  line-height: 1;
  padding-left: 20px;
  color: #9d9d9d;
}
.category-container .category-item-name i {
  font-size: 26px;
}
.category-container .category-item a {
  display: block;
  text-decoration: none;
  padding: 10px;
  transition: all 0.3s;
  border-right: 3px solid transparent;
  border-left: 3px solid transparent;
  cursor: pointer;
}
.category-container .category-item a time {
  font-size: 16px;
  color: #8a8a8a;
}
.category-container .category-item a .category-title {
  color: #34495e;
  font-size: 20px;
  padding-left: 20px;
}
.category-container .category-item a:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 10px #eaeaea;
  border-color: #f6695f;
}
.category-container .category-item a:hover .category-title {
  color: #f6695f;
}

/*=====responsive======*/
@media only screen and (min-width: 800px) {
  header.site-nav {
    display: block;
  }
  .post .mobile-post-title {
    display: none;
  }
}
@media only screen and (max-width: 1440px) {
  .post-toc {
    display: none;
  }
}
@media only screen and (max-width: 800px) {
  html,
  body {
    height: auto;
  }
  .mobile-header {
    display: block;
  }
  header.site-nav {
    display: none;
  }
  .banner .show {
    display: none;
  }
  main {
    margin: 60px 16px 10px;
  }
  .page > .container {
    min-height: auto;
  }
  .post .mobile-post-tilte {
    display: block;
  }
  .back-to-top {
    right: 20px;
    bottom: 50px;
  }
  article#post-excerpt header h1 {
    font-size: 24px;
    margin: 0;
  }
  article#post-excerpt header .post-meta {
    margin-bottom: 0;
  }
  article#post-excerpt .post-tags a {
    padding: 0 5px;
  }
  article.post {
    padding: 15px 10px;
  }
  article.post .mobile-post-title > h1 {
    border-left: 3px solid #34495e;
    margin: -15px 0 0 -10px;
    padding: 12px 0 12px 10px;
  }
  article.post.about .mobile-post-title > h1 {
    margin: -10px 0 0 -20px;
  }
  article.post .post-meta .post-time {
    font-size: 14px;
    margin-bottom: 0;
    font-weight: normal;
    color: #8a8a8a;
  }
  article.post .post-meta .post-time i {
    font-weight: normal;
  }
  article.post #read-more a {
    font-size: 14px;
  }
  article.post h1 {
    font-size: 24px;
  }
  article.post h2 {
    font-size: 18px;
  }
  article.post h3 {
    font-size: 16px;
  }
  article.post h4 {
    font-size: 15px;
  }
  article.post h5 {
    font-size: 15px;
  }
  article.post h6 {
    font-size: 14px;
  }
  .tags-container {
    min-height: 66dvh;
  }
  .archives-container {
    padding: 15px;
    min-height: 66dvh;
  }
  .archives-container .tag-title {
    margin: 0;
  }
  .archives-container .archive-year {
    margin: 10px 0;
  }
  .archives-container .archive-article {
    padding: 5px;
  }
  .archives-container .archive-article .archive-title {
    font-size: 16px;
    padding-left: 10px;
  }
  .archives-container .archive-article .archive-meta {
    font-size: 12px;
  }
  .category-container {
    padding: 30px 20px;
  }
  .category-container ul {
    margin-left: 20px;
  }
  .category-container ul li a.category-item {
    font-size: 16px;
  }
  .category-container ul li a.category-item i {
    font-size: 22px;
  }
  .category-container a.category-item span {
    font-size: 14px;
  }
  .category-container .category-item a {
    padding: 5px;
  }
  .category-container .category-item a .category-title {
    font-size: 16px;
  }
  .category-container .category-item a time {
    font-size: 12px;
  }
  .category-container .category-item-name {
    border-left: 2px solid #f6695f;
  }
  footer .social-links a i {
    margin: 0 10px;
  }
  footer .quote {
    font-size: 14px;
  }
  footer .quote p:before {
    font-size: 35px;
    margin-top: -35px;
  }
  footer .copyright {
    font-size: 12px;
    margin-top: 10px;
  }
  footer .copyright p {
    margin: 0;
  }
}
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 14px;
  margin: 0 0 20px;
  width: 100%;
}

tbody tr:nth-of-type(even) {
  background: #fafafa;
}
tbody tr:hover {
  background: #f5f5f5;
}

caption, th, td {
  padding: 8px;
}

th, td {
  border: 1px solid #dfe2e5;
}

th {
  background: #f2f2f2;
  font-weight: 700;
  padding-bottom: 10px;
}

td {
  border-bottom-width: 1px;
}