@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap");
:root {
  --body-bg-color: #fff5ee;
  --board-bg-color: #fff5ee;
  --text-color: #252525;
  --post-text-color: #252525;
  --line-color: rgba(128,128,128,0.2);
  --link-hover-color: #6495ed;
  --post-link-color: #6495ed;
}
[data-user-color-scheme="dark"] {
  --body-bg-color: #303030;
  --board-bg-color: #303030;
  --text-color: #f0f0f0;
  --post-text-color: #f0f0f0;
  --line-color: rgba(128,128,128,0.35);
}
body {
  font-family: 'Noto Serif SC', serif;
  font-size: 18px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}
.board {
  border-radius: 14px;
}
.btn,
.btn-group {
  border-radius: 8px;
}
img {
  border-radius: 8px;
  transition: opacity 0.8s, filter 0.8s;
}
/* Navbar Frosted Glass */
.navbar {
  background-color: rgba(255,255,255,0.9) !important;
}
[data-user-color-scheme="dark"] .navbar {
  background-color: rgba(58,58,58,0.9) !important;
}
@supports ((-webkit-backdrop-filter: blur(0)) or (backdrop-filter: blur(0))) {
  .navbar {
    -webkit-backdrop-filter: saturate(150%) blur(5px);
    backdrop-filter: saturate(150%) blur(5px);
    background-color: rgba(255,255,255,0.52) !important;
  }
  [data-user-color-scheme="dark"] .navbar {
    background-color: rgba(58,58,58,0.52) !important;
  }
}
/* Title Decoration */
h1,
h2 {
  position: relative;
  padding-left: 1rem;
}
h1::before,
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10%;
  width: 6px;
  height: 80%;
  background-color: #6495ed;
  transform: skew(-35deg);
  opacity: 0.5;
  border-radius: 3px 8px 10px 6px;
}
/* Divider Style */
hr {
  height: 0;
  border: none;
  border-top: 6px dashed rgba(128,128,128,0.3);
  margin: 2rem 0;
}
/* Page Entry Animation */
#board,
header {
  animation: fadeInBlur 0.5s ease-out forwards;
}
/* Image Lazy Load Animation */
img[lazyload] {
  opacity: 0.2;
  filter: blur(10px);
}
/* Card Hover Effect */
.index-card,
.post-card {
  transition: transform 0.3s ease;
}
.index-card:hover,
.post-card:hover {
  transform: scale(1.03);
}
@-moz-keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@-webkit-keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@-o-keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes fadeInBlur {
  0% {
    opacity: 0;
    filter: blur(20px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}