:root {
  --c-base-black: #0C1E29;
  --c-base-blacklight: #4E616C;
  --c-base-purple: #5978F3;
  --c-base-purplelight: #C2CCF2;
  --c-base-bluelight: hwb(199, 1%, 4%);
  --c-base-blue: hwb(209, 0%, 35%);
  --c-base-green: hwb(123, 40%, 27%);
  --c-base-graylight: hwb(0, 80%, 20%);
  --c-base-gray: hwb(0, 60%, 40%);
  --c-base-orange: hwb(22, 21%, 5%);
  --c-base-red: hwb(5, 24%, 9%);
  --c-base-white: hwb(0, 95%, 5%);
  --c-base-yellow: hwb(48, 6%, 5%);
}
/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */
/* Document
   ========================================================================== */
/**
 * Use a better box model (opinionated).
 */
html {
  box-sizing: border-box;
}
*,
*::before,
*::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}
/**
 * Use a more readable tab size (opinionated).
 */
:root {
  -moz-tab-size: 4;
  tab-size: 4;
}
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}
/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  font-size: 16px;
}
/**
 * Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
}
/* Grouping content
   ========================================================================== */
/**
 * Add the correct height in Firefox.
 */
hr {
  height: 0;
}
/* Text-level semantics
   ========================================================================== */
/**
 * Add the correct text decoration in Chrome, Edge, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}
/**
 * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp,
pre {
  font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/**
 * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}
/**
 * Remove the inheritance of text transform in Edge and Firefox.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}
/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}
/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
  outline: 1px dotted ButtonText;
}
/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
/**
 * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
 */
legend {
  padding: 0;
}
/**
 * Add the correct vertical alignment in Chrome and Firefox.
 */
progress {
  vertical-align: baseline;
}
/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}
/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}
/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Chrome and Safari.
 */
summary {
  display: list-item;
}
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #333;
  background: #f8f8f8;
}
.hljs-comment,
.hljs-quote {
  color: #998;
  font-style: italic;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
  color: #333;
  font-weight: bold;
}
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: #008080;
}
.hljs-string,
.hljs-doctag {
  color: #d14;
}
.hljs-title,
.hljs-section,
.hljs-selector-id {
  color: #900;
  font-weight: bold;
}
.hljs-subst {
  font-weight: normal;
}
.hljs-type,
.hljs-class .hljs-title {
  color: #458;
  font-weight: bold;
}
.hljs-tag,
.hljs-name,
.hljs-attribute {
  color: #000080;
  font-weight: normal;
}
.hljs-regexp,
.hljs-link {
  color: #009926;
}
.hljs-symbol,
.hljs-bullet {
  color: #990073;
}
.hljs-built_in,
.hljs-builtin-name {
  color: #0086b3;
}
.hljs-meta {
  color: #999;
  font-weight: bold;
}
.hljs-deletion {
  background: #fdd;
}
.hljs-addition {
  background: #dfd;
}
.hljs-emphasis {
  font-style: italic;
}
.hljs-strong {
  font-weight: bold;
}
@font-face {
  font-family: 'icomoon';
  src: url('../media/fonts/icomoon.eot?pjaj8c');
  src: url('../media/fonts/icomoon.eot?pjaj8c#iefix') format('embedded-opentype'), url('../media/fonts/icomoon.ttf?pjaj8c') format('truetype'), url('../media/fonts/icomoon.woff?pjaj8c') format('woff'), url('../media/fonts/icomoon.svg?pjaj8c#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-activity-outline:before {
  content: "\e900";
}
.icon-alert-circle-outline:before {
  content: "\e901";
}
.icon-alert-triangle-outline:before {
  content: "\e902";
}
.icon-archive-outline:before {
  content: "\e903";
}
.icon-arrow-back-outline:before {
  content: "\e904";
}
.icon-arrow-circle-down-outline:before {
  content: "\e905";
}
.icon-arrow-circle-left-outline:before {
  content: "\e906";
}
.icon-arrow-circle-right-outline:before {
  content: "\e907";
}
.icon-arrow-circle-up-outline:before {
  content: "\e908";
}
.icon-arrow-down-outline:before {
  content: "\e909";
}
.icon-arrow-downward-outline:before {
  content: "\e90a";
}
.icon-arrow-forward-outline:before {
  content: "\e90b";
}
.icon-arrow-ios-back-outline:before {
  content: "\e90c";
}
.icon-arrow-ios-downward-outline:before {
  content: "\e90d";
}
.icon-arrow-ios-forward-outline:before {
  content: "\e90e";
}
.icon-arrow-ios-upward-outline:before {
  content: "\e90f";
}
.icon-arrow-left-outline:before {
  content: "\e910";
}
.icon-arrow-right-outline:before {
  content: "\e911";
}
.icon-arrow-up-outline:before {
  content: "\e912";
}
.icon-arrow-upward-outline:before {
  content: "\e913";
}
.icon-arrowhead-down-outline:before {
  content: "\e914";
}
.icon-arrowhead-left-outline:before {
  content: "\e915";
}
.icon-arrowhead-right-outline:before {
  content: "\e916";
}
.icon-arrowhead-up-outline:before {
  content: "\e917";
}
.icon-at-outline:before {
  content: "\e918";
}
.icon-attach-2-outline:before {
  content: "\e919";
}
.icon-attach-outline:before {
  content: "\e91a";
}
.icon-award-outline:before {
  content: "\e91b";
}
.icon-backspace-outline:before {
  content: "\e91c";
}
.icon-bar-chart-2-outline:before {
  content: "\e91d";
}
.icon-bar-chart-outline:before {
  content: "\e91e";
}
.icon-battery-outline:before {
  content: "\e91f";
}
.icon-behance-outline:before {
  content: "\e920";
}
.icon-bell-off-outline:before {
  content: "\e921";
}
.icon-bell-outline:before {
  content: "\e922";
}
.icon-bluetooth-outline:before {
  content: "\e923";
}
.icon-book-open-outline:before {
  content: "\e924";
}
.icon-book-outline:before {
  content: "\e925";
}
.icon-bookmark-outline:before {
  content: "\e926";
}
.icon-briefcase-outline:before {
  content: "\e927";
}
.icon-browser-outline:before {
  content: "\e928";
}
.icon-brush-outline:before {
  content: "\e929";
}
.icon-bulb-outline:before {
  content: "\e92a";
}
.icon-calendar-outline:before {
  content: "\e92b";
}
.icon-camera-outline:before {
  content: "\e92c";
}
.icon-car-outline:before {
  content: "\e92d";
}
.icon-cast-outline:before {
  content: "\e92e";
}
.icon-charging-outline:before {
  content: "\e92f";
}
.icon-checkmark-circle-2-outline:before {
  content: "\e930";
}
.icon-checkmark-circle-outline:before {
  content: "\e931";
}
.icon-checkmark-outline:before {
  content: "\e932";
}
.icon-checkmark-square-2-outline:before {
  content: "\e933";
}
.icon-checkmark-square-outline:before {
  content: "\e934";
}
.icon-chevron-down-outline:before {
  content: "\e935";
}
.icon-chevron-left-outline:before {
  content: "\e936";
}
.icon-chevron-right-outline:before {
  content: "\e937";
}
.icon-chevron-up-outline:before {
  content: "\e938";
}
.icon-clipboard-outline:before {
  content: "\e939";
}
.icon-clock-outline:before {
  content: "\e93a";
}
.icon-close-circle-outline:before {
  content: "\e93b";
}
.icon-close-outline:before {
  content: "\e93c";
}
.icon-close-square-outline:before {
  content: "\e93d";
}
.icon-cloud-download-outline:before {
  content: "\e93e";
}
.icon-cloud-upload-outline:before {
  content: "\e93f";
}
.icon-code-download-outline:before {
  content: "\e940";
}
.icon-code-outline:before {
  content: "\e941";
}
.icon-collapse-outline:before {
  content: "\e942";
}
.icon-color-palette-outline:before {
  content: "\e943";
}
.icon-color-picker-outline:before {
  content: "\e944";
}
.icon-compass-outline:before {
  content: "\e945";
}
.icon-copy-outline:before {
  content: "\e946";
}
.icon-corner-down-left-outline:before {
  content: "\e947";
}
.icon-corner-down-right-outline:before {
  content: "\e948";
}
.icon-corner-left-down-outline:before {
  content: "\e949";
}
.icon-corner-left-up-outline:before {
  content: "\e94a";
}
.icon-corner-right-down-outline:before {
  content: "\e94b";
}
.icon-corner-right-up-outline:before {
  content: "\e94c";
}
.icon-corner-up-left-outline:before {
  content: "\e94d";
}
.icon-corner-up-right-outline:before {
  content: "\e94e";
}
.icon-credit-card-outline:before {
  content: "\e94f";
}
.icon-crop-outline:before {
  content: "\e950";
}
.icon-cube-outline:before {
  content: "\e951";
}
.icon-diagonal-arrow-left-down-outline:before {
  content: "\e952";
}
.icon-diagonal-arrow-left-up-outline:before {
  content: "\e953";
}
.icon-diagonal-arrow-right-down-outline:before {
  content: "\e954";
}
.icon-diagonal-arrow-right-up-outline:before {
  content: "\e955";
}
.icon-done-all-outline:before {
  content: "\e956";
}
.icon-download-outline:before {
  content: "\e957";
}
.icon-droplet-off-outline:before {
  content: "\e958";
}
.icon-droplet-outline:before {
  content: "\e959";
}
.icon-edit-2-outline:before {
  content: "\e95a";
}
.icon-edit-outline:before {
  content: "\e95b";
}
.icon-email-outline:before {
  content: "\e95c";
}
.icon-expand-outline:before {
  content: "\e95d";
}
.icon-external-link-outline:before {
  content: "\e95e";
}
.icon-eye-off-2-outline:before {
  content: "\e95f";
}
.icon-eye-off-outline:before {
  content: "\e960";
}
.icon-eye-outline:before {
  content: "\e961";
}
.icon-facebook-outline:before {
  content: "\e962";
}
.icon-file-add-outline:before {
  content: "\e963";
}
.icon-file-outline:before {
  content: "\e964";
}
.icon-file-remove-outline:before {
  content: "\e965";
}
.icon-file-text-outline:before {
  content: "\e966";
}
.icon-film-outline:before {
  content: "\e967";
}
.icon-flag-outline:before {
  content: "\e968";
}
.icon-flash-off-outline:before {
  content: "\e969";
}
.icon-flash-outline:before {
  content: "\e96a";
}
.icon-flip-2-outline:before {
  content: "\e96b";
}
.icon-flip-outline:before {
  content: "\e96c";
}
.icon-folder-add-outline:before {
  content: "\e96d";
}
.icon-folder-outline:before {
  content: "\e96e";
}
.icon-folder-remove-outline:before {
  content: "\e96f";
}
.icon-funnel-outline:before {
  content: "\e970";
}
.icon-gift-outline:before {
  content: "\e971";
}
.icon-github-outline:before {
  content: "\e972";
}
.icon-globe-2-outline:before {
  content: "\e973";
}
.icon-globe-outline:before {
  content: "\e974";
}
.icon-google-outline:before {
  content: "\e975";
}
.icon-grid-outline:before {
  content: "\e976";
}
.icon-hard-drive-outline:before {
  content: "\e977";
}
.icon-hash-outline:before {
  content: "\e978";
}
.icon-headphones-outline:before {
  content: "\e979";
}
.icon-heart-outline:before {
  content: "\e97a";
}
.icon-home-outline:before {
  content: "\e97b";
}
.icon-image-outline:before {
  content: "\e97c";
}
.icon-inbox-outline:before {
  content: "\e97d";
}
.icon-info-outline:before {
  content: "\e97e";
}
.icon-keypad-outline:before {
  content: "\e97f";
}
.icon-layers-outline:before {
  content: "\e980";
}
.icon-layout-outline:before {
  content: "\e981";
}
.icon-link-2-outline:before {
  content: "\e982";
}
.icon-link-outline:before {
  content: "\e983";
}
.icon-linkedin-outline:before {
  content: "\e984";
}
.icon-list-outline:before {
  content: "\e985";
}
.icon-loader-outline:before {
  content: "\e986";
}
.icon-lock-outline:before {
  content: "\e987";
}
.icon-log-in-outline:before {
  content: "\e988";
}
.icon-log-out-outline:before {
  content: "\e989";
}
.icon-map-outline:before {
  content: "\e98a";
}
.icon-maximize-outline:before {
  content: "\e98b";
}
.icon-menu-2-outline:before {
  content: "\e98c";
}
.icon-menu-arrow-outline:before {
  content: "\e98d";
}
.icon-menu-outline:before {
  content: "\e98e";
}
.icon-message-circle-outline:before {
  content: "\e98f";
}
.icon-message-square-outline:before {
  content: "\e990";
}
.icon-mic-off-outline:before {
  content: "\e991";
}
.icon-mic-outline:before {
  content: "\e992";
}
.icon-minimize-outline:before {
  content: "\e993";
}
.icon-minus-circle-outline:before {
  content: "\e994";
}
.icon-minus-outline:before {
  content: "\e995";
}
.icon-minus-square-outline:before {
  content: "\e996";
}
.icon-monitor-outline:before {
  content: "\e997";
}
.icon-moon-outline:before {
  content: "\e998";
}
.icon-more-horizontal-outline:before {
  content: "\e999";
}
.icon-more-vertical-outline:before {
  content: "\e99a";
}
.icon-move-outline:before {
  content: "\e99b";
}
.icon-music-outline:before {
  content: "\e99c";
}
.icon-navigation-2-outline:before {
  content: "\e99d";
}
.icon-navigation-outline:before {
  content: "\e99e";
}
.icon-npm-outline:before {
  content: "\e99f";
}
.icon-options-2-outline:before {
  content: "\e9a0";
}
.icon-options-outline:before {
  content: "\e9a1";
}
.icon-pantone-outline:before {
  content: "\e9a2";
}
.icon-paper-plane-outline:before {
  content: "\e9a3";
}
.icon-pause-circle-outline:before {
  content: "\e9a4";
}
.icon-people-outline:before {
  content: "\e9a5";
}
.icon-percent-outline:before {
  content: "\e9a6";
}
.icon-person-add-outline:before {
  content: "\e9a7";
}
.icon-person-delete-outline:before {
  content: "\e9a8";
}
.icon-person-done-outline:before {
  content: "\e9a9";
}
.icon-person-outline:before {
  content: "\e9aa";
}
.icon-person-remove-outline:before {
  content: "\e9ab";
}
.icon-phone-call-outline:before {
  content: "\e9ac";
}
.icon-phone-missed-outline:before {
  content: "\e9ad";
}
.icon-phone-off-outline:before {
  content: "\e9ae";
}
.icon-phone-outline:before {
  content: "\e9af";
}
.icon-pie-chart-outline:before {
  content: "\e9b0";
}
.icon-pin-outline:before {
  content: "\e9b1";
}
.icon-play-circle-outline:before {
  content: "\e9b2";
}
.icon-plus-circle-outline:before {
  content: "\e9b3";
}
.icon-plus-outline:before {
  content: "\e9b4";
}
.icon-plus-square-outline:before {
  content: "\e9b5";
}
.icon-power-outline:before {
  content: "\e9b6";
}
.icon-pricetags-outline:before {
  content: "\e9b7";
}
.icon-printer-outline:before {
  content: "\e9b8";
}
.icon-question-mark-circle-outline:before {
  content: "\e9b9";
}
.icon-question-mark-outline:before {
  content: "\e9ba";
}
.icon-radio-button-off-outline:before {
  content: "\e9bb";
}
.icon-radio-button-on-outline:before {
  content: "\e9bc";
}
.icon-radio-outline:before {
  content: "\e9bd";
}
.icon-recording-outline:before {
  content: "\e9be";
}
.icon-refresh-outline:before {
  content: "\e9bf";
}
.icon-repeat-outline:before {
  content: "\e9c0";
}
.icon-rewind-left-outline:before {
  content: "\e9c1";
}
.icon-rewind-right-outline:before {
  content: "\e9c2";
}
.icon-save-outline:before {
  content: "\e9c3";
}
.icon-scissors-outline:before {
  content: "\e9c4";
}
.icon-search-outline:before {
  content: "\e9c5";
}
.icon-settings-2-outline:before {
  content: "\e9c6";
}
.icon-settings-outline:before {
  content: "\e9c7";
}
.icon-shake-outline:before {
  content: "\e9c8";
}
.icon-share-outline:before {
  content: "\e9c9";
}
.icon-shield-off-outline:before {
  content: "\e9ca";
}
.icon-shield-outline:before {
  content: "\e9cb";
}
.icon-shopping-bag-outline:before {
  content: "\e9cc";
}
.icon-shopping-cart-outline:before {
  content: "\e9cd";
}
.icon-shuffle-2-outline:before {
  content: "\e9ce";
}
.icon-shuffle-outline:before {
  content: "\e9cf";
}
.icon-skip-back-outline:before {
  content: "\e9d0";
}
.icon-skip-forward-outline:before {
  content: "\e9d1";
}
.icon-slash-outline:before {
  content: "\e9d2";
}
.icon-smartphone-outline:before {
  content: "\e9d3";
}
.icon-speaker-outline:before {
  content: "\e9d4";
}
.icon-square-outline:before {
  content: "\e9d5";
}
.icon-star-outline:before {
  content: "\e9d6";
}
.icon-stop-circle-outline:before {
  content: "\e9d7";
}
.icon-sun-outline:before {
  content: "\e9d8";
}
.icon-swap-outline:before {
  content: "\e9d9";
}
.icon-sync-outline:before {
  content: "\e9da";
}
.icon-text-outline:before {
  content: "\e9db";
}
.icon-thermometer-minus-outline:before {
  content: "\e9dc";
}
.icon-thermometer-outline:before {
  content: "\e9dd";
}
.icon-thermometer-plus-outline:before {
  content: "\e9de";
}
.icon-toggle-left-outline:before {
  content: "\e9df";
}
.icon-toggle-right-outline:before {
  content: "\e9e0";
}
.icon-trash-2-outline:before {
  content: "\e9e1";
}
.icon-trash-outline:before {
  content: "\e9e2";
}
.icon-trending-down-outline:before {
  content: "\e9e3";
}
.icon-trending-up-outline:before {
  content: "\e9e4";
}
.icon-tv-outline:before {
  content: "\e9e5";
}
.icon-twitter-outline:before {
  content: "\e9e6";
}
.icon-umbrella-outline:before {
  content: "\e9e7";
}
.icon-undo-outline:before {
  content: "\e9e8";
}
.icon-unlock-outline:before {
  content: "\e9e9";
}
.icon-upload-outline:before {
  content: "\e9ea";
}
.icon-video-off-outline:before {
  content: "\e9eb";
}
.icon-video-outline:before {
  content: "\e9ec";
}
.icon-volume-down-outline:before {
  content: "\e9ed";
}
.icon-volume-mute-outline:before {
  content: "\e9ee";
}
.icon-volume-off-outline:before {
  content: "\e9ef";
}
.icon-volume-up-outline:before {
  content: "\e9f0";
}
.icon-wifi-off-outline:before {
  content: "\e9f1";
}
.icon-wifi-outline:before {
  content: "\e9f2";
}
.site-footer {
  text-align: center;
  font-size: 12px;
  padding: 32px 16px;
}
.site-footer .slogan {
  margin-bottom: 24px;
}
.site-footer .social-container {
  margin-bottom: 24px;
  font-size: 16px;
}
.site-footer .social-container a {
  margin: 0 8px;
}
.site-header-container {
  position: fixed;
  right: 0;
  left: 0;
  z-index: 1024;
  background: #fff;
  height: 56px;
}
.site-header {
  height: 56px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 768px;
  margin: 0 auto;
  box-shadow: inset 0px -1px 0px #fafafa;
}
.site-header .left {
  display: flex;
}
.site-header .left .avatar {
  border-radius: 50%;
}
.site-header .left .site-title {
  margin: 0 16px;
  font-size: 24px;
  line-height: 32px;
}
.site-header .right .icon {
  font-size: 24px;
  cursor: pointer;
}
.menu-container {
  display: none;
  position: fixed;
  top: 56px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1024;
}
.menu-container .menu-list {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: -40px;
}
.menu-container .menu {
  display: inline-block;
  padding: 2px 8px;
  font-size: 22px;
  margin: 16px 0;
  font-weight: bold;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
a,
.link {
  color: var(--c-base-black);
  text-decoration: none;
  cursor: pointer;
  background: transparent 0 0;
}
a:hover,
.link:hover,
a:focus,
.link:focus,
a:active,
.link:active {
  outline: 0;
}
a.purple-link {
  position: relative;
  background: linear-gradient(180deg, transparent 70%, rgba(101, 125, 225, 0.4) 0);
}
.main {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.content-container {
  flex: 1;
  padding: 48px 16px 32px;
}
.post-item {
  display: flex;
  justify-content: space-between;
  padding: 32px 0;
  max-height: 200px;
}
.post-item .content {
  flex: 1;
}
.post-item .content .post-title {
  font-size: 22px;
  color: #0C1E29;
  display: inline-block;
}
.post-item .content .post-abstract {
  font-size: 14px;
  margin: 16px 0 8px;
  flex: 1;
  color: #4E616C;
  line-height: 24px;
  position: relative;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.post-item .content .post-abstract strong {
  font-weight: bolder;
}
.post-item .content .post-abstract a {
  font-weight: 600;
  background: linear-gradient(180deg, transparent 70%, rgba(101, 125, 225, 0.4) 0);
}
.post-item .content .post-abstract code {
  padding: 0 3px;
  margin: 0 2px;
  background: rgba(195, 195, 195, 0.41);
  font-size: 0.9em;
  border-radius: 2px;
}
.post-item .feature-container {
  margin-left: 16px;
  flex-shrink: 0;
  width: 240px;
  height: 135px;
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.post-info {
  color: var(--c-base-purple);
  font-size: 12px;
}
.post-info span {
  margin-right: 16px;
}
.post-info .icon {
  font-size: 12px;
  margin-right: 4px;
}
.post-info a {
  color: var(--c-base-purple);
}
@media (max-width: 600px) {
  .post-item {
    flex-direction: column;
    height: auto;
    padding: 24px 0;
    max-height: none;
  }
  .post-item .content {
    order: 2;
    display: block;
  }
  .post-item .content .post-title {
    margin-top: 16px;
    font-size: 18px;
  }
  .post-item .feature-container {
    margin-left: 0;
    order: 1;
    height: 0;
    width: 100%;
    padding-top: 56%;
    position: relative;
    background-size: cover;
    background-position: center;
  }
}
.pagination-container {
  padding: 24px 0;
  overflow: hidden;
}
.pagination-container .prev,
.pagination-container .next {
  display: flex;
  align-items: center;
  padding: 2px 8px;
  background: linear-gradient(180deg, transparent 70%, rgba(101, 125, 225, 0.4) 0);
}
.pagination-container .prev {
  float: left;
}
.pagination-container .next {
  float: right;
}
.post-detail {
  padding: 32px 0;
}
.post-detail .post-title {
  font-size: 32px;
  margin: 24px 0;
  color: var(--c-base-black);
}
.post-detail .post-detail-info {
  padding: 0 0 32px;
}
.post-detail .feature-container {
  padding-top: 56.25%;
  background-size: cover;
  background-position: center;
  border-radius: 2px;
  box-shadow: 0 0 30px #eee;
}
.next-post {
  text-align: center;
}
.next-post .post-title {
  display: inline-block;
  font-size: 22px;
}
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  padding: 16px 0;
  color: #0C1E29;
}
.post-content a {
  font-weight: 600;
  background: linear-gradient(180deg, transparent 70%, rgba(101, 125, 225, 0.4) 0);
}
.post-content img {
  display: block;
  box-shadow: 0 0 30px #eee;
  max-width: 100%;
  border-radius: 2px;
  margin: 16px auto;
}
.post-content p {
  line-height: 1.725;
  margin-bottom: 16px;
  color: var(--c-base-blacklight);
}
.post-content p code {
  padding: 0 3px;
  margin: 0 2px;
  background: rgba(195, 195, 195, 0.41);
  font-size: 0.9em;
  border-radius: 2px;
  display: inline-block;
}
.post-content code {
  color: #476582;
  padding: 0.25rem 0.5rem;
  margin: 0;
  font-size: 0.85em;
  background-color: rgba(27, 31, 35, 0.05);
  border-radius: 3px;
  display: inline-block;
}
.post-content blockquote {
  background: #f3f5f7;
  padding: 16px;
  border-left: 2px solid var(--c-base-purple);
  margin-bottom: 16px;
}
.post-content blockquote p {
  margin-bottom: 0;
}
.post-content pre {
  margin-bottom: 16px;
}
.post-content pre code {
  font-size: 14px;
  font-family: 'Source Code Pro', Consolas, Menlo, Monaco, 'Courier New', monospace;
  padding: 2em 1em 1em;
  border-radius: 5px;
  line-height: 1.375;
  position: relative;
  background: #fafafa;
  display: block;
}
.post-content pre code:after {
  content: 'CODE';
  display: block;
  position: absolute;
  left: 8px;
  top: 4px;
  font-size: 14px;
  font-weight: bold;
  color: #ccc;
}
.post-content table {
  border-collapse: collapse;
  margin: 1rem 0;
  display: block;
  overflow-x: auto;
}
.post-content tr {
  border-top: 1px solid #dfe2e5;
}
.post-content td,
.post-content th {
  border: 1px solid #dfe2e5;
  padding: 0.6em 1em;
}
.post-content ul,
.post-content ol {
  color: var(--c-base-blacklight);
  padding-left: 24px;
  line-height: 1.725;
  margin-bottom: 16px;
}
.post-content strong {
  font-weight: bolder;
}
.current-tag-container {
  padding-top: 32px;
  color: var(--c-base-purple);
}
.archives-container {
  padding: 32px 0;
}
.archives-container .year {
  font-size: 24px;
  margin: 24px 0;
  color: var(--c-base-purple);
}
.archives-container .post {
  margin-bottom: 32px;
}
.archives-container .post .post-title {
  font-size: 18px;
  font-weight: normal;
  position: relative;
  transition: all 0.382s;
}
.archives-container .post .post-title:before {
  content: '';
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-base-purple);
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.382s;
}
.archives-container .post .post-title:hover {
  transform: translateX(8px);
}
.archives-container .post .post-title:hover:before {
  left: -8px;
  opacity: 1;
}
.tags-container {
  padding: 32px 0;
}
.tags-container .tag {
  color: var(--c-base-purple);
  padding: 4px 8px;
  display: inline-block;
  border: 2px solid var(--c-base-purple);
  margin: 0 16px 16px 0;
  border-radius: 16px;
}

      body {
        font-size: 18px;
      }