body {
    background-color: transparent;
    background-image: url("/images/texture.png");
}


/* article */
article,
.article {
    --article-content-max-width: 40rem;
    --article-font-size-small: small;
    --article-font-size-medium: medium;
    --article-font-size-large: large;

    font-family: "宋体", 'Noto Serif SC', serif;

    padding: 20px;
    /* margin: auto; */
    min-height: 75vh;

    color: var(--color-text-primary, black);
}
@media (min-width: 40rem) {
    article,
    .article {
        --article-font-size-small: medium;
        --article-font-size-medium: large;
        --article-font-size-large: x-large;
    }
}

article *,
.article * {
    color: inherit;
}
article > *,
.article > * {
    margin-top: 1em;
}

article hr,
.article hr {
    width: 100%;
    /* max-width: calc(var(--article-content-max-width) + 2rem); */
}


/* title */
.article-title {
    font-size: x-large;
    /* max-width: var(--article-content-max-width); */
    text-align: center;
    margin: auto;
    margin-bottom: 0.5rem;
}

/* reset font-size */
article h1,
.article h1 {
    font-size: xx-large;
}
article h2,
.article h2 {
    font-size: x-large;
}
article h3,
.article h3 {
    font-size: large;
}
article h4,
.article h4 {
    font-size: medium;
}
article h5,
.article h5 {
    font-size: small;
}
article h6,
.article h6 {
    font-size: x-small;
}

/* <h1> */
article h1,
.article h1 {
    text-align: left;
    /* max-width: var(--article-content-max-width); */
}

/* <h2> */
article h2,
.article h2,
.article-title-sub,
.article-subtitle {
    text-align: left;
    /* max-width: var(--article-content-max-width); */
}


.article-author-container,
.article-publisher-container {
    margin-top: 0;
    margin-bottom: 0.25em;

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    text-align: center;
    font-size: var(--article-font-size-small);
    color: var(--color-text-primary, black);
}


.article-author,
.article-publisher {
    margin: 0px;
    font-size: inherit;
    /* max-width: var(--article-content-max-width); */
    color: var(--color-text-primary, black);
}
.article-author:hover,
.article-publisher:hover {
    text-decoration: none;
}


.article-date {
    color: var(--color-text-primary);
    font-family: 'Noto Serif SC', serif;
    font-size: var(--article-font-size-small);
    text-align: center;
    /* max-width: var(--article-content-max-width); */
    margin: auto;
}


/* <a> */
article a {
    color: var(--color-blue, skyblue);
}
article a:hover {
    cursor: pointer;
}

/* <p> */
article > p,
.article > p,
.article-p,
.article-paragraph {
    margin-top: 1em;
    text-indent: 2em;
    font-size: var(--article-font-size-medium);
    text-align: left;
    /* max-width: var(--article-content-max-width); */
}
article > p *,
.article > p *,
.article-p *,
.article-paragraph * {
    font-size: inherit;
}
article > p sup,
.article > p sup,
.article-p sup,
.article-paragraph sup,
article > p sub,
.article > p sub,
.article-p sub,
.article-paragraph sub {
    font:
        0.5em 'Fira Sans',
        sans-serif;
}



/* <blockquote> */
article > blockquote,
.article > blockquote,
.article-blockquote {
    font-size: var(--article-font-size-medium);
    text-align: left;
    /* text-indent: 0; */
    border-left: 2px solid;
    width: 95%;
    /* max-width: var(--article-content-max-width); */
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    padding-left: 1em;
}


article > blockquote p,
.article > blockquote p,
.article-blockquote p {
    text-indent: 0;
}


article > blockquote footer,
.article > blockquote footer,
.article-blockquote footer {
    font-size: var(--article-font-size-medium);
    display: block;
    margin-top: 1em;
    min-width: none;
}


/* <figure> */
article > figure,
.article > figure,
.article-figure {
    text-align: center;
    max-width: var(--article-content-max-width);
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
}

article > figure img,
.article > figure img,
.article-figure img {
    width: 100%;
}

article > ul,
.article > ul {
    list-style-type: disc;
    list-style-position: inside;
}


/* markdown */
article img {
    max-width: 80%;
}


/* comments */
.comments {
    box-sizing: border-box;
    width: 90%;
    margin: auto;
    padding: 1em 0;
}
.comments svg {
    fill: currentColor;
}