body, h1, h2, h3, h4, h5, h6, p {
  /* font-family: 'plus-jakarta-sans', ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; */
}

html { scroll-behavior: smooth;}

@media (prefers-color-scheme: dark) {
  body, .w3-sidebar, .force-bg{
    color: #FFFFFF !important;
    background-color: #111111 !important;}
  input {background-color: #444444 !important;}
  .fill-bg-color{
    fill: #111111 !important;}}

@media (prefers-color-scheme: light) {
  body, .w3-sidebar, .force-bg{
    color: #111111 !important;
    background-color: #FFFFFF !important;}
  .fill-bg-color {
    fill: #FFFFFF !important;}}

@keyframes heartbeat {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  25% {
    transform: scale(1.1);
    opacity: 1;
  }
  50% {
    transform: scale(0.95);
    opacity: 0.85;
  }
  75% {
    transform: scale(1.05);
    opacity: 1;
  }
}

.heartbeat {
  animation: heartbeat 1.8s ease-in-out infinite;
  display: inline-block;
  transition: transform 0.3s ease;
}

.heartbeat:hover {
  animation: heartbeat 1.2s ease-in-out infinite;
}

/* w3-sidebar is position:fixed at 200px, but w3-col.l2 only reserves 16.66%,
   so between 993px and ~1200px the sidebar overlaps the content column. Pin
   the in-flow column to match the sidebar width. */
@media (min-width: 993px) {
  #left-menu-placeholder { width: 200px; }
  #article-content       { width: calc(100% - 200px); }
  /* A gap between the menu panel and the content, wider on wider screens. */
  #article-content       { padding-left: clamp(1.5rem, 4vw, 5rem); }
}

/* Left menu: a light panel, sections, the current page marked. */
#menu-sidebar {
  padding: 1.5em 0.75em !important;
  border-right: 1px solid #e3e6ea;}
#menu-sidebar .menu-section {
  margin: 1.4em 12px 0.4em;
  font-size: 0.8em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a9099;}
#menu-sidebar .w3-bar-item {
  margin: 2px 0;
  padding: 8px 12px;
  border-left: 3px solid transparent;
  border-radius: 0 6px 6px 0;
  transition: background-color 0.15s, border-color 0.15s;}
#menu-sidebar .w3-bar-item i {
  margin-right: 6px;
  color: #f44336;}
#menu-sidebar .w3-bar-item:hover {
  background-color: rgba(244, 67, 54, 0.08) !important;
  border-left-color: rgba(244, 67, 54, 0.5);}
#menu-sidebar .w3-bar-item[aria-current="page"] {
  background-color: rgba(244, 67, 54, 0.12) !important;
  border-left-color: #f44336;
  font-weight: 600;}
@media (prefers-color-scheme: light) {
  #menu-sidebar {
    background-color: #f7f8fa !important;}}
@media (prefers-color-scheme: dark) {
  #menu-sidebar {
    background-color: #1b1d22 !important;
    border-right-color: #2a2d33;}}