:root {
  --bg-color: #f5f2e8;
  --bg-overlay: linear-gradient(rgb(252 250 244 / 0.84), rgb(252 250 244 / 0.84));
  --fg-color: #2d291f;
  --fg-muted-2: rgb(216 209 191 / 0.92);
  --fg-muted-3: rgb(125 113 88 / 0.26);
  --fg-muted-4: #666050;
  --fg-muted-5: color-mix(in srgb, #666050 88%, black);
  --glass-bg: rgb(252 250 244 / 0.78);
  --fg-contrast: rgb(255 252 246 / 0.96);
  --contrast-color: #241f15;
  --accent-color-alpha: rgb(from var(--accent-color) r g b / 0.16);
}

[data-theme="dark"] {
  --bg-color: #0f1416;
  --bg-overlay: linear-gradient(rgb(15 20 22 / 0.9), rgb(15 20 22 / 0.9));
  --fg-color: #e9e5da;
  --fg-muted-2: rgb(54 65 61 / 0.96);
  --fg-muted-3: rgb(133 127 113 / 0.34);
  --fg-muted-4: #c8c1af;
  --fg-muted-5: color-mix(in srgb, #c8c1af 88%, white);
  --glass-bg: rgb(24 32 36 / 0.78);
  --fg-contrast: rgb(18 24 26 / 0.94);
  --contrast-color: #18150d;
  --accent-color-alpha: rgb(from var(--accent-color) r g b / 0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-color: #0f1416;
    --bg-overlay: linear-gradient(rgb(15 20 22 / 0.9), rgb(15 20 22 / 0.9));
    --fg-color: #e9e5da;
    --fg-muted-2: rgb(54 65 61 / 0.96);
    --fg-muted-3: rgb(133 127 113 / 0.34);
    --fg-muted-4: #c8c1af;
    --fg-muted-5: color-mix(in srgb, #c8c1af 88%, white);
    --glass-bg: rgb(24 32 36 / 0.78);
    --fg-contrast: rgb(18 24 26 / 0.94);
    --contrast-color: #18150d;
    --accent-color-alpha: rgb(from var(--accent-color) r g b / 0.16);
  }
}

#site-nav::before {
  background:
    linear-gradient(rgb(from var(--accent-color) r g b / 0.06), rgb(from var(--accent-color) r g b / 0.025)),
    var(--glass-bg);
}

#site-nav nav a.active,
#site-footer nav a.active,
#post-nav .post-nav-item:hover,
.tags a:hover,
.tags .tag,
mark {
  color: var(--fg-color);
}

#site-nav nav a.active,
#site-footer nav a.active {
  background-color: rgb(from var(--accent-color) r g b / 0.22);
}

#site-nav nav a.active:hover,
#site-footer nav a.active:hover,
#post-nav .post-nav-item:hover,
.tags a:hover,
.tags .tag:hover {
  background-color: var(--accent-color);
  color: var(--fg-contrast);
}

#site-nav nav a,
#site-nav nav summary,
#site-nav nav button {
  text-shadow: none;
}

html,
body {
  overflow-x: clip;
}

@media only screen and (max-width: 700px) {
  #site-nav {
    position: sticky;
    top: 0.3rem;
    z-index: 1000;
    margin: 0.3rem auto 0;
    inset-block-start: 0;
    width: calc(100% - 0.6rem);
    max-width: calc(100% - 0.6rem);
  }

  #site-nav nav {
    padding: 0.24rem 0.3rem;
  }

  #site-nav nav ul {
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: 0.04rem;
    overflow: visible;
    min-width: 0;
  }

  #site-nav nav li,
  #site-nav nav li:not(:has(.circle)) {
    flex: 0 1 auto !important;
    width: auto !important;
    min-width: 0;
  }

  #site-nav nav a,
  #site-nav nav summary,
  #site-nav nav button {
    white-space: nowrap;
    min-width: 0;
  }

  #site-nav nav a,
  #site-nav nav summary {
    padding: 0.42rem 0.36rem;
    font-size: 0.75rem;
    letter-spacing: -0.01em;
  }

  #site-nav nav .circle {
    flex: 0 0 auto;
    padding: 0.42rem;
  }

  #site-nav nav #home a {
    padding-inline: 0.4rem 0.46rem;
    font-size: 0.74rem;
    font-weight: 780;
    letter-spacing: -0.01em;
  }

  #site-nav nav #home .icon {
    margin-inline-end: 0.18rem;
  }

  #site-nav nav .divider {
    margin: 0 0.04rem;
  }

  #site-nav nav a.external::after {
    display: none;
  }

  #site-nav nav #theme-switcher ul,
  #site-nav nav #feed ul,
  #site-nav nav #language-switcher ul,
  #site-nav nav details[open] ul {
    overflow: visible;
  }

  main {
    margin-top: 2.9rem;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
  }
}

@media only screen and (max-width: 480px) {
  #site-nav {
    position: sticky;
    top: 0.2rem;
    margin-top: 0.2rem;
    width: calc(100% - 0.4rem);
  }

  #site-nav nav {
    padding: 0.2rem 0.24rem;
  }

  #site-nav nav ul {
    gap: 0;
  }

  #site-nav nav a,
  #site-nav nav summary {
    padding: 0.38rem 0.28rem;
    font-size: 0.68rem;
  }

  #site-nav nav .circle {
    padding: 0.38rem;
  }

  #site-nav nav #home a {
    padding-inline: 0.34rem;
    font-size: 0;
  }

  #site-nav nav #home .icon {
    margin-inline-end: 0;
  }

  main {
    margin-top: 2.7rem;
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
  }
}