@font-face {
  font-family: 'Zpix';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/zpix.ttf') format('truetype');
}

@font-face {
  font-family: 'Press Start 2P';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/press-start-2p.ttf') format('truetype');
}

body {
  background: #24283b !important;
}

#web_bg {
  background-color: #24283b !important;
  background-image: url("/img/index_img.jpg") !important;
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}

#web_bg.bg-animation {
  animation: none !important;
}

[data-theme='dark'] #web_bg::before {
  background-color: transparent !important;
}

#page-header:not(.not-top-img) {
  background-color: transparent !important;
  background-image: none !important;
}

#page-header:not(.not-top-img)::before {
  background-color: rgba(36, 40, 59, 0.42) !important;
}

#footer {
  background: #24283b !important;
}

#footer::before {
  background-color: rgba(36, 40, 59, 0.82) !important;
}

#aside-content .card-widget,
.layout > div:first-child:not(.nc),
#recent-posts .recent-post-item {
  background: rgba(36, 40, 59, 0.86) !important;
  border: 1px solid rgba(65, 72, 104, 0.78) !important;
  box-shadow: 0 8px 24px rgba(15, 16, 24, 0.28) !important;
}

.avatar-img {
  border: 3px solid #7aa2f7 !important;
  box-shadow: 0 0 0 4px rgba(122, 162, 247, 0.18), 0 10px 28px rgba(15, 16, 24, 0.35) !important;
  background: rgba(36, 40, 59, 0.82) !important;
}

.avatar-img img {
  border-radius: inherit;
}

#site-title,
#blog-info .site-name {
  color: #7aa2f7 !important;
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 0 8px rgba(122, 162, 247, 0.42), 2px 2px 0 rgba(36, 40, 59, 0.88) !important;
}

#site-title {
  line-height: 1.6 !important;
}

#blog-info .site-name {
  font-size: 0.78rem !important;
}

#nav,
#sidebar #sidebar-menus,
#aside-content,
#footer,
#rightside,
#pagination,
#page-header #site-title,
#page-header #site-subtitle,
#post-info,
#page .page-title,
#archive,
#tag,
#category,
.search-dialog .search-nav,
.search-dialog .search-result-list {
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace !important;
  letter-spacing: 0 !important;
}

#aside-content,
#footer,
#sidebar #sidebar-menus,
#pagination,
#archive,
#tag,
#category,
.search-dialog {
  font-size: 0.72rem;
  line-height: 1.8;
}

#recent-posts .article-title,
#recent-posts .article-meta-wrap,
#aside-content .item-headline,
#aside-content .author-info-name,
#aside-content .site-data,
#aside-content #card-info-btn,
#sidebar #sidebar-menus .site-data,
#sidebar #sidebar-menus .site-page,
#footer .footer-copyright,
#footer .framework-info {
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace !important;
  letter-spacing: 0 !important;
}

#recent-posts .content,
#article-container,
.post-content,
#post,
#post p,
#post li,
#post table,
#post blockquote {
  font-family: var(--global-font), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

#nav,
#nav a,
#nav span.site-page,
#nav .site-name,
#sidebar #sidebar-menus,
#sidebar #sidebar-menus a,
#aside-content,
#aside-content a,
#aside-content .item-headline,
#aside-content .author-info-name,
#aside-content .author-info-description,
#aside-content .headline,
#aside-content .length-num,
#aside-content time,
#footer,
#footer a,
#rightside button,
#pagination,
#pagination a,
#archive,
#archive a,
#tag,
#tag a,
#category,
#category a,
#page .page-title,
#page-header #site-title,
#page-header #site-subtitle,
#post-info,
#post-info a,
#recent-posts .article-title,
#recent-posts .article-meta-wrap,
#recent-posts .article-meta-wrap a,
.search-dialog,
.search-dialog a {
  color: #7aa2f7 !important;
}

#recent-posts .content,
#article-container,
#article-container *,
.post-content,
.post-content *,
#post p,
#post li,
#post table,
#post blockquote {
  color: var(--font-color) !important;
}

#recent-posts .article-title,
#recent-posts .article-meta-wrap,
#recent-posts .article-meta-wrap *,
#post-info .post-title,
#post-info #post-meta,
#post-info #post-meta *,
#article-container h1,
#article-container h2,
#article-container h3,
#article-container h4,
#article-container h5,
#article-container h6,
#post .tag_share,
#post .tag_share *,
#post .post-copyright,
#post .post-copyright * {
  color: rgba(255, 255, 255, 0.9) !important;
  font-family: var(--global-font), system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  text-shadow: none !important;
}

#recent-posts .article-title:hover,
#recent-posts .article-meta-wrap a:hover,
#post-info #post-meta a:hover,
#post .tag_share a:hover {
  color: #c0caf5 !important;
}

#body-wrap.type-categories #page,
#body-wrap.type-tags #page {
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace !important;
  color: #7aa2f7 !important;
}

#body-wrap.type-categories .category-lists,
#body-wrap.type-categories .category-list,
#body-wrap.type-categories .category-list-item,
#body-wrap.type-categories .category-list-link,
#body-wrap.type-categories .category-list-count {
  color: #7aa2f7 !important;
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace !important;
  font-size: 1.15rem !important;
  line-height: 2.2 !important;
}

#body-wrap.type-tags .tag-cloud-title,
#body-wrap.type-tags .tag-cloud-list,
#body-wrap.type-tags .tag-cloud-list a {
  color: #7aa2f7 !important;
  font-family: 'Zpix', 'Press Start 2P', 'Courier New', monospace !important;
  font-size: 1.1rem !important;
  line-height: 2.2 !important;
}

#body-wrap.type-categories .category-list-link:hover,
#body-wrap.type-tags .tag-cloud-list a:hover {
  color: #c0caf5 !important;
  text-shadow: 0 0 8px rgba(122, 162, 247, 0.55) !important;
}

.fa,
.fas,
.fa-solid {
  font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
}

.far,
.fa-regular {
  font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
  font-weight: 400 !important;
}

.fab,
.fa-brands {
  font-family: 'Font Awesome 7 Brands', 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
  font-weight: 400 !important;
}

#body-wrap #post-info #post-meta i.fa,
#body-wrap #post-info #post-meta i.fas,
#body-wrap #post-info #post-meta i.far,
#body-wrap #post-info #post-meta i.fa-solid,
#body-wrap #post-info #post-meta i.fa-regular,
#body-wrap #post-info #post-meta i.fa-brands,
#body-wrap #recent-posts .article-meta-wrap i.fa,
#body-wrap #recent-posts .article-meta-wrap i.fas,
#body-wrap #recent-posts .article-meta-wrap i.far,
#body-wrap #recent-posts .article-meta-wrap i.fa-solid,
#body-wrap #recent-posts .article-meta-wrap i.fa-regular,
#body-wrap #recent-posts .article-meta-wrap i.fa-brands,
#body-wrap #nav i.fa,
#body-wrap #nav i.fas,
#body-wrap #nav i.far,
#body-wrap #sidebar-menus i.fa,
#body-wrap #sidebar-menus i.fas,
#body-wrap #sidebar-menus i.far,
#body-wrap #aside-content i.fa,
#body-wrap #aside-content i.fas,
#body-wrap #aside-content i.far {
  font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
  text-rendering: auto !important;
}

#body-wrap i.fas,
#body-wrap i.fa-solid,
#body-wrap #post-info #post-meta i.fas,
#body-wrap #recent-posts .article-meta-wrap i.fas {
  font-weight: 900 !important;
}

#body-wrap i.far,
#body-wrap i.fa-regular,
#body-wrap #post-info #post-meta i.far,
#body-wrap #recent-posts .article-meta-wrap i.far {
  font-weight: 400 !important;
}

#body-wrap i.fab,
#body-wrap i.fa-brands {
  font-family: 'Font Awesome 7 Brands', 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
  font-weight: 400 !important;
}

#body-wrap #post .post-copyright i.fa,
#body-wrap #post .post-copyright i.fas,
#body-wrap #post .post-copyright i.far,
#body-wrap #post .post-copyright i.fa-solid,
#body-wrap #post .post-copyright i.fa-regular,
#body-wrap #post .post-copyright i.fa-brands,
#body-wrap #post .tag_share i.fa,
#body-wrap #post .tag_share i.fas,
#body-wrap #post .tag_share i.far,
#body-wrap #rightside i.fa,
#body-wrap #rightside i.fas,
#body-wrap #rightside i.far {
  font-family: 'Font Awesome 7 Free', 'Font Awesome 6 Free', 'Font Awesome 5 Free' !important;
  font-style: normal !important;
  font-variant: normal !important;
  line-height: 1 !important;
  text-rendering: auto !important;
}

#body-wrap #post .post-copyright i.fas,
#body-wrap #post .post-copyright i.fa-solid,
#body-wrap #post .tag_share i.fas,
#body-wrap #rightside i.fas,
#body-wrap #rightside i.fa-solid {
  font-weight: 900 !important;
}

#body-wrap #post .post-copyright i.far,
#body-wrap #post .post-copyright i.fa-regular,
#body-wrap #post .tag_share i.far,
#body-wrap #rightside i.far,
#body-wrap #rightside i.fa-regular {
  font-weight: 400 !important;
}

#body-wrap #post .post-copyright i.fa-brands,
#body-wrap #aside-content i.fab,
#body-wrap #aside-content i.fa-brands,
#body-wrap #rightside i.fab,
#body-wrap #rightside i.fa-brands {
  font-family: 'Font Awesome 7 Brands', 'Font Awesome 6 Brands', 'Font Awesome 5 Brands' !important;
  font-weight: 400 !important;
}

#body-wrap #post .tag_share .social-share,
#body-wrap #post .tag_share .social-share *,
#body-wrap #post .tag_share .social-share .social-share-icon,
#body-wrap #post .tag_share .social-share .social-share-icon::before {
  font-family: 'iconfont' !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important;
}

#body-wrap #post .tag_share .social-share .social-share-icon {
  line-height: 32px !important;
}

@media screen and (max-width: 768px) {
  body {
    background-color: #24283b !important;
  }

  #web_bg {
    background-attachment: scroll !important;
    background-position: center top !important;
  }

  #page-header.full_page {
    height: 54vh !important;
    min-height: 360px !important;
  }

  #page-header.post-bg,
  #page-header.not-home-page {
    height: 42vh !important;
    min-height: 300px !important;
  }

  #page-header:not(.not-top-img)::before {
    background-color: rgba(36, 40, 59, 0.48) !important;
  }

  #nav {
    background: rgba(36, 40, 59, 0.78) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
  }

  #blog-info .site-name {
    font-size: 0.72rem !important;
    line-height: 1.6 !important;
  }

  #site-title {
    font-size: 2rem !important;
    line-height: 1.55 !important;
    padding: 0 16px !important;
    word-break: break-word !important;
  }

  #sidebar #sidebar-menus {
    background: rgba(36, 40, 59, 0.96) !important;
    color: #7aa2f7 !important;
  }

  #sidebar #sidebar-menus .site-page,
  #sidebar #sidebar-menus .headline,
  #sidebar #sidebar-menus .length-num {
    color: #7aa2f7 !important;
    font-size: 0.82rem !important;
    line-height: 1.9 !important;
  }

  .layout {
    padding: 0 12px !important;
  }

  #recent-posts,
  #aside-content,
  .layout > div:first-child:not(.nc) {
    width: 100% !important;
  }

  #recent-posts .recent-post-item,
  #aside-content .card-widget,
  .layout > div:first-child:not(.nc) {
    margin-bottom: 14px !important;
    background: rgba(36, 40, 59, 0.88) !important;
    border: 1px solid rgba(122, 162, 247, 0.28) !important;
    box-shadow: 0 8px 22px rgba(15, 16, 24, 0.3) !important;
  }

  #recent-posts .article-title {
    font-size: 1rem !important;
    line-height: 1.6 !important;
  }

  #recent-posts .article-meta-wrap {
    font-size: 0.68rem !important;
    line-height: 1.8 !important;
  }

  #aside-content,
  #aside-content .card-widget,
  #footer,
  #pagination {
    font-size: 0.76rem !important;
    line-height: 1.85 !important;
  }

  #post {
    padding: 1rem !important;
  }

  #post-info {
    padding: 0 14px !important;
  }

  #post-info .post-title {
    font-size: 1.45rem !important;
    line-height: 1.5 !important;
  }

  #post-info #post-meta {
    font-size: 0.78rem !important;
    line-height: 1.8 !important;
  }

  #post .post-copyright,
  #post .tag_share {
    font-size: 0.78rem !important;
    line-height: 1.8 !important;
  }

  #rightside {
    right: 8px !important;
  }
}

@media screen and (max-width: 420px) {
  #site-title {
    font-size: 1.7rem !important;
  }

  #blog-info .site-name {
    font-size: 0.66rem !important;
  }

  #recent-posts .article-title,
  #post-info .post-title {
    word-break: break-word !important;
  }
}

body.read-mode {
  --font-color: #1f1f1f !important;
  --readmode-light-color: #ead6a3 !important;
  --white: #1f1f1f !important;
  --light-grey: #3a3326 !important;
  --gray: #9a855b !important;
  --hr-border: rgba(90, 70, 35, 0.35) !important;
  --hr-before-color: rgba(90, 70, 35, 0.55) !important;
  --highlight-bg: #ddc78f !important;
  --exit-btn-bg: #c8ad68 !important;
  --exit-btn-color: #1f1f1f !important;
  --exit-btn-hover: #b99a4f !important;
  background: #ead6a3 !important;
  color: #1f1f1f !important;
}

body.read-mode #post,
body.read-mode #article-container,
body.read-mode .post-content,
body.read-mode .container,
body.read-mode blockquote,
body.read-mode #post-info {
  background: transparent !important;
  color: #1f1f1f !important;
}

body.read-mode #article-container,
body.read-mode #article-container *,
body.read-mode #post-info,
body.read-mode #post-info *,
body.read-mode #post-info .post-title,
body.read-mode #post-info #post-meta,
body.read-mode #post-info #post-meta *,
body.read-mode #post-info a,
body.read-mode .post-content,
body.read-mode .post-content * {
  color: #1f1f1f !important;
  text-shadow: none !important;
}

body.read-mode #article-container a,
body.read-mode .post-content a {
  color: #6f5a22 !important;
}

body.read-mode .exit-readmode {
  border: 1px solid rgba(90, 70, 35, 0.35) !important;
}

#article-container figure.highlight,
#article-container figure.highlight table,
#article-container figure.highlight pre,
#article-container figure.highlight .code,
#article-container figure.highlight .code pre,
.post-content figure.highlight,
.post-content figure.highlight table,
.post-content figure.highlight pre,
.post-content figure.highlight .code,
.post-content figure.highlight .code pre {
  background: #1f2335 !important;
  color: #c0caf5 !important;
}

#article-container figure.highlight .gutter pre,
.post-content figure.highlight .gutter pre {
  background: #1a1b26 !important;
  color: #565f89 !important;
}

#article-container .highlight-tools,
.post-content .highlight-tools {
  background: #1a1b26 !important;
  color: #7aa2f7 !important;
}

#article-container figure.highlight .line,
#article-container figure.highlight .line span,
.post-content figure.highlight .line,
.post-content figure.highlight .line span {
  color: #c0caf5 !important;
}

#article-container figure.highlight .comment,
#article-container figure.highlight .quote,
.post-content figure.highlight .comment,
.post-content figure.highlight .quote {
  color: #565f89 !important;
  font-style: italic !important;
}

#article-container figure.highlight .keyword,
#article-container figure.highlight .selector-tag,
#article-container figure.highlight .subst,
.post-content figure.highlight .keyword,
.post-content figure.highlight .selector-tag,
.post-content figure.highlight .subst {
  color: #bb9af7 !important;
}

#article-container figure.highlight .built_in,
#article-container figure.highlight .type,
#article-container figure.highlight .class .title,
.post-content figure.highlight .built_in,
.post-content figure.highlight .type,
.post-content figure.highlight .class .title {
  color: #7dcfff !important;
}

#article-container figure.highlight .string,
#article-container figure.highlight .regexp,
#article-container figure.highlight .symbol,
#article-container figure.highlight .bullet,
.post-content figure.highlight .string,
.post-content figure.highlight .regexp,
.post-content figure.highlight .symbol,
.post-content figure.highlight .bullet {
  color: #9ece6a !important;
}

#article-container figure.highlight .number,
#article-container figure.highlight .literal,
#article-container figure.highlight .variable,
#article-container figure.highlight .template-variable,
.post-content figure.highlight .number,
.post-content figure.highlight .literal,
.post-content figure.highlight .variable,
.post-content figure.highlight .template-variable {
  color: #ff9e64 !important;
}

#article-container figure.highlight .title,
#article-container figure.highlight .function,
#article-container figure.highlight .params,
.post-content figure.highlight .title,
.post-content figure.highlight .function,
.post-content figure.highlight .params {
  color: #7aa2f7 !important;
}

#article-container figure.highlight .attr,
#article-container figure.highlight .attribute,
#article-container figure.highlight .name,
#article-container figure.highlight .tag,
.post-content figure.highlight .attr,
.post-content figure.highlight .attribute,
.post-content figure.highlight .name,
.post-content figure.highlight .tag {
  color: #f7768e !important;
}

#article-container figure.highlight .meta,
#article-container figure.highlight .operator,
#article-container figure.highlight .punctuation,
.post-content figure.highlight .meta,
.post-content figure.highlight .operator,
.post-content figure.highlight .punctuation {
  color: #89ddff !important;
}

#article-container .highlight-tools .code-lang,
.post-content .highlight-tools .code-lang {
  text-transform: none !important;
}

#article-container figure.highlight .line .comment,
#article-container figure.highlight .line .quote,
.post-content figure.highlight .line .comment,
.post-content figure.highlight .line .quote {
  color: #565f89 !important;
  font-style: italic !important;
}

#article-container figure.highlight .line .keyword,
#article-container figure.highlight .line .selector-tag,
#article-container figure.highlight .line .subst,
.post-content figure.highlight .line .keyword,
.post-content figure.highlight .line .selector-tag,
.post-content figure.highlight .line .subst {
  color: #bb9af7 !important;
}

#article-container figure.highlight .line .built_in,
#article-container figure.highlight .line .type,
#article-container figure.highlight .line .class .title,
.post-content figure.highlight .line .built_in,
.post-content figure.highlight .line .type,
.post-content figure.highlight .line .class .title {
  color: #7dcfff !important;
}

#article-container figure.highlight .line .string,
#article-container figure.highlight .line .regexp,
#article-container figure.highlight .line .symbol,
#article-container figure.highlight .line .bullet,
.post-content figure.highlight .line .string,
.post-content figure.highlight .line .regexp,
.post-content figure.highlight .line .symbol,
.post-content figure.highlight .line .bullet {
  color: #9ece6a !important;
}

#article-container figure.highlight .line .number,
#article-container figure.highlight .line .literal,
#article-container figure.highlight .line .variable,
#article-container figure.highlight .line .template-variable,
.post-content figure.highlight .line .number,
.post-content figure.highlight .line .literal,
.post-content figure.highlight .line .variable,
.post-content figure.highlight .line .template-variable {
  color: #ff9e64 !important;
}

#article-container figure.highlight .line .title,
#article-container figure.highlight .line .function,
#article-container figure.highlight .line .params,
.post-content figure.highlight .line .title,
.post-content figure.highlight .line .function,
.post-content figure.highlight .line .params {
  color: #7aa2f7 !important;
}