/* Custom dark theme + pixel grid background (inspired by 0xbaas.com) */

html[data-mode='dark'],
html:not([data-mode]) {
  color-scheme: dark;
  --main-bg: #1a1a1e;
  --mask-bg: #1a1a1e;
  --main-border-color: #252528;
  --text-color: #c8c9cb;
  --text-muted-color: #7a7b7e;
  --heading-color: #e4e5e7;
  --link-color: #7eb8fa;
  --link-underline-color: #3d5a80;
  --sidebar-bg: #1e1f1f;
  --sidebar-border-color: #1c1c1f;
  --sidebar-muted-color: #7a7b7e;
  --sidebar-active-color: #fff;
  --sidebar-hover-bg: #1a1a1e;
  --sidebar-btn-bg: #18181b;
  --topbar-bg: rgb(26 26 30 / 85%);
  --card-bg: #1e1f1f;
  --card-hover-bg: #252628;
  --card-shadow: rgb(0 0 0 / 45%) 0 6px 20px 0, rgb(60 60 65 / 25%) 0 0 0 1px;
  --highlight-bg-color: #0c0c0e;
  --btn-border-color: #2a2a2e;
  --tag-border: #2d3a42;
  --tag-hover: #1e2a32;
}

/* Animated red square canvas layer */
#grid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
}

/* Pixel / grid background on main content area */
#main-wrapper {
  background-color: var(--main-bg);
  background-image:
    linear-gradient(rgba(126, 184, 250, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 184, 250, 0.02) 1px, transparent 1px);
  background-size: 24px 24px;
}

body {
  background-color: #1a1a1e;
}

#sidebar {
  border-right-width: 1px;
  box-shadow: 1px 0 0 0 rgba(126, 184, 250, 0.06);
}

#sidebar .site-title {
  color: var(--heading-color);
  font-weight: 800;
  letter-spacing: 0.02em;
}

#sidebar .site-subtitle:empty {
  display: none;
}

#sidebar .sidebar-bottom a:hover,
#sidebar .sidebar-bottom #mode-toggle:hover {
  color: var(--link-color);
}

#sidebar #avatar {
  box-shadow:
    0 0 0 2px var(--sidebar-border-color),
    0 0 0 4px rgba(126, 184, 250, 0.15);
  display: block;
  overflow: hidden;
}

#sidebar #avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.post-preview {
  border-radius: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-preview:hover {
  transform: translateY(-2px);
  box-shadow:
    rgb(0 0 0 / 5%) 0 12px 28px 0,
    rgb(126 184 250 / 0.08) 0 0 0 1px;
}

html[data-mode='dark'] .highlight,
html:not([data-mode]) .highlight {
  background-color: #0a0a0c;
  border: 1px solid var(--main-border-color);
}

.content a:not(.img-link):hover,
#sidebar a:hover {
  color: var(--link-color) !important;
}

.post-tag:hover,
.tag:hover {
  border-color: var(--link-color);
  color: var(--link-color);
}

.content img:not(.rounded-circle) {
  border: 1px solid var(--main-border-color);
  border-radius: 10px;
}

footer {
  padding-bottom: 1.25rem;
}

footer p {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

#back-to-top {
  bottom: 1.25rem !important;
}

@media all and (min-width: 850px) {
  #back-to-top {
    bottom: 1.25rem !important;
  }
}