:root {
          --base-color: #175FAB;
          --main-bg-color: #fff;
          --container-margin-top: 1em;
          --code-bg-color: #cee5ff;
          --input-bg-color: #dfeaee;
          --base-main-bg-img: #fff;
          --base-width: 700px;
          --font-size: 14px;
          --font-size-s: 13px;
          --font-color: #363636;
          --font-size-tip: 13px;
          --container-margin: 1vh auto;
          --container-padding-vertical: 1em;
          --container-height-min: 80vh;
          --toc-width: 10em;
          --toc-height: 90vh;
          --border-color: rgba(177, 193, 220, 0.342);
          --note-top-height: 1em;
          --note-body-gap: 0.5em;
          --note-bottom: 1em;
          --note-bottom-img: #fff;
          --note-bottom-height: 3em;
          --side-bar-bg: #175FAB;
          --nav-mobile-display: none;
          --nav-icon-size: 15px;
          --footer-icon-size: 12px;
          --footer-padding-size: 3em;
          --timeline-font-size: 10px;
          --post-block-color: rgba(225, 225, 232, 0.36);
          --moment-day-font-size: 40px;
          --moment-date-font-size: 10px;
          --sider-bg-color: rgba(239, 241, 244, 0.5);
          --content-h-padding: 0em;
          --link-visited: #6095cda3;

      }

      @media (min-width: 768px) and (max-width: 1024px) {
          :root {
              --base-width: 100vw;
              --container-margin-top: 0em;
              --font-size: 12px;
              --font-size-s: 12px;
              --font-size-tip: 10px;
              --container-height-min: 100vh;
              --container-margin: 0px;
              --toc-width: 100vw;
              --toc-height: 100vh;
              --footer-icon-size: 14px;
              --footer-padding-size: 3em;
              --footer-icon-size: 16px;
              --nav-mobile-display: flex;
              --note-body-gap: 2em;
          }
      }

      @media (min-width: 0px) and (max-width: 768px) {
          :root {
              --base-width: 100vw;
              --container-margin-top: 0em;
              --font-size: 16px;
              --font-size-s: 14px;
              --font-size-tip: 12px;
              --container-height-min: 100vh;
              --container-margin: 0px;
              --toc-width: 100vw;
              --toc-height: 100vh;
              --footer-padding-size: 3em;
              --footer-icon-size: 11.2px;
              --nav-mobile-display: flex;
              --note-top-height: 3em;
              --note-body-gap: 1em;
              --note-bottom: 0em;
              --note-bottom-height: 1.5em;
              --content-h-padding: 0.5em;

          }
      }

      .darkmode {
          --base-color: #175FAB;
          --main-bg-color: #091524;
          --font-color: #175FAB;
          --base-main-bg-img: #ffffff1b;
          --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);
          --sider-bg-color: rgba(64, 65, 66, 0.5);
          --note-bottom-img: #ffffff13;
      }