:root {
  --primary-color: #3d99e9;
  --primary-dark: #1565c0;
  --secondary-color: #ff5722;
  --secondary-dark: #e64a19;
  --thirdth-color: #7eb6e7;
  --text-color: #333;
  --light-bg: #f8f9fa;
  --card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --container-padding: 4em;
  --content-width: 60vw;
  --func-col: repeat(2, 1fr);
  --func-row: repeat(2, 1fr);
  --wechat-size: 30%;
  --feat-video-height: 350px;
  --feat-video-margin-h: 1em; }

  @media (min-width: 0px) and (max-width: 768px) {
    :root {
      --container-padding: 1em;
      --content-width: 100%;
      --func-col: repeat(1, 1fr);
      --func-row: repeat(1, 1fr);
      --wechat-size: 80%;
      --feat-video-height: 30vh;
      --feat-video-margin-h: 0em;   }
}

.darkmode {
  --base-color: #11323e;
  --main-bg-color: #091524;
  --font-color: #6c92bd;
  --base-main-bg-img: linear-gradient(90deg, transparent 1px, rgba(0, 0, 0, 0.05) 1px, rgba(188,
    186, 186, 0.05) 1.5px, rgba(40, 55, 83, 0.3) 1.5px), linear-gradient(0deg,
    transparent 1px, rgba(0, 0, 0, 0.05) 1px, rgba(188, 186, 186, 0.05) 1.5px,
    rgba(86, 83, 83, 0.3) 1.5px);
  --border-color: #283039;
  --input-bg-color: rgba(27, 46, 73, 0.87);
  --code-bg-color: rgba(27, 46, 73, 0.87);
  --post-block-color: rgba(64, 64, 71, 0.36);
  --side-bar-bg: rgba(27, 46, 73, 0.87); }