<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=G-FG8DDV0GBR"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "G-FG8DDV0GBR");
</script>

<link
  rel="preload"
  href="//cdn.jsdelivr.net/npm/docsify@4.12.2/lib/themes/vue.css"
  type="text/css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet';"
/>

<style>
  body {
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
    font-family: Arial, sans-serif; /* Set a default font family */
  }
  article {
    max-width: 700px;
  }
  .markdown-section {
    /* Allow the content to stretch to the full width */
    /* max-width: 100%;  */
    max-width: 700px;
    margin: 0 auto; /* Center the content on the page */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    padding: 20px; /* Add padding for better readability, adjust as needed */
  }

  p > img {
    max-width: 100%; /* Ensure images are responsive within the content */
    height: auto;
  }

  .markdown-section h2 {
    padding: 40px 0px 10px 0px;
    border-bottom: 1px solid #dbdbdb;
  }

  .markdown-section h3 {
    padding-top: 15px;
  }
  .markdown-section h3 code {
    font-size: 80%;
  }
  .sidebar {
    padding-top: 24px;
  }

  .sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .theme-btn {
    position: relative;
    left: 15px;
    width: 24px;
    height: 24px;
    margin-bottom: 14px;
    background-image: url("./static/moon.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    z-index: 100;
  }
  @media only screen and (max-width: 768px) {
    .markdown-section {
      padding: 10px; /* Adjust padding for smaller screens */
    }
  }
</style>
<!-- Theme: dark -->
<style>
  .dark,
  .dark .sidebar,
  .dark blockquote,
  .dark .sidebar a {
    /* background-color: #283339; */
    background-color: #0E1116;
    color: #d3d3d3;
  }

  .dark .sidebar::-webkit-scrollbar-thumb {
    background: hsla(0, 0%, 88%, 0.4);
  }

  .dark .sidebar::-webkit-scrollbar-track {
    background: hsla(0, 0%, 53%, 0.1);
  }

  .dark .sidebar-toggle {
    background-color: hsl(201deg 18% 19% / 80%) !important;
  }

  .dark .markdown-section h1,
  .dark .markdown-section h2,
  .dark .markdown-section h3,
  .dark .markdown-section h4,
  .dark .markdown-section strong,
  .dark .anchor span {
    color: #fff;
  }

  .dark .markdown-section tr:nth-child(2n) {
    background-color: #1f282d;
  }

  .dark .markdown-section td,
  .dark .markdown-section th {
    border-color: #495e69;
  }

  .dark .markdown-section pre,
  .dark .markdown-section code {
    background-color: #34434b;
  }

  .dark .markdown-section code,
  .dark .token.keyword,
  .dark .token.function {
    color: #f07178;
  }

  .dark .markdown-section pre > code,
  .dark .token.punctuation {
    color: #f3f3f3;
  }

  .dark .token.number,
  .dark .token.boolean {
    color: #ffcb6b;
  }

  .dark .github-corner svg {
    color: #283339;
  }

  .dark .theme-btn {
    background-image: url("./static/sun.svg");
  }
  /* .dark .light-mode-logo {
    display: block !important;
  }
  @media (prefers-color-scheme: light) {
    .dark .light-mode-logo {
      display: block !important;
    }
    .dark picture {
      display: none;
    }
    .dark .light-mode-logo {
      display: none !important;
    }
  } */
</style>