:root {
  --site-panel-opacity: 0.88;
  --site-panel-soft-opacity: 0.92;
  --site-panel-blur: 18px;
  --site-surface-rgb: 12, 19, 29;
  --site-bg-image: url("/images/site-background.webp");
  --site-bg-size: min(680px, 82vw);
}

html[data-bs-theme="light"] {
  --site-surface-rgb: 255, 255, 255;
}

html {
  background-color: #08111a !important;
  background-image: var(--site-bg-image) !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-size: cover !important;
}

body {
  background: transparent !important;
  position: relative;
  min-height: 100vh;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::after {
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(4, 8, 14, 0.46), rgba(4, 8, 14, 0.58)),
    radial-gradient(circle at center, rgba(12, 19, 29, 0.05), rgba(12, 19, 29, 0.34));
}

html[data-bs-theme="light"] body::after {
  background:
    linear-gradient(180deg, rgba(242, 247, 255, 0.32), rgba(235, 243, 255, 0.48)),
    radial-gradient(circle at center, rgba(255, 255, 255, 0.03), rgba(226, 237, 255, 0.24));
}

main,
header,
footer,
.top-app-bar,
.footer {
  background: transparent !important;
}

html[data-bs-theme="light"] body {
  color: #13233d;
}

.top-app-bar,
.dropdown-menu,
.offcanvas,
.card,
.component,
.accordion-item,
.list-group-item,
.modal-content,
.page-link,
.alert,
.taxonomy,
.archive,
.sidebar .card,
.post-panel,
.search-stat {
  background-color: rgba(var(--site-surface-rgb), var(--site-panel-opacity)) !important;
  backdrop-filter: blur(var(--site-panel-blur));
  -webkit-backdrop-filter: blur(var(--site-panel-blur));
}

.mode-dropdown-menu .panel-opacity-control {
  min-width: 220px;
}

.mode-dropdown-menu .panel-opacity-control .form-range {
  margin-bottom: 0.35rem;
}

.mode-dropdown-menu .panel-opacity-control__value {
  font-variant-numeric: tabular-nums;
}