@charset "utf-8";
html {
  color: #333;
  background-image: url('bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-rendering: optimizelegibility
}
html.borderbox *, html.borderbox :after, html.borderbox :before {
  box-sizing: border-box
}
article, aside, blockquote, body, button, code, dd, details, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
  margin: 0;
  padding: 0
}
article, aside, details, figcaption, figure, footer, header, menu, nav, section {
  display: block
}
audio, canvas, video {
  display: inline-block
}
body, button, input, select, textarea {
  font: 300 1em/1.8 PingFang SC, Lantinghei SC, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans
}
button::-moz-focus-inner, input::-moz-focus-inner {
  padding: 0;
  border: 0
}
table {
  border-collapse: collapse;
  border-spacing: 0
}
fieldset, img {
  border: 0
}
blockquote {
  position: relative;
  color: #999;
  font-weight: 400;
  border-left: 1px solid #1abc9c;
  padding-left: 1em;
  margin: 1em 3em 1em 2em
}
@media only screen and (max-width:640px) {
  blockquote {
    margin: 1em 0
  }
}
abbr, acronym {
  border-bottom: 1px dotted;
  font-variant: normal
}
abbr {
  cursor: help
}
del {
  text-decoration: line-through
}
address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: 400
}
ol, ul {
  list-style: none
}
caption, th {
  text-align: left
}
q:after, q:before {
  content: ''
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative
}
:root sub, :root sup {
  vertical-align: baseline
}
a {
  color: #1abc9c
}
a:hover {
  text-decoration: underline
}
.typo a {
  border-bottom: 1px solid #1abc9c
}
.typo a:hover {
  border-bottom-color: #555;
  color: #555
}
.typo a:hover, a, ins {
  text-decoration: none
}
.typo-u, u {
  text-decoration: underline
}
mark {
  background: #fffdd1;
  border-bottom: 1px solid #ffedce;
  padding: 2px;
  margin: 0 5px
}
code, pre, pre tt {
  font-family: Courier, Courier New, monospace
}
pre {
  background: #f8f8f8;
  border: 1px solid #ddd;
  padding: 1em 1.5em;
  display: block;
  -webkit-overflow-scrolling: touch
}
hr {
  border: none;
  border-bottom: 1px solid #cfcfcf;
  margin-bottom: .8em;
  height: 10px
}
.typo-small, figcaption, small {
  font-size: .9em;
  color: #888
}
b, strong {
  font-weight: 700;
  color: #000
}
[draggable] {
  cursor: move
}
.clearfix:after, .clearfix:before {
  content: "";
  display: table
}
.clearfix:after {
  clear: both
}
.clearfix {
  zoom: 1
}
.textwrap, .textwrap td, .textwrap th {
  word-wrap: break-word;
  word-break: break-all
}
.textwrap-table {
  table-layout: fixed
}
.serif {
  font-family: Palatino, Optima, Georgia, serif
}
.typo-dl, .typo-form, .typo-hr, .typo-ol, .typo-p, .typo-pre, .typo-table, .typo-ul, .typo dl, .typo form, .typo hr, .typo ol, .typo p, .typo pre, .typo table, .typo ul, blockquote {
  margin-bottom: 1.2em
}
h1, h2, h3, h4, h5, h6 {
  font-family: PingFang SC, Verdana, Helvetica Neue, Microsoft Yahei, Hiragino Sans GB, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;
  font-weight: 100;
  color: #000;
  line-height: 1.35
}
.typo-h1, .typo-h2, .typo-h3, .typo-h4, .typo-h5, .typo-h6, .typo h1, .typo h2, .typo h3, .typo h4, .typo h5, .typo h6 {
  margin-top: 1.2em;
  margin-bottom: .6em;
  line-height: 1.35
}
.typo-h1, .typo h1 {
  font-size: 2em
}
.typo-h2, .typo h2 {
  font-size: 1.8em
}
.typo-h3, .typo h3 {
  font-size: 1.6em
}
.typo-h4, .typo h4 {
  font-size: 1.4em
}
.typo-h5, .typo-h6, .typo h5, .typo h6 {
  font-size: 1.2em
}
.typo-ul, .typo ul {
  margin-left: 1.3em;
  list-style: disc
}
.typo-ol, .typo ol {
  list-style: decimal;
  margin-left: 1.9em
}
.typo-ol ol, .typo-ol ul, .typo-ul ol, .typo-ul ul, .typo li ol, .typo li ul {
  margin-bottom: .8em;
  margin-left: 2em
}
.typo-ol ul, .typo-ul ul, .typo li ul {
  list-style: circle
}
.typo-table td, .typo-table th, .typo table caption, .typo table td, .typo table th {
  border: 1px solid #ddd;
  padding: .5em 1em;
  color: #666
}
.typo-table th, .typo table th {
  background: #fbfbfb
}
.typo-table thead th, .typo table thead th {
  background: #f1f1f1
}
.typo table caption {
  border-bottom: none
}
.typo-input, .typo-textarea {
  -webkit-appearance: none;
  border-radius: 0
}
.typo-em, .typo em, caption, legend {
  color: #000;
  font-weight: inherit
}
.typo-em {
  position: relative
}
.typo-em:after {
  position: absolute;
  top: .65em;
  left: 0;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  content: "・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・"
}
.typo img {
  max-width: 100%
}
/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */ html {
  font-family: sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%
}
body {
  margin: 0
}
background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%);
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
  display: block
}
audio, canvas, progress, video {
  display: inline-block
}
audio:not([controls]) {
  display: none;
  height: 0
}
progress {
  vertical-align: baseline
}
[hidden], template {
  display: none
}
a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects
}
a:active, a:hover {
  outline-width: 0
}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}
b, strong {
  font-weight: inherit;
  font-weight: bolder
}
dfn {
  font-style: italic
}
h1 {
  font-size: 2em;
  margin: .67em 0
}
mark {
  background-color: #ff0;
  color: #000
}
small {
  font-size: 80%
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {
  bottom: -.25em
}
sup {
  top: -.5em
}
img {
  border-style: none
}
svg:not(:root) {
  overflow: hidden
}
code, kbd, pre, samp {
  font-family: monospace, monospace;
  font-size: 1em
}
figure {
  margin: 1em 40px
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible
}
button, input, optgroup, select, textarea {
  font: inherit;
  margin: 0
}
optgroup {
  font-weight: 700
}
button, input {
  overflow: visible
}
button, select {
  text-transform: none
}
[type=reset], [type=submit], button, html [type=button] {
  -webkit-appearance: button
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {
  outline: 1px dotted ButtonText
}
fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em
}
legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal
}
textarea {
  overflow: auto
}
[type=checkbox], [type=radio] {
  box-sizing: border-box;
  padding: 0
}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: auto
}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {
  -webkit-appearance: none
}
::-webkit-input-placeholder {
  color: inherit;
  opacity: .54
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit
}
.article .article-entry blockquote footer cite a:hover, .article .article-nav-link-wrap:hover, .dark a:hover, a:hover {
  color: #22c5e5;
  border-bottom: 1px solid RGBA(34, 197, 229, .2);
  -webkit-transition: color .1s linear;
  transition: color .1s linear
}
.archive-container hr, .archive-footer hr, .article .article-footer hr, .article hr, .category-container hr, .home hr, .post-footer hr, .tag-container hr {
  height: 1px;
  border: 0;
  background-image: -webkit-linear-gradient(0deg, transparent, #d5d5d5, transparent)
}
.archive-container .header .main-nav-link, .article .header .main-nav-link, .category-container .header .main-nav-link, .tag-container .header .main-nav-link {
  margin-right: 10px;
  color: #777;
  padding-bottom: 5px;
  display: inline-block
}
body, html {
  width: 100%;
  height: 100%;
  position: relative;
  box-sizing: border-box
}
body, h1, h2, h3, h4, h5, h6 {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: source sans pro, proxima nova, -apple-system, sans-serif;
  -moz-font-feature-settings: "liga"on;
  -webkit-transition: all .25s ease;
  transition: all .25s ease
}
body {
  font-size: 20px
}
a {
  color: #222;
  -webkit-transition: color .25s linear;
  transition: color .25s linear;
  cursor: pointer
}
a, a:hover {
  text-decoration: none
}
em {
  font-style: italic;
  font-weight: lighter
}
.footer {
  box-sizing: border-box
}
.home-footer {
  padding: 50px 0
}
.archive-footer, .post-footer {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0;
  color: #cacdd0
}
.archive-footer a, .archive-footer b, .archive-footer strong, .post-footer a, .post-footer b, .post-footer strong {
  color: #aeb4b9
}
.container {
  width: 100%
}
.copyright, .footer-content {
  text-align: center;
  width: 100%;
  font-size: 80%;
  color: #333
}
.copyright li, .footer-content li {
  display: inline-block
}
.copyright a, .footer-content a {
  color: #aeb4b9
}
.copyright a:hover, .footer-content a:hover {
  color: #22c5e5
}
.footer-content {
  width: 60%;
  margin: 0 auto;
  text-align: left
}
.home-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}
.home {
  font-weight: lighter;
  line-height: 1.4;
  color: #505050;
  text-align: center;
  position: relative
}
.home a {
  border-bottom: 1px solid #eee
}
.home .content {
  width: 100%;
  max-width: 500px;
  position: relative;
  margin: 0 auto
}
.home h1, .home strong {
  color: #222
}
.home hr {
  width: 80%;
  max-width: 300px;
  margin: 20px auto
}
.home li {
  list-style: none
}
.home .profile {
  width: 100%
}
.home .profile h1 {
  font-weight: 300
}
.home .links {
  padding: 0;
  text-align: center
}
.home .links li {
  display: inline-block;
  margin: 0 5px
}
.archive-container, .category-container, .tag-container {
  width: 60%;
  margin: 0 auto;
  position: relative;
  line-height: 1;
  text-align: left;
  font-size: 16px;
  padding-top: 50px
}
.archive-container article, .category-container article, .tag-container article {
  margin-bottom: 15px
}
.archive-container a, .archive-container a:hover, .category-container a, .category-container a:hover, .tag-container a, .tag-container a:hover {
  border: 0
}
.archive-container .header, .category-container .header, .tag-container .header {
  font-size: 18px
}
.archive-container .archive-article-header > a, .archive-container .archive-article-header > h1, .category-container .archive-article-header > a, .category-container .archive-article-header > h1, .tag-container .archive-article-header > a, .tag-container .archive-article-header > h1 {
  display: inline-block;
  vertical-align: middle
}
.archive-container .archive-article-header > a, .category-container .archive-article-header > a, .tag-container .archive-article-header > a {
  width: 100px
}
.archive-container .archive-article-header h1, .category-container .archive-article-header h1, .tag-container .archive-article-header h1 {
  width: calc(100% - 120px);
  font-size: 100%;
  margin: 0
}
.archive-container hr, .category-container hr, .tag-container hr {
  width: 60%;
  margin: 20px 0 40px;
  background-image: -webkit-linear-gradient(0deg, #d5d5d5, #d5d5d5, transparent)
}
.archive-container .archive-article-date, .category-container .archive-article-date, .tag-container .archive-article-date {
  font-size: 80%;
  color: #cacdd0
}
.archive-container .archive-article-title, .category-container .archive-article-title, .tag-container .archive-article-title {
  font-weight: 200
}
.archive-container .archive-year-wrap, .category-container .archive-year-wrap, .tag-container .archive-year-wrap {
  margin-bottom: 20px
}
.archive-container .page-nav, .category-container .page-nav, .tag-container .page-nav {
  text-align: center;
  margin-top: 30px;
  color: #aeb4b9
}
.archive-container .page-nav a, .category-container .page-nav a, .tag-container .page-nav a {
  color: #777
}
.archive-container .extend, .archive-container .page-number, .category-container .extend, .category-container .page-number, .tag-container .extend, .tag-container .page-number {
  margin-right: 15px
}
.article {
  width: 60%;
  margin: 0 auto
}
.article .header {
  font-size: 18px;
  padding-top: 50px
}
.article .header .main-nav-link {
  border: 0
}
.article hr {
  width: 60%;
  margin: 20px 0 40px;
  background-image: -webkit-linear-gradient(0deg, #d5d5d5, #d5d5d5, transparent)
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
  font-weight: bolder
}
.article .article-title {
  font-size: 2.5em
}
.article a.fancybox, .article a.fancybox-item {
  border: 0
}
.article .caption {
  color: #aeb4b9;
  display: block;
  font-size: 14px;
  text-align: center
}
.article .article-entry {
  word-break: break-word
}
.article .article-entry img {
  display: block;
  margin: auto
}
.article .article-entry blockquote footer {
  text-align: center;
  font-size: 80%;
  color: #aeb4b9
}
.article .article-entry blockquote footer cite {
  font-style: italic
}
.article .article-entry blockquote footer cite a {
  color: #aeb4b9;
  border-bottom: 1px solid #eee;
  -webkit-transition: color .25s linear;
  transition: color .25s linear
}
.article .article-entry blockquote footer cite:before {
  content: "—";
  padding: 0 .5em
}
.article .article-entry blockquote footer strong {
  color: #777;
  font-weight: 400
}
.article .article-entry .pullquote {
  width: 45%;
  border: 0
}
.article .article-entry .pullquote.left {
  float: left;
  text-align: left
}
.article .article-entry .pullquote.right {
  float: right;
  text-align: right
}
.article .article-entry .video-container {
  position: relative;
  padding-top: 56.25%;
  margin-bottom: 30px;
  height: 0;
  overflow: hidden
}
.article .article-entry .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0
}
.article .article-nav {
  max-width: 100%;
  margin-top: 50px;
  font-size: 80%
}
.article .article-nav-link-wrap {
  display: inline-block;
  color: #aeb4b9;
  padding: 0 10px;
  width: 49%;
  box-sizing: border-box;
  vertical-align: top;
  border: 0
}
.article .article-nav-link-wrap strong {
  color: #777
}
.article .article-nav-link-wrap:hover {
  border-bottom: 0
}
.article .article-nav-link-wrap.newer {
  text-align: right
}
.article .article-nav-link-wrap.older {
  text-align: left
}
.article .article-footer, .article .article-footer hr {
  margin-top: 50px
}
.article .article-meta {
  font-size: 80%;
  color: #aeb4b9
}
.article .article-meta a {
  color: #777
}
.article .article-meta .label {
  margin-right: 10px
}
.article .article-meta .article-category, .article .article-meta .article-tag-list {
  display: inline-block
}
.article .article-meta .article-tag-list-item {
  display: inline-block;
  margin-right: 5px
}
.article .article-meta .article-tag-list-item:before {
  content: '#'
}
.article .article-gallery img {
  width: 100%
}
.article-type-page .article-footer {
  display: none
}
.comments {
  width: 60%;
  margin: 50px auto 0
}
.dark {
  color: #d8d8d8
}
.dark, .dark .container, .dark .footer {
  background-color: #3f3f3f
}
.dark a {
  color: #ddd
}
.dark a:hover {
  color: #fff
}
.dark .home {
  color: #d8d8d8
}
.dark .home h1, .dark .home strong {
  color: #ddd
}
.dark .home a {
  border-bottom: 1px solid #ddd
}
.dark .home a:hover {
  border-bottom: 1px solid #fff
}
.dark .archive-container .header .main-nav-link, .dark .article .header .main-nav-link, .dark .category-container .header .main-nav-link, .dark .tag-container .header .main-nav-link {
  color: #aaa
}
.dark .archive-container .header .main-nav-link:hover, .dark .article .header .main-nav-link:hover, .dark .category-container .header .main-nav-link:hover, .dark .tag-container .header .main-nav-link:hover {
  color: #fff
}
.dark .archive-container .article-nav, .dark .archive-container .page-nav, .dark .article .article-nav, .dark .article .page-nav, .dark .category-container .article-nav, .dark .category-container .page-nav, .dark .tag-container .article-nav, .dark .tag-container .page-nav {
  color: #aaa
}
.dark .archive-container .article-nav a, .dark .archive-container .page-nav a, .dark .article .article-nav a, .dark .article .page-nav a, .dark .category-container .article-nav a, .dark .category-container .page-nav a, .dark .tag-container .article-nav a, .dark .tag-container .page-nav a {
  color: #bbb
}
.dark .archive-container .article-nav a:hover, .dark .archive-container .page-nav a:hover, .dark .article .article-nav a:hover, .dark .article .page-nav a:hover, .dark .category-container .article-nav a:hover, .dark .category-container .page-nav a:hover, .dark .tag-container .article-nav a:hover, .dark .tag-container .page-nav a:hover {
  color: #fff
}
.dark .archive-container .article-entry blockquote footer strong, .dark .archive-container .article-meta a, .dark .article .article-entry blockquote footer strong, .dark .article .article-meta a, .dark .category-container .article-entry blockquote footer strong, .dark .category-container .article-meta a, .dark .tag-container .article-entry blockquote footer strong, .dark .tag-container .article-meta a {
  color: #bbb
}
.dark blockquote {
  color: #aaa
}
.dark b, .dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark strong {
  color: #ddd
}
.dark .typo-em, .dark .typo em, .dark caption, .dark legend {
  color: #bbb
}
.dark .typo-table td, .dark .typo table caption, .dark .typo table td {
  border: 1px solid #ddd;
  color: #aaa
}
.dark .article-entry .highlight, .dark .article-entry pre {
  color: #d8d8d8;
  background-color: #333
}
.dark .article-entry .highlight table caption, .dark .article-entry .highlight table td, .dark .article-entry .highlight td {
  border: 0
}
.dark .article-entry .highlight .line.marked {
  background: #444
}
.article-entry .highlight, .article-entry pre {
  padding: 20px;
  background: #fff;
  color: #4d4d4c;
  font-size: 14px;
  overflow: auto;
  line-height: 1.8
}
.article-entry .highlight .gutter pre {
  color: #aeb4b9;
  font-size: 14px
}
.article-entry figure.highlight {
  margin: 0
}
.article-entry pre code {
  background: none;
  text-shadow: none;
  padding: 0
}
.article-entry .highlight pre {
  border: 0;
  margin: 0;
  padding: 0
}
.article-entry .highlight table {
  margin: 0;
  width: 100%
}
.article-entry .highlight td {
  border: 0;
  padding: 0
}
.article-entry .highlight figcaption {
  color: #8e908c
}
.article-entry .highlight figcaption a {
  float: right
}
.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
  width: 0
}
.article-entry .highlight .line {
  height: 25px
}
.article-entry .highlight .line.marked {
  background: #e6e6e6
}
pre .comment, pre .title {
  color: #8e908c
}
pre .attribute, pre .css .class, pre .css .id, pre .css .pseudo, pre .html .doctype, pre .regexp, pre .ruby .constant, pre .tag, pre .variable, pre .xml .doctype, pre .xml .pi, pre .xml .tag .title {
  color: #c82829
}
pre .built_in, pre .constant, pre .literal, pre .number, pre .params, pre .preprocessor {
  color: #f5871f
}
pre .class, pre .css .rules .attribute, pre .header, pre .inheritance, pre .ruby .class .title, pre .ruby .symbol, pre .string, pre .value, pre .xml .cdata {
  color: #718c00
}
pre .css .hexcolor {
  color: #3e999f
}
pre .coffeescript .title, pre .function, pre .javascript .title, pre .perl .sub, pre .python .decorator, pre .python .title, pre .ruby .function .title, pre .ruby .title .keyword {
  color: #4271ae
}
pre .javascript .function, pre .keyword {
  color: #8959a8
}
@media (max-width:768px) {
  body {
    font-size: 18px
  }
}
@media (max-width:468px) {
  body {
    font-size: 16px
  }
  .home {
    color: #222
  }
  .home a {
    color: $111
  }
  .archive-container .archive-footer, .archive-container .post-footer {
    padding: 40px
  }
  .archive-container .archive-article-header > a, .archive-container .archive-article-header > h1 {
    width: 100%
  }
}
@media (max-width:320px) {
  body {
    font-size: 14px
  }
  .article {
    font-size: 16px
  }
  .archive-container .archive-footer, .archive-container .post-footer {
    padding: 30px
  }
  .footer, .footer-content {
    font-size: 100%
  }
  .archive-container, .archive-footer, .article, .comments, .home .content, .post-footer {
    width: 80%
  }
}