body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "PingFang SC",
        "Microsoft YaHei",
        "Heiti SC",
        "Source Han Sans SC",
        "Noto Sans CJK SC",
        "WenQuanYi Micro Hei",
        sans-serif;
  font-size: 21px;
  line-height: 1.58;
  color: #333;
  background-color: #ffffff;
}

body {
    font-weight: 400; /* Normal weight for body text */
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600; /* Slightly heavier for headings */
}

p {
    margin-bottom: 26px; /* Adjust the value to match Medium's style */
    line-height: 1.8;    /* Optional: adjust line height for better readability */
}

h1, h2, h3, h4, h5, h6 {
  font-family:
        -apple-system,
        BlinkMacSystemFont,
        "PingFang SC",
        "Microsoft YaHei",
        "Heiti SC",
        "Source Han Sans SC",
        "Noto Sans CJK SC",
        "WenQuanYi Micro Hei",
        sans-serif;
  font-weight: bold;
}

.post-content {
  max-width: 740px;
  margin:0 auto;
}

h1 {
  font-size: 2.5em;
}

h2 {
  font-size: 2em;
  margin-top: 1.5em;
}

h3 {
  font-size: 1.5em;
  margin-top: 0.1em;
}

a {
  color: #1a73e8;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.btn {
  background-color: #1a73e8;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  text-decoration: none;
  display: inline-block;
}

@media (min-width: 768px) {

    #toc-container {
        position: fixed;           /* Keeps the ToC in view while scrolling */
        top: 100px;                /* Adjust as needed to fit your layout */
        right: 30px;               /* Creates space between ToC and right edge of the window */
        width: 250px;              /* Adjust width as needed */
        max-height: 80vh;          /* Limits height to prevent overflow */
        overflow-y: auto;          /* Allows scrolling within the ToC */
        border-left: 2px solid #ccc; /* Optional: visual separation */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 15px;        /* Space inside the ToC */
        margin-left: -300px;       /* Pulls the ToC closer to the main article */
        background-color: #f9f9f9; /* Background color to distinguish ToC */
    }
}

#table-of-contents ul {
    margin: 0;
    padding: 0;
}

#table-of-contents li {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 5px; /* Adjust space between items */
}

#table-of-contents a {
    font-size: 0.85em;  /* Make text smaller */
    color: #333;        /* Default color */
    text-decoration: none;
}

#table-of-contents a:hover {
    color: #1a73e8;     /* Color on hover */
}

#toc-container {
    z-index: 10; /* Ensure this value is appropriate to keep the ToC behind the main content */
}

.article-content {
    z-index: 1; /* Or higher, depending on your layout */
}


@media (max-width: 767px) {
    #toc-container {
        position: relative;
        top: auto;
        right: auto;
        width: auto;
        margin-left: 0;
        margin-top: 20px;
        margin-bottom: 20px;
        border-left: 2px solid #ccc; /* Optional: visual separation */
        background-color: #f9f9f9; /* Background color to distinguish ToC */
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 15px;        /* Space inside the ToC */
    }
}