html,
body {
  background: #0f1720;
  color-scheme: dark;
}

:root,
[data-theme='dark'],
[data-theme='light'] {
  --global-bg: #0f1720;
  --card-bg: rgba(23, 32, 51, 0.96);
  --font-color: rgba(232, 238, 247, 0.93);
  --text-highlight-color: #f8fafc;
  --card-meta: rgba(170, 183, 200, 0.78);
  --btn-bg: #203149;
  --btn-hover-color: #7dd3fc;
  --blockquote-color: rgba(232, 238, 247, 0.86);
  --mark-bg: rgba(12, 20, 32, 0.50);
  --hr-border: rgba(125, 211, 252, 0.12);
}

#body-wrap,
[data-theme='dark'] #body-wrap,
[data-theme='light'] #body-wrap {
  background:
    radial-gradient(circle at 24% -8%, rgba(96, 165, 250, 0.13), transparent 34rem),
    radial-gradient(circle at 90% 8%, rgba(94, 234, 212, 0.055), transparent 32rem),
    linear-gradient(180deg, #111b2a 0%, #101827 48%, #0f1720 100%);
}

#web_bg {
  background: #0f1720 url('/img/covers/site-bg.svg') center / cover fixed no-repeat !important;
  opacity: 0.13;
}

#page-header {
  background-color: #0f1720 !important;
  transition: none !important;
}

#nav {
  background: rgba(15, 23, 32, 0.28) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: none;
}

#page-header.nav-fixed #nav,
#nav.show,
#nav.hide-menu,
#nav:hover {
  background: rgba(15, 23, 32, 0.68) !important;
  border-bottom: 1px solid rgba(125, 211, 252, 0.07);
  box-shadow: 0 8px 24px rgba(3, 7, 18, 0.14) !important;
}

#nav a,
#nav #site-name,
#nav .menus_items .menus_item .menus_item_child li a {
  color: rgba(232, 238, 247, 0.92) !important;
  text-shadow: 0 4px 18px rgba(3, 7, 18, 0.42);
}

#nav .menus_items .menus_item .menus_item_child {
  background: rgba(17, 27, 42, 0.94) !important;
  border: 1px solid rgba(125, 211, 252, 0.10);
  box-shadow: 0 18px 42px rgba(3, 7, 18, 0.30);
}

#darkmode,
#rightside #darkmode {
  display: none !important;
}

#article-container,
#aside-content,
[data-theme='dark'] #article-container,
[data-theme='dark'] #aside-content,
[data-theme='light'] #article-container,
[data-theme='light'] #aside-content {
  color: var(--font-color);
}

#content-inner,
#aside-content .card-widget,
.layout > div:first-child:not(.recent-posts),
[data-theme='dark'] #content-inner,
[data-theme='dark'] #aside-content .card-widget,
[data-theme='dark'] .layout > div:first-child:not(.recent-posts),
[data-theme='light'] #content-inner,
[data-theme='light'] #aside-content .card-widget,
[data-theme='light'] .layout > div:first-child:not(.recent-posts) {
  background:
    linear-gradient(180deg, rgba(24, 36, 58, 0.96), rgba(18, 29, 47, 0.95));
  border: 1px solid rgba(125, 211, 252, 0.10);
  box-shadow: 0 22px 60px rgba(3, 7, 18, 0.26);
}

.recent-post-item,
#pagination .pagination-related,
.relatedPosts > .relatedPosts-list > div,
.relatedPosts > .relatedPosts-list > a,
[data-theme='dark'] .recent-post-item,
[data-theme='dark'] #pagination .pagination-related,
[data-theme='dark'] .relatedPosts > .relatedPosts-list > div,
[data-theme='dark'] .relatedPosts > .relatedPosts-list > a,
[data-theme='light'] .recent-post-item,
[data-theme='light'] #pagination .pagination-related,
[data-theme='light'] .relatedPosts > .relatedPosts-list > div,
[data-theme='light'] .relatedPosts > .relatedPosts-list > a {
  background: rgba(23, 32, 51, 0.92);
  border: 1px solid rgba(125, 211, 252, 0.075);
  box-shadow: 0 18px 44px rgba(3, 7, 18, 0.20);
}

#page-header:not(.not-top-img)::before {
  background:
    linear-gradient(180deg, rgba(7, 12, 20, 0.08) 0%, rgba(7, 12, 20, 0.22) 60%, rgba(7, 12, 20, 0.42) 100%),
    radial-gradient(circle at 50% 24%, rgba(232, 238, 247, 0.055), transparent 34rem);
}

#page-header #site-title,
#page-header #site-subtitle,
#page-header #scroll-down .scroll-down-effects,
#post-info .post-title,
#page-site-info #site-title {
  text-shadow: 0 9px 30px rgba(3, 7, 18, 0.56);
}

#post-info #post-meta,
#post-info #post-meta a,
#page-header #site-subtitle {
  color: rgba(232, 238, 247, 0.82) !important;
}

#article-container a {
  color: #7dd3fc;
}

#article-container blockquote {
  background: rgba(15, 23, 32, 0.45);
  border-left-color: rgba(125, 211, 252, 0.48);
}

@media (max-width: 768px) {
  #nav {
    background: rgba(15, 23, 32, 0.52) !important;
  }

  #page-header.nav-fixed #nav,
  #nav.show,
  #nav:hover {
    background: rgba(15, 23, 32, 0.78) !important;
  }
}

#article-container img {
  background: rgba(232, 238, 247, 0.92);
  border: 1px solid rgba(125, 211, 252, 0.10);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(3, 7, 18, 0.24);
  padding: 6px;
}

#article-container code,
#article-container pre,
#article-container figure.highlight {
  background-color: rgba(10, 18, 30, 0.86) !important;
}

#article-container table,
#article-container th,
#article-container td {
  border-color: rgba(125, 211, 252, 0.12);
}

#article-container th {
  background: rgba(125, 211, 252, 0.08);
}

a:focus-visible,
button:focus-visible,
#nav a:focus-visible {
  outline: 2px solid rgba(246, 193, 119, 0.72);
  outline-offset: 3px;
  border-radius: 8px;
}