:root {
  --page-bg: #f9fafc;
  --page-bg-alt: #e5e9f2;
  --surface: #f9fafc;
  --surface-elevated: #ffffff;
  --border: #c0ccda;
  --text: #3c4858;
  --heading: #1c2d41;
  --muted: #8392a5;
  --link: #248aaa;
  --link-hover: #207089;
  --accent: #2098d1;
  --accent-strong: #248aaa;
  --accent-soft: rgba(36, 138, 170, 0.12);
  --shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
  --footer-bg: #1c2d41;
  --footer-heading: #c0ccda;
  --footer-text: #8392a5;
  --footer-input: #c0ccda;
  --footer-input-focus: #e5e9f2;
  --navbar-initial-text: #c0ccda;
  --navbar-final-bg: #f9fafc;
  --navbar-final-text: #1c2d41;
  --navbar-divider: rgba(0, 0, 0, 0.6);
  --card-footer-bg: #ffffff;
  --skill-card-head-bg: #f9fafc;
  --home-avatar-bg: #e7e7ef;
  --code-inline-bg: rgba(36, 138, 170, 0.12);
  --code-inline-text: #c7254e;
  --table-hover: #c0ccda;
  --mark-bg: rgba(255, 194, 18, 0.5);
}

html[data-theme="dark"] {
  --page-bg: #0b1220;
  --page-bg-alt: #121a2b;
  --surface: #172235;
  --surface-elevated: #1d2b43;
  --border: #314158;
  --text: #d7e1f0;
  --heading: #f2f7ff;
  --muted: #9fb1c9;
  --link: #7cc7ff;
  --link-hover: #a8dcff;
  --accent: #59c4ff;
  --accent-strong: #2daeea;
  --accent-soft: rgba(89, 196, 255, 0.16);
  --shadow: 0px 16px 56px rgba(0, 0, 0, 0.4);
  --footer-bg: #08101b;
  --footer-heading: #d8e2f2;
  --footer-text: #9fb1c9;
  --footer-input: #23344f;
  --footer-input-focus: #314664;
  --navbar-initial-text: #eff5ff;
  --navbar-final-bg: rgba(11, 18, 32, 0.96);
  --navbar-final-text: #eff5ff;
  --navbar-divider: rgba(159, 177, 201, 0.35);
  --card-footer-bg: #172235;
  --skill-card-head-bg: #172235;
  --home-avatar-bg: #1b2740;
  --code-inline-bg: rgba(89, 196, 255, 0.12);
  --code-inline-text: #ffbfd7;
  --table-hover: #24354f;
  --mark-bg: rgba(255, 194, 18, 0.35);
}

html {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

body,
.wrapper,
.content-section > .content,
.read-area,
.sidebar-holder,
.sidebar,
.toc-holder,
.card,
.post-card-holder .card .card-footer,
.skills-section .card .card-head,
.navbar-collapse.show,
.navbar-collapse.collapsing,
.top-navbar .dropdown-menu,
figure {
  background-color: var(--surface);
}

body,
.wrapper,
.content-section > .content,
.content-section .page-content,
.post-content,
.sidebar,
.toc,
.card-body,
.post-summary,
.table,
.pagination,
.navbar-collapse.show,
.navbar-collapse.collapsing {
  color: var(--text);
}

body,
.bg-white {
  background-color: var(--page-bg) !important;
}

.bg-dimmed,
.wrapper,
.content-section,
.content-section > .content,
.content-section .content,
.content-cards,
table,
tbody tr:nth-child(odd) {
  background-color: var(--page-bg-alt);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
.tree li a,
.toc .nav-link,
a.header-anchor,
.final-navbar .navbar-brand,
.final-navbar li a,
.navbar-collapse.show li a,
.navbar-collapse.collapsing li a {
  color: var(--heading);
}

p,
li,
dt,
dd,
td,
th,
label,
input,
textarea,
small,
.author-profile p,
.sub-title,
caption,
figcaption,
.post-card-holder .card .card-footer span {
  color: var(--text);
}

.author-profile p,
.sub-title,
caption,
figcaption,
.tree i,
.footer,
.footer a,
.footer p:first-child,
.footer hr,
.post-card-holder .card .card-footer span {
  color: var(--muted) !important;
}

a,
.content-cards .paginator .page-item > a,
.next-prev-navigator a {
  color: var(--link);
}

a:hover,
.next-prev-navigator a:hover,
.footer a:hover,
.footer #hugo:hover {
  color: var(--link-hover);
}

strong,
a.header-anchor,
a.header-anchor code,
.skills-section .card .card-title {
  color: var(--heading) !important;
}

code:not(pre code) {
  color: var(--code-inline-text);
  background-color: var(--code-inline-bg);
  padding: 0.1rem 0.25rem;
  border-radius: 0.25rem;
}

.card {
  border: 1px solid var(--border);
  box-shadow: none;
}

.card:hover,
.card:focus,
.top-navbar .dropdown-menu,
.sidebar-holder,
.content-section .languageSelector {
  box-shadow: var(--shadow);
}

.card:hover,
.card:focus {
  border-color: var(--border);
}

.post-card-holder .card .card-footer {
  background: var(--card-footer-bg);
}

.skills-section .card .card-head {
  background-color: var(--skill-card-head-bg);
  border-bottom-color: var(--border);
}

.initial-navbar {
  background-color: transparent;
}

.initial-navbar .navbar-brand,
.initial-navbar li a,
.initial-navbar .theme-selector-toggle {
  color: var(--navbar-initial-text);
}

.initial-navbar .navbar-nav .active,
.initial-navbar li a:hover,
.initial-navbar .theme-selector-toggle:hover {
  color: var(--surface);
}

.final-navbar {
  background-color: var(--navbar-final-bg);
  color: var(--navbar-final-text);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.final-navbar .navbar-brand,
.final-navbar li a,
.final-navbar .theme-selector-toggle,
.navbar-collapse.show li a,
.navbar-collapse.collapsing li a {
  color: var(--navbar-final-text);
  border-bottom-color: transparent;
}

.final-navbar .navbar-nav .active,
.final-navbar li a:hover,
.final-navbar .theme-selector-toggle:hover,
.top-navbar .dropdown-menu a:hover,
.top-navbar .dropdown-menu a.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, var(--accent-soft) 0%);
}

#top-navbar-divider,
.final-navbar #top-navbar-divider {
  background: var(--navbar-divider);
}

.top-navbar .dropdown-menu {
  border: 1px solid var(--border);
}

.top-navbar .dropdown-menu a,
.top-navbar .dropdown-menu .dropdown-item {
  color: var(--heading);
}

.theme-selector-current {
  margin-left: 0.2rem;
  font-size: 0.82rem;
  opacity: 0.82;
}

.theme-selector-menu {
  min-width: 12rem;
}

.theme-selector-menu .dropdown-item {
  cursor: pointer;
}

.theme-selector-menu .dropdown-item.active {
  color: var(--accent);
  background: linear-gradient(90deg, rgba(2, 0, 36, 0) 0%, var(--accent-soft) 0%);
}

.footer {
  color: var(--footer-text) !important;
  background-color: var(--footer-bg);
}

.footer h5,
.footer #theme {
  color: var(--footer-heading);
}

.footer a {
  color: var(--footer-text);
}

.footer hr {
  background-color: var(--footer-text);
}

.footer input {
  background-color: var(--footer-input);
  color: var(--heading);
}

.footer input:focus {
  background-color: var(--footer-input-focus);
}

#search-box {
  background-color: var(--page-bg-alt);
  color: var(--text);
  border-color: var(--border);
}

#search-box:focus {
  border-color: var(--accent-strong);
}

.subtree:before,
.subtree ul:before,
.subtree li:before {
  border-color: var(--border);
}

.subtree li:last-child:before {
  background: var(--surface);
}

.toc .nav-link:hover,
.toc .nav-link:focus,
.toc .nav-link.active,
.content-cards .paginator .page-item.active > a,
.btn-info,
.btn-outline-info:hover,
.next-prev-navigator .btn-outline-info,
kbd {
  background-color: var(--accent-strong) !important;
  color: var(--surface) !important;
  border-color: var(--accent-strong) !important;
}

.btn-outline-info {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.btn-dark {
  background-color: var(--heading);
  border-color: var(--heading);
  color: var(--surface);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-info:hover,
.btn-outline-info:hover,
.next-prev-navigator .btn-outline-info:hover {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
}

.next-prev-navigator .btn-outline-info:hover {
  color: var(--heading) !important;
  background-color: var(--page-bg-alt) !important;
  border-color: var(--page-bg-alt) !important;
}

.post-content blockquote {
  border-left-color: var(--accent-strong);
  background-color: var(--accent-soft);
}

.post-content blockquote > p {
  color: var(--text);
}

table {
  border-color: var(--border);
}

table,
tbody tr:nth-child(odd) {
  background: var(--page-bg-alt);
}

table th,
table td {
  border-left-color: var(--muted);
  border-bottom-color: var(--muted);
}

table thead tr {
  background: var(--accent-strong);
  color: var(--surface);
}

tbody tr:hover {
  background: var(--table-hover);
}

figure {
  border-color: var(--border);
}

mark {
  background-color: var(--mark-bg);
  color: var(--heading);
}

.home img,
.author-profile img {
  background-color: var(--home-avatar-bg);
}

.content-section .languageSelector {
  background-color: var(--surface);
}

html[data-theme="dark"] .footer #theme img {
  filter: brightness(0) invert(1);
}

html[data-theme="dark"] .final-navbar .navbar-brand img,
html[data-theme="dark"] .final-navbar .page-navbar-logo,
html[data-theme="dark"] .final-navbar #logo {
  filter: none;
}

html[data-theme="dark"] .final-navbar .navbar-toggler.navbar-light .navbar-toggler-icon,
html[data-theme="dark"] #sidebar-toggler.navbar-light .navbar-toggler-icon,
html[data-theme="dark"] #toc-toggler.navbar-light .navbar-toggler-icon,
html[data-theme="dark"] #navbar-toggler.navbar-light .navbar-toggler-icon {
  filter: invert(1) brightness(1.8);
}

@media (max-width: 1024px) {
  .navbar-collapse.lang-selector {
    display: block !important;
    position: absolute;
    right: 0;
    top: 0.25rem;
    margin-top: 0;
    background: transparent;
    padding-left: 0;
  }

  .navbar-collapse.lang-selector .navbar-nav {
    flex-direction: row;
    align-items: center;
    margin-right: 0.25rem;
  }

  .navbar-collapse.lang-selector .theme-selector-menu {
    right: 0;
    left: auto;
  }
}

@media only screen and (max-width: 576px) {
  .theme-selector {
    width: 100%;
  }

  .theme-selector .dropdown-menu {
    width: 100%;
  }
}

.pagination .page-link,
.content-cards .paginator .page-item > a {
  color: var(--link);
  background-color: var(--surface);
  border-color: var(--border);
}

.pagination .page-link:hover,
.pagination .page-link:focus,
.content-cards .paginator .page-item > a:hover,
.content-cards .paginator .page-item > a:focus {
  color: var(--heading);
  background-color: var(--page-bg-alt);
  border-color: var(--accent);
  box-shadow: none;
}

.pagination .page-item.disabled .page-link {
  color: var(--muted);
  background-color: var(--surface);
  border-color: var(--border);
}

.pagination .page-item.active .page-link,
.content-cards .paginator .page-item.active > a {
  color: var(--surface);
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}