/* Unify the homepage hero and content area into one visual system. */
#web_bg {
  filter: saturate(0.82) brightness(0.82);
  transform: scale(1.02);
}

#web_bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 29, 38, 0.28) 0%, rgba(13, 29, 38, 0.12) 24%, rgba(250, 237, 231, 0.2) 100%),
    radial-gradient(circle at top, rgba(255, 223, 210, 0.2), transparent 42%);
  pointer-events: none;
}

#page-header::before {
  background-color: rgba(10, 21, 28, 0.18) !important;
}

/* Let the global background show through on top banner sections. */
#page-header.full_page,
#page-header.not-home-page {
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}

#page-header.full_page::before,
#page-header.not-home-page::before {
  background: transparent !important;
}

#recent-posts .recent-post-item,
#aside-content .card-widget,
#post,
#page,
#archive {
  background: rgba(255, 255, 255, 0.78) !important;
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 18px 45px rgba(15, 37, 48, 0.14);
}

#recent-posts .recent-post-item:hover,
#aside-content .card-widget:hover {
  box-shadow: 0 24px 55px rgba(15, 37, 48, 0.18);
}

#recent-posts .recent-post-item .post_cover img {
  filter: saturate(0.92) contrast(0.98);
}

#page-header.nav-fixed #nav,
#page-header.not-top-img #nav {
  background: rgba(244, 241, 238, 0.76);
}

@media screen and (max-width: 768px) {
  #recent-posts .recent-post-item,
  #aside-content .card-widget,
  #post,
  #page,
  #archive {
    background: rgba(255, 255, 255, 0.84) !important;
  }
}

/* VS Code-like code blocks for regular articles and fullpage mode. */
.container figure.highlight,
.container pre {
  --hl-color: #d4d4d4;
  --hl-bg: #1e1e1e;
  --hltools-bg: #252526;
  --hltools-color: #c5c5c5;
  --hlnumber-bg: #1e1e1e;
  --hlnumber-color: #858585;
  --hlscrollbar-bg: #3e3e42;
  --hlexpand-bg: linear-gradient(180deg, rgba(30, 30, 30, 0.35), rgba(30, 30, 30, 0.96));
  background: var(--hl-bg) !important;
  color: var(--hl-color) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 32, 0.22);
}

.container figure.highlight .highlight-tools,
.container figure.highlight .gutter pre,
.container figure.highlight .code pre,
.container figure.highlight pre,
.container figure.highlight table,
.container pre code {
  background: var(--hl-bg) !important;
  color: var(--hl-color) !important;
}

.container figure.highlight .highlight-tools {
  background: var(--hltools-bg) !important;
  color: var(--hltools-color) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.container figure.highlight .gutter pre {
  background: var(--hlnumber-bg) !important;
  color: var(--hlnumber-color) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.container figure.highlight figcaption,
.container figure.highlight .caption,
.container figure.highlight figcaption a,
.container figure.highlight .caption a,
.container .highlight-tools .code-lang {
  color: #c5c5c5 !important;
}

.container figure.highlight .line.marked {
  background-color: rgba(38, 79, 120, 0.45) !important;
}

.container figure.highlight table::-webkit-scrollbar-thumb,
.container figure.highlight.default pre::-webkit-scrollbar-thumb {
  background: var(--hlscrollbar-bg) !important;
}

.container :not(pre) > code {
  background: #f7f1e3;
  color: #7a5f2b;
  border: 1px solid #eadfc3;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.container figure.highlight pre .comment {
  color: #6a9955 !important;
}

.container figure.highlight pre .keyword,
.container figure.highlight pre .title,
.container figure.highlight pre .css .hexcolor,
.container figure.highlight pre .meta {
  color: #569cd6 !important;
}

.container figure.highlight pre .string,
.container figure.highlight pre .value,
.container figure.highlight pre .inheritance,
.container figure.highlight pre .header,
.container figure.highlight pre .ruby .symbol,
.container figure.highlight pre .xml .cdata,
.container figure.highlight pre .special,
.container figure.highlight pre .formula {
  color: #ce9178 !important;
}

.container figure.highlight pre .number,
.container figure.highlight pre .preprocessor,
.container figure.highlight pre .literal,
.container figure.highlight pre .params,
.container figure.highlight pre .constant,
.container figure.highlight pre .command,
.container figure.highlight pre .built_in {
  color: #b5cea8 !important;
}

.container figure.highlight pre .function,
.container figure.highlight pre .python .decorator,
.container figure.highlight pre .python .title,
.container figure.highlight pre .ruby .function .title,
.container figure.highlight pre .ruby .title .keyword,
.container figure.highlight pre .perl .sub,
.container figure.highlight pre .javascript .title,
.container figure.highlight pre .coffeescript .title {
  color: #dcdcaa !important;
}

.container figure.highlight pre .variable,
.container figure.highlight pre .attribute,
.container figure.highlight pre .regexp,
.container figure.highlight pre .ruby .constant,
.container figure.highlight pre .xml .tag .title,
.container figure.highlight pre .xml .pi,
.container figure.highlight pre .xml .doctype,
.container figure.highlight pre .html .doctype,
.container figure.highlight pre .css .id,
.container figure.highlight pre .tag .name,
.container figure.highlight pre .css .class,
.container figure.highlight pre .css .pseudo,
.container figure.highlight pre .tag .attr,
.container figure.highlight pre .javascript .function {
  color: #9cdcfe !important;
}

.container figure.highlight pre .tag {
  color: #808080 !important;
}

/* Keep Butterfly code fullpage mode above the glass cards without overriding layout. */
.container figure.highlight.code-fullpage {
  z-index: 999999 !important;
}