html {
  -webkit-font-smoothing: antialiased; }

  body {
    color: rgba(0, 0, 0, 0.6);
    font-family: Noto Serif, Source Serif Pro, Georgia, Helvetica Neue, Tahoma, Arial,
        Source Han Serif, "Microsoft YaHei", 'PingFang SC', "Hiragino Sans GB",
        "WenQuanYi Micro Hei", sans-serif;
    font-size: 15px;
    width: 100%;
    margin: 0 auto;
    background-color: #f7f7f7;
    line-height: 2.1; }

    a {
      text-decoration: none; }
      a:link, a:visited {
        opacity: 1;
        -webkit-transition: all 0.15s linear;
        -moz-transition: all 0.15s linear;
        -o-transition: all 0.15s linear;
        -ms-transition: all 0.15s linear;
        transition: all 0.15s linear;
        color: #888;
        border-bottom: 1px #ddd dashed; }
        a:hover, a:active {
          color: #e42b2b;
          text-decoration: none !important; }

.weaklink a {
  text-decoration: none;
  color: #444;
  border: none !important;
  margin: 0;
  cursor: pointer; }
  .weaklink a:hover, .weaklink a:active {
    color: #333 !important;
    text-decoration: none !important; }

.sm_margin {
  margin: -20px 0 -15px !important; }

  .header {
    max-width: 800px;
    padding: 6.3em 0 4em;
    margin: 0 auto;
    -webkit-background-size: cover;
    background-size: cover; }
    .header .logo_title {
      text-align: left; }
      .header .logo_title .title img {
        width: 30px;
        margin: 0.7em 0.5em 0 0;
        float: left; }
        .header .logo_title .title h1 {
          text-transform: uppercase;
          font-size: 23px;
          letter-spacing: 1px;
          line-height: 1;
          font-weight: bold;
          float: left;
          color: #333; }
          .header .logo_title .title a {
            text-decoration: none; }
            .header .logo_title .title .navbar .normal_nav {
              float: right;
              line-height: 1; }
              .header .logo_title .title .navbar .normal_nav a {
                font-size: 14px;
                font-weight: 400;
                color: #666; }
                .header .logo_title .title .navbar .normal_nav a:hover,
                .header .logo_title .title .navbar .normal_nav a:active {
                  color: #333;
                  text-decoration: none;
                  font-weight: 600; }
              .header .logo_title .title .navbar .normal_nav ul {
                list-style-type: none; }
                .header .logo_title .title .navbar .normal_nav li {
                  display: inline;
                  margin-right: 1.5em; }
                  .header .logo_title .title .navbar .normal_nav li:last-of-type {
                    display: inline;
                    margin-right: 0; }
            .header .logo_title .title .navbar .hamberger {
              display: none;
              font-size: 22px;
              color: #888;
              float: right;
              cursor: pointer; }
              .header .logo_title .title .navbar .hamberger .fa-times {
                display: none;
                font-size: 24px;
                line-height: 2; }
    .header .hidden_nav {
      display: none;
      line-height: 1;
      padding: 0.5em;
      margin: 4.5em auto -4em;
      background-color: #fff;
      box-shadow: 0px 10px 20px 0px rgba(236, 236, 236, 0.86); }
      .header .hidden_nav a {
        font-size: 14px;
        font-weight: 400;
        color: #666;
        border: none; }
        .header .hidden_nav a:hover, .header .hidden_nav a:active {
          color: #333;
          text-decoration: none;
          font-weight: 600; }
      .header .hidden_nav ul {
        list-style-type: none;
        padding-left: 1.6em; }
        .header .hidden_nav li {
          display: inline;
          margin-right: 1.2em; }

.main {
  width: 100%; }

  .main-inner {
    max-width: 800px;
    padding: 3.3em 0 2.7em;
    margin: 3.3em auto 0;
    box-shadow: 0px 10px 20px 0px rgba(236, 236, 236, 0.86);
    background: #ffffff; }
    .main-inner .content {
      padding: 0 3.3em;
      height: auto;
      margin: 0 auto; }

.post {
  background-color: #FFF;
  margin-top: 50px; }
  .post .post_title h2 {
    letter-spacing: 1px;
    line-height: 1.3;
    font-weight: 600;
    color: #444;
    padding-bottom: 5px; }
    .post .post_title a {
      text-decoration: none;
      letter-spacing: 1px;
      color: #444; }
  .post .post_content {
    font-size: 1em;
    color: #555;
    line-height: 2em;
    margin-bottom: 0px !important; }
    .post .post_footer {
      padding: 0 0 45px;
      border-bottom: 1px solid #f2f2f2; }
      .post .post_footer .info {
        max-width: 100%;
        height: 25px;
        color: #aaaaaa;
        font-size: 12px;
        margin-top: 10px; }
        .post .post_footer .info .context {
          margin-right: 15px; }
          .post .post_footer .info .date_info {
            margin-right: 15px; }
            .post .post_footer .info .tags_info {
              margin-right: 15px; }
              .post .post_footer .info .mobile {
                display: none;
                margin-right: 15px; }
                .post .post_footer .info .tag {
                  margin-right: 4px; }
                  .post .post_footer .info a {
                    text-decoration: none;
                    color: #bbbbbb; }
                    .post .post_footer .info i {
                      margin-right: 3px; }
  .post .post_details {
    padding: 0 0 20px 0; }
    .post .post_details .info {
      max-width: 100%;
      height: 25px;
      color: #bbbbbb;
      font-size: 12px;
      margin-top: 10px; }
      .post .post_details .info .date_info {
        margin-right: 15px; }
        .post .post_details .info .tags_info {
          margin-right: 15px; }
          .post .post_details .info .context {
            margin-right: 15px; }
            .post .post_details .info .mobile {
              display: none;
              margin-right: 15px; }
              .post .post_details .info .tag {
                margin-right: 5px; }
                .post .post_details .info a {
                  text-decoration: none;
                  color: #bbbbbb; }
                  .post .post_details .info i {
                    margin-right: 3px; }

.paginator {
  padding: 25px 0; }
  .paginator .paginator_container {
    margin: 0;
    padding: 0;
    height: 13px; }
    .paginator a {
      color: #888;
      font-size: 13px;
      border: none; }
      .paginator a:hover, .paginator a:active {
        color: #333;
        text-decoration: none; }
  .paginator .pre {
    float: left; }
    .paginator .next {
      float: right; }

.footer {
  max-width: 700px;
  text-align: center;
  padding-top: 3em;
  margin: 0 auto; }
  .footer .site_footer_wrap .site_footer {
    border-top: none;
    margin-top: 0 !important; }
    .footer .copyright {
      padding: 3.5em 0 0.5em; }
      .footer .copyright span {
        color: #d6d6d6; }
        .footer .copyright a {
          color: #d6d6d6 !important;
          margin-left: 3px !important;
          border: none !important; }
          .footer .copyright a:hover, .footer .copyright a:active {
            color: #333 !important;
            text-decoration: none !important;
            border: none !important; }
  .footer .mysocials {
    list-style: none;
    padding: 0;
    text-align: center; }
    .footer .mysocials a {
      color: #ccc !important;
      font-size: 1.4em !important;
      border: none !important; }
      .footer .mysocials a:hover, .footer .mysocials a:active {
        color: #333 !important;
        text-decoration: none !important;
        border: none !important; }

.list_with_title {
  margin: 0;
  padding: 0;
  color: #666; }
  .list_with_title li {
    list-style-type: none;
    padding: 0; }
    .list_with_title .listing_title {
      font-size: 2em;
      color: #444;
      font-weight: bold;
      padding-top: 10px;
      line-height: 2.2em;
      margin-bottom: 5px; }
      .list_with_title .listing {
        margin: 0 0 25px 0;
        padding: 0; }
        .list_with_title .listing .listing_post {
          padding-bottom: 10px;
          font-size: 1em; }
          .list_with_title .listing .listing_post .post_date {
            float: right;
            color: #c5c5c5; }
            .list_with_title .listing .listing_post a {
              color: #666;
              border: none; }
              .list_with_title .listing .listing_post a:hover {
                color: #e42b2b; }

.markdown a {
  margin: 0 0.2em; }
  .markdown h2 {
    color: #444;
    font-size: 1.4em;
    border-image: url('https://i.loli.net/2018/10/01/5bb0fd8197c74.png') 0 100 0 0;
    border-right: 1.4em solid;
    margin-left: -0.1em;
    display: inline;
    padding-right: 0.3em;
    line-height: 2; }
    .markdown h3 {
      color: #444;
      font-size: 1.2em;
      border-image: url('https://i.loli.net/2018/10/01/5bb0fe403b964.png') 0 100 0 0;
      border-right: 1.4em solid;
      margin-left: -0.1em;
      display: inline;
      padding-right: 0.3em;
      line-height: 2; }
      .markdown h3::before {
        content: '\a\
';
        white-space: pre; }
        .markdown h4 {
          color: #444;
          font-size: 1em;
          line-height: 2; }
          .markdown code {
            margin: 0 0.2em; }
            .markdown blockquote {
              border-left: 0.3em solid #eee; }
              .markdown pre {
                line-height: 1.8em; }
                .markdown span.md_line {
                  line-height: 1.85; }
                  .markdown strong {
                    margin: 0 0.2em; }

.four_o_four {
  margin-bottom: 15px; }
  .four_o_four h2 {
    color: #444;
    font-size: 2em; }
    .four_o_four p {
      line-height: 2.4em;
      margin-bottom: 30px; }
      .four_o_four span {
        color: #333;
        letter-spacing: 4px; }

.about h2 {
  color: #444;
  font-size: 2em;
  margin-top: 2em;
  margin-bottom: 5px; }
  .about h2:first-of-type {
    margin-top: 1.2em; }
    .about p {
      font-size: 1em;
      margin-bottom: -0.8em; }
      .about p:last-of-type {
        font-size: 1em;
        margin-bottom: 60px; }

@media screen and (min-width: 500px) and (max-width: 800px) {
  .header {
    max-width: 92%;
    padding: 4em 0 3em;   }
    .main-inner {
      max-width: 92%;   }
      .content {
        padding: 0 2.5em !important;   }
        .post {
          margin-top: 35px;   }
          .sm_margin {
            margin: 0;   }
            .navbar li {
              margin-right: 1.4em !important;   }
  .footer .copyright {
    padding: 3em 0 0.5em;   }
}

@media screen and (max-width: 499px) {
  .header {
    max-width: 92%;
    padding: 2em 0 2em;   }
    .main-inner {
      max-width: 92%;
      padding: 2em 0 1.5em;   }
      .post {
        margin-top: 35px;   }
        .sm_margin {
          margin: 0;   }
          .content {
            padding: 0 1.6em !important;   }
            .post_date {
              float: none !important;   }
              .navbar .normal_nav {
                display: none;   }
                .navbar .hamberger {
                  display: block !important;   }
  .footer {
    padding-top: 1.5em;   }
    .footer .copyright {
      padding: 1.5em 0 0.2em;   }
  .info .context {
    display: none;   }
    .info .mobile {
      display: inline !important;   }
}

@media screen and (max-width: 320px) {
  .navbar li {
    margin-right: 0.5em !important;   }
}

.animated {
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s; }

  .animated.hinge {
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -ms-animation-duration: 1s;
    -o-animation-duration: 1s;
    animation-duration: 1s; }

    @-webkit-keyframes fadeInDown {
      0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);   }
        100% {
          opacity: 1;
          -webkit-transform: translateY(0);   }
}

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-20px);   }
    100% {
      opacity: 1;
      -moz-transform: translateY(0);   }
}

@-o-keyframes fadeInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-20px);   }
    100% {
      opacity: 1;
      -o-transform: translateY(0);   }
}

@keyframes fadeInDown {
  0% {
    opacity: 0;
    transform: translateY(-20px);   }
    100% {
      opacity: 1;
      transform: translateY(0);   }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  -moz-animation-name: fadeInDown;
  -o-animation-name: fadeInDown;
  animation-name: fadeInDown; }