/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
  --ifm-color-primary: hsl(0deg, 0%, 100%);
  --ifm-color-primary-dark: #21af90;
  --ifm-color-primary-darker: #1fa588;
  --ifm-color-primary-darkest: #1a8870;
  --ifm-color-primary-light: #29d5b0;
  --ifm-color-primary-lighter: #32d8b4;
  --ifm-color-primary-lightest: #4fddbf;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);

  --bg: black;

  /* --ifm-table-head-background: hsl(0deg 0% 3%); */
  --ifm-table-stripe-background: hsl(0deg 0% 5%) !important;
  --ifm-card-background-color: hsl(0deg 0% 5%);
  --ifm-color-emphasis-200: hsl(0deg 0% 15%) !important;
  --ifm-code-background: hsl(0deg 0% 15%);
  --ifm-font-size-base: 16px;
  --ifm-hr-background-color: hsl(0deg 0% 15%);
  --ifm-hr-margin-vertical: 50px;
  --ifm-font-family-base: 'Syne', sans-serif !important;
  --ifm-menu-color-background-active: hsl(0deg 0% 15%);
}

table td,
table th {
  border: 1px solid hsl(0deg 0% 15%);
}

body {
  font-feature-settings: 'tnum' on, 'lnum' on;
}

a.navbar__brand {
  color: var(--ifm-color-primary);
  font-size: 24px;
}

@media (max-width: 500px) {
  .hero-logo {
    height: 100px;
  }
}

#__docusaurus {
  background: var(--bg);
}

header {
  background: none !important;
}

/* navigation blur */
.navbar--fixed-top:not(.navbar-sidebar--show) {
  backdrop-filter: saturate(180%) blur(10px);
  background: hsl(0deg 0% 5% / 10%) !important;
  border-bottom: 1px solid hsl(0deg 0% 100% / 15%);
}

.navbar-sidebar {
  background: hsl(0deg 0% 5%);
  border: 1px solid hsl(0deg 0% 100% / 10%);
}

.footer {
  display: none;
}

.alert--info,
.alert--secondary {
  background: hsl(0deg 0% 10%);
  border-left-color: hsl(0deg 0% 30%);
}

.alert--warning {
  background: hsl(34deg 66% 7%);
}

.alert {
  box-shadow: 0 0 20px hsla(0, 0%, 100%, 5%);
}

.wow {
  text-shadow: 0 0 10px hsl(0deg 0% 100% / 20%);
  font-weight: 500;
  color: white;
}

body pre.prism-code {
  --prism-background-color: hsl(0deg 0% 5%);
  font-size: 14px !important;
  border: 1px solid hsl(0deg 0% 10%);
  box-shadow: inset 0 0 6px hsl(0deg 0% 0% / 50%);
}

.container {
  z-index: 10;
  position: relative;
}
