@font-face {
  font-family: 'cathsgbr';
  src: url("../../fonts/cathsgbr.eot");
  src: url("../../fonts/cathsgbr.eot?#iefix") format("embedded-opentype"), url("../../fonts/cathsgbr.woff") format("woff"), url("../../fonts/cathsgbr.ttf") format("truetype"), url("../../fonts/cathsgbr.svg#cathsgbr") format("svg");
  font-weight: lighter;
  font-style: normal; }

@font-face {
  font-family: 'iconfont';
  src: url("//at.alicdn.com/t/font_1473170564_3825922.eot");
  /* IE9*/
  src: url("//at.alicdn.com/t/font_1473170564_3825922.eot?#iefix") format("embedded-opentype"), url("//at.alicdn.com/t/font_1473170564_3825922.woff") format("woff"), url("//at.alicdn.com/t/font_1473170564_3825922.ttf") format("truetype"), url("//at.alicdn.com/t/font_1473170564_3825922.svg#iconfont") format("svg");
  /* iOS 4.1- */ }

.iconfont {
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale; }

* {
  margin: 0;
  padding: 0;
  transition-duration: 0.5s; }

a {
  cursor: auto;
  text-decoration: none;
  color: rgba(0, 0, 0, 0.82); }

ul {
  list-style-type: none; }

body {
  margin: 0 auto;
  display: flex;
  flex-flow: column;
  min-height: 100vh; }

del {
  color: #FC5185; }

.main {
  flex: 1; }

::selection {
  background: #FC5185;
  color: #fff; }

::-webkit-scrollbar {
  width: 8px;
  height: 4px; }

::-webkit-scrollbar-thumb {
  background: #FC5185;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0; }

::-webkit-scrollbar-track {
  background: rgba(211, 211, 211, 0.18);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -ms-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); }

.article-main .article-title {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden; }
  .article-main .article-title:before {
    content: '';
    position: absolute;
    z-index: -1;
    height: 2px;
    bottom: 0;
    left: 50%;
    right: 50%;
    background: #FC5185;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: right,left;
    transition-property: right,left;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out; }
  .article-main .article-title:active:before, .article-main .article-title:focus:before, .article-main .article-title:hover:before {
    right: 0;
    left: 0; }

#heart {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  backface-visibility: hidden;
  box-shadow: 0 0 1px transparent;
  -webkit-animation-name: hvr-pulse;
  animation-name: hvr-pulse;
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate; }

@keyframes hvr-pulse {
  to {
    transform: scale(1.1); } }

pre, .highlight {
  overflow: auto;
  line-height: 1.6;
  font-size: 14px;
  background-color: #f7f7f7;
  text-align: justify;
  display: block; }

pre {
  font-family: Inconsolata, Menlo, Monaco, Consolas, "Courier New", monospace;
  padding: 0;
  color: #4d4d4c;
  text-shadow: none; }

blockquote {
  border-left: 5px solid #FC5185;
  background: rgba(182, 173, 173, 0.14);
  padding: 1%;
  margin: 2% 0;
  font-size: 100%; }

.highlight pre {
  border: none;
  margin: 0;
  padding: 1px; }

.highlight table {
  margin: 0;
  width: auto;
  border: none; }

.highlight td {
  border: none;
  padding: 1px; }

.highlight figcaption {
  font-size: 0.85em;
  color: #8e908c;
  line-height: 1em;
  margin-bottom: 1em; }
  .highlight figcaption a {
    float: right; }

.highlight .gutter pre {
  text-align: right;
  padding-left: 20px; }

pre .line .selector-tag {
  color: #4a30ee; }

pre .line .selector-class {
  color: #4f397c; }

pre .line .selector-pseudo {
  color: #e06842; }

pre .line .attribute {
  color: #a2852f; }

pre .line .title {
  font-family: Inconsolata, Menlo, Monaco, Consolas, "Courier New", monospace; }

pre .comment {
  color: #8e908c; }

pre .attribute,
pre .constant,
pre .css .class .css,
pre .css .id,
pre .doctype,
pre .html,
pre .pi,
pre .pseudo,
pre .regexp,
pre .ruby,
pre .tag,
pre .tag,
pre .title,
pre .variable,
pre .xml {
  color: #c82829; }

pre .built_in,
pre .command,
pre .constant,
pre .literal,
pre .number,
pre .params,
pre .preprocessor {
  color: #f5871f; }

pre,
pre .attribute,
pre .cdata,
pre .class,
pre .css,
pre .header,
pre .inheritance,
pre .number .formula,
pre .ruby,
pre .rules,
pre .special,
pre .string,
pre .symbol,
pre .title,
pre .value {
  color: #718c00; }

pre .css,
pre .hexcolor,
pre .title {
  color: #3e999f; }

pre .coffeescript,
pre .decorator,
pre .function,
pre .javascript,
pre .keyword,
pre .perl,
pre .python,
pre .ruby,
pre .sub,
pre .title {
  color: #4271ae; }

pre .function,
pre .javascript,
pre .keyword {
  color: #8959a8; }

@media screen and (max-width: 768px) {
  .main {
    padding: 2em 1.4em 0; }
    .main .blog-main {
      width: 95%;
      padding: 0; }
      .main .blog-main .older-posts-link a {
        font-size: 18px; }
    .main .article-main .article-entry p {
      font-size: 14px;
      line-height: 23.5px; }
    .main .article-main .article-entry h1 {
      font-size: 14px; }
    .main .article-main .article-entry h2 {
      font-size: 14px; }
    .main .article-main .article-entry h3 {
      font-size: 14px; }
    .main .article-main .article-entry h4 {
      font-size: 14px; }
    .main .article-main .article-entry h5 {
      font-size: 14px; }
    .main .article-main .article-entry h6 {
      font-size: 14px; }
    .main .article-main .article-nav-title {
      font-size: 14px; }
    .main .title {
      margin-top: 10%; }
    .main .nav-header {
      display: none; }
    .main #mobile-bar {
      display: block; }
    .main .about-main {
      display: block; }
      .main .about-main .about-body .about-header p {
        line-height: 30px; }
      .main .about-main .about-photo {
        margin-bottom: 4%; }
        .main .about-main .about-photo img {
          width: 100%; }
    .main .archives-main {
      padding: 0 2%;
      display: block; }
      .main .archives-main .archives-photo img {
        width: 98%;
        margin: 0 auto; }
      .main .archives-main .archives-entry a {
        font-size: 14px; }
    .main .sidebar {
      z-index: 100;
      position: fixed;
      background-color: #fff;
      width: 100%;
      height: 132px;
      top: 40px;
      left: 0;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
      box-sizing: border-box;
      transition: all 0.4s cubic-bezier(0.4, 0, 0, 1);
      -webkit-transform: translate(0, -200px);
      transform: translate(0, -200px); }
      .main .sidebar .main-menu {
        display: block; }
    .main .open {
      -webkit-transform: translate(0, 0);
      transform: translate(0, 0); }
    .main .tags-photo img {
      width: 95%; }
  #heart {
    display: none; } }

.title {
  text-align: center;
  margin-top: 2%;
  font-weight: 500;
  font-family: cathsgbr;
  color: #FC5185; }

#heart {
  position: fixed;
  width: 20px;
  height: 10px;
  right: 20px;
  bottom: 20px;
  cursor: pointer;
  z-index: 2; }
  #heart:after, #heart:before {
    position: absolute;
    content: "";
    left: 15px;
    top: 0;
    width: 15px;
    height: 20px;
    background: #FC5185;
    -moz-border-radius: 50px 50px 0 0;
    border-radius: 50px 50px 0 0;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transform-origin: 0 100%;
    -moz-transform-origin: 0 100%;
    -ms-transform-origin: 0 100%;
    -o-transform-origin: 0 100%;
    transform-origin: 0 100%; }
  #heart:after {
    left: 0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 100% 100%;
    -moz-transform-origin: 100% 100%;
    -ms-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    transform-origin: 100% 100%; }

#article-nav {
  margin: 80px 0 30px 0;
  padding: 10px; }
  #article-nav:hover {
    color: #5d5d5d; }
  #article-nav #article-nav-newer {
    float: right; }
  #article-nav #article-nav-older {
    float: left; }
  #article-nav .article-nav-title {
    color: #FC5185;
    height: 29px;
    padding: 5px;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
    font-weight: bold; }

.article-meta {
  text-align: left; }
  .article-meta a {
    color: rgba(0, 0, 0, 0.5);
    font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif; }

.older-posts-link {
  margin: 2em 1% 1%; }
  .older-posts-link .page-number {
    display: none; }
  .older-posts-link .prev {
    float: left; }
  .older-posts-link .next {
    float: right; }
  .older-posts-link a {
    color: #FC5185;
    font-family: cathsgbr;
    font-size: 1.44em;
    font-weight: 800; }
    .older-posts-link a:hover {
      color: #5d5d5d; }

.sidebar {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 10;
  width: 250px;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0 2.5em; }
  .sidebar .main-menu {
    display: none;
    font-family: Monda, "PingFang SC", "Microsoft YaHei", sans-serif; }
    .sidebar .main-menu .main-menu-item {
      text-align: left;
      margin: 6px 0 4px; }
      .sidebar .main-menu .main-menu-item a {
        color: #FC5185;
        font-family: cathsgbr; }

#mobile-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2.5em;
  background-color: #fff;
  z-index: 9;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); }
  #mobile-bar .menu-button {
    position: absolute;
    width: 1.5em;
    height: 1.5em;
    top: 8px;
    left: 12px;
    background: url("../images/menu.png") center center no-repeat;
    background-size: 1.5em; }
  #mobile-bar .logo {
    position: absolute;
    width: 30px;
    height: 30px;
    line-height: 30px;
    top: 5px;
    left: 50%;
    margin-left: -15px;
    background-size: 30px;
    font-family: cathsgbr;
    color: #FC5185; }

.nav-header {
  position: relative;
  z-index: 12;
  padding: 1.56em 3.75em;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.25); }
  .nav-header .logo-link {
    line-height: 1;
    display: inline-block;
    cursor: pointer;
    font-family: cathsgbr;
    font-size: 300%;
    color: #FC5185; }

.nav {
  position: absolute;
  right: 60px;
  top: 20px;
  line-height: 3; }
  .nav .nav-list-item {
    display: inline-block;
    text-transform: capitalize;
    position: relative;
    margin: 0 0.6em; }
    .nav .nav-list-item a {
      font-family: "Athelas, STHeiti, Microsoft Yahei, serif";
      cursor: pointer;
      color: #FC5185;
      font-size: 112.5%; }
      .nav .nav-list-item a:hover {
        text-shadow: 0 0 0.1em #FC5185, 0 0 0.3em #FC5185; }

.sidebar {
  position: absolute;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 10;
  width: 250px;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0 2.5em; }
  .sidebar .main-menu {
    display: none;
    font-family: Monda, "PingFang SC", "Microsoft YaHei", sans-serif; }
    .sidebar .main-menu .main-menu-item {
      text-align: left;
      margin: 6px 0 4px; }
      .sidebar .main-menu .main-menu-item a {
        color: #FC5185;
        font-family: cathsgbr; }

.blog-main {
  margin: 0 auto;
  max-width: 600px; }

.article-main {
  overflow: hidden;
  padding: 1em 0 2em;
  border-bottom: 1px solid #ddd;
  max-width: 600px;
  margin: 0 auto; }
  .article-main .article-header {
    text-align: left;
    margin: 0.8em 0; }
    .article-main .article-header a {
      color: #364F6B; }
  .article-main .article-title {
    font-size: 20px; }
  .article-main .article-date .article-meta {
    text-align: left; }
    .article-main .article-date .article-meta a {
      color: rgba(0, 0, 0, 0.5);
      font-family: Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, Microsoft Yahei, sans-serif; }
  .article-main .article-inner {
    text-align: center; }
    .article-main .article-inner .article-more-link {
      margin: 2% 0;
      float: left; }
      .article-main .article-inner .article-more-link a {
        font-size: 100%;
        color: #3FC1C9;
        font-weight: 800; }
        .article-main .article-inner .article-more-link a:hover {
          color: #5d5d5d; }
  .article-main .article-entry h1, .article-main .article-entry h2, .article-main .article-entry h3, .article-main .article-entry h4, .article-main .article-entry h5, .article-main .article-entry h6 {
    text-align: left;
    margin: 10px 0;
    color: #969b9f;
    font-size: 100%;
    font-family: "Lucida Grande", Lucida Sans Unicode, Hiragino Sans GB, WenQuanYi Micro Hei, Verdana, Aril, sans-serif; }
    .article-main .article-entry h1:before, .article-main .article-entry h2:before, .article-main .article-entry h3:before, .article-main .article-entry h4:before, .article-main .article-entry h5:before, .article-main .article-entry h6:before {
      content: '#';
      color: #FC5185; }
  .article-main .article-entry p {
    margin: 2% 0; }
    .article-main .article-entry p img {
      max-width: 100%; }
  .article-main .article-entry p,
  .article-main .article-entry ul {
    text-align: justify;
    text-justify: distribute;
    display: block;
    word-wrap: break-word;
    font-family: Monda, "PingFang SC", "Microsoft YaHei", sans-serif;
    font-size: 95%;
    color: #364F6B;
    line-height: 1.8;
    letter-spacing: 0.12px; }
    .article-main .article-entry p a,
    .article-main .article-entry ul a {
      color: #FC5185; }
  .article-main .older-posts-link .older-posts-link {
    margin: 2em 1% 1%; }
    .article-main .older-posts-link .older-posts-link .page-number {
      display: none; }
    .article-main .older-posts-link .older-posts-link .prev {
      float: left; }
    .article-main .older-posts-link .older-posts-link .next {
      float: right; }
    .article-main .older-posts-link .older-posts-link a {
      color: #FC5185;
      font-family: cathsgbr;
      font-size: 1.44em;
      font-weight: 800; }
      .article-main .older-posts-link .older-posts-link a:hover {
        color: #5d5d5d; }

.about-main {
  margin: 0 auto;
  padding: 3.5%;
  display: flex;
  justify-content: center;
  font-family: Monda, "PingFang SC", "Microsoft YaHei", sans-serif; }
  .about-main .about-body {
    display: flex;
    flex-direction: column; }
    .about-main .about-body .about-title {
      color: #FC5185;
      font-family: cathsgbr;
      font-size: 175%;
      line-height: 1; }
      .about-main .about-body .about-title:hover {
        color: #5d5d5d; }
    .about-main .about-body .about-header {
      flex: 1; }
      .about-main .about-body .about-header p {
        height: 80px;
        line-height: 80px; }
    .about-main .about-body .about-show {
      flex: 2; }
      .about-main .about-body .about-show .about-list li {
        color: #FC5185;
        padding: 3% 0; }
        .about-main .about-body .about-show .about-list li a:hover {
          color: #FC5185; }
      .about-main .about-body .about-show .about-talent {
        margin-top: 15%; }
        .about-main .about-body .about-show .about-talent ul {
          display: flex; }
          .about-main .about-body .about-show .about-talent ul li {
            flex: 1; }
  .about-main .about-photo img {
    width: 90%;
    margin: 0 auto; }

.tags-main {
  position: relative;
  z-index: 99;
  margin: 0 auto;
  padding: 2.5%;
  overflow: hidden;
  text-align: center; }
  .tags-main a {
    margin: 0 1%;
    font-size: 112.5%;
    font-family: "Segoe UI", "Lucida Grande", Helvetica, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
    color: #5d5d5d; }
    .tags-main a:hover {
      color: #FC5185; }
  .tags-main sup {
    display: none; }

.tags-photo {
  display: flex;
  justify-content: center;
  align-items: center; }

.archives-main {
  padding: 3.5%;
  display: flex;
  justify-content: center;
  font-family: "Segoe UI", "Lucida Grande", Helvetica, "Microsoft YaHei", FreeSans, Arimo, "Droid Sans", "wenquanyi micro hei", "Hiragino Sans GB", "Hiragino Sans GB W3", Arial, sans-serif;
  margin: 0 auto; }
  .archives-main .archives-photo img {
    width: 90%;
    margin: 0 auto; }
  .archives-main .archives-body ul {
    line-height: 35px; }
  .archives-main .archives-title {
    text-align: left;
    color: #5d5d5d;
    margin: 1% 0; }
  .archives-main .archives-entry {
    margin: 4% 0;
    color: #FC5185; }
    .archives-main .archives-entry a {
      font-size: 18px;
      font-family: Monda, "PingFang SC", "Microsoft YaHei", sans-serif; }
      .archives-main .archives-entry a:hover {
        color: #FC5185; }

.blog-footer {
  text-align: center;
  clear: both;
  color: #FC5185;
  font-family: cathsgbr;
  font-weight: 700;
  font-size: 125%;
  padding: 1% 0;
  margin-top: 2%;
  position: relative; }
  .blog-footer .inner a {
    color: #364F6B;
    font-family: "Athelas, STHeiti, Microsoft Yahei, serif"; }