:root {
    --font-size: 16px;

    --h2-color: #007bb6;
    --h3-color: #000;

    --text-color: #333;
    --text-comment-color: #666;
    --text-gray-color: #666;
    --text-em-blue: #007bb6;
    /* --text-em-blue: #0066cc; */

    /* color for link (get from huaweicloud.com) */
    --a-text-color: #1476ff;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    font-size: var(--font-size, 16px);
}

body {
    width: 100vw;
    /*min-width: 640px;*/
    min-width: 320px;
    /* height: 100vh; */
    min-height: 100vh;
    padding: 0.5rem 0;
    /* margin: 40px 40px 40px 40px; */

    display: grid;
    grid-template-columns: repeat(16, 1fr);
    grid-template-rows: auto 1fr auto;
    gap: 8px;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

    color: var(--text-color);

    .text-comment {
        font-size: 0.75rem;
    }

    .em-comment {
        color: var(--text-comment-color);
    }

    overflow:auto;

}



header {
    grid-row: 1;
    grid-column: 1 / span 16;

    background-color: #eee;
    padding: 0.5rem 0;

    h1 {
        font-size: 2.25rem;
        text-align: center;
    }

    p {
        display: inline;
        text-align: center;

    }

    section {
        text-align: center;

        .doc-author::before {
            content: "编者:";
            color: var(--text-gray-color);
            padding: 0 0.25rem;
        }

        .doc-last-update::before {
            content: " | 更新:";
            color: var(--text-gray-color);
            padding: 0 0.25rem;
        }

        .doc-first-on::before {
            content: "| 发布:";
            color: var(--text-gray-color);
            padding: 0 0.25rem;
        }
    }

}

footer {
    grid-row: -1;
    grid-column: 1 / span 16;

    text-align: center;

    background-color: #eee;
    /* padding: 0.5rem 0; */


    /* a[href^="#"] {
        padding: 0;
        margin: 0;
        line-height: 0;
        color: red;
    } */

    a,
    p {
        font-size: 0.75rem;
        line-height: 0.75rem;
        text-align: center;

    }

    p {
        color: #666;
    }
}



a {
    color: var(--a-text-color);
    outline-color: transparent;
    text-decoration: none;

    &:link {
        /* color: var(--a-text-color); */
    }

    &:visited {
        /* color: var(--a-text-color); */
    }

    &:focus {}

    &:hover {
        text-decoration: underline;
    }

    &:active {}

    &[href^="#"] {
        &::before {
            color: var(--text-inactive, #999);
            content: "#";
            display: inline-block;
            font-size: 1em;
            line-height: 1em;
            margin-left: -1em;
            padding: 0.5em 0;

            text-decoration: none;
            visibility: hidden;
            width: 1em;
        }

        &:hover {
            &::before {
                visibility: visible;
            }
        }

    }
}

li,
p {
    font-size: 1rem;
    line-height: var(--text-line-height, 1.6em);
    /* line-height: var(--text-line-height, 1.6rem); */
    margin: 1em 0;
}

li {
    margin: 0 0;
}


ol,
ul {
    /*list-style-position: inside;*/
    padding: 0 0 0 1rem;
}

main {
    grid-row: 2;
    grid-column: 3 / span 12;





    code {
        color: #999;
        /*padding: 1rem 0;*/

        /*overflow-wrap: break-word;
        word-wrap: break-word;*/

        font-family: monospace;
        font-size: 1rem;
    }





    h2 {
        font-size: 2rem;

        a {
            color: var(--h2-color);
        }
    }

    h3 {
        font-size: 1.5rem;

        a {
            color: var(--h3-color);
        }
    }

    h2,
    h3,
    p {
        margin: 1rem 0;

        a {

            text-decoration: none;

            &:hover {
                text-decoration: underline;
            }
        }

        /* a[href^="#"] {
            &::before {
                color: var(--text-inactive, #999);
                content: "#";
                display: inline-block;
                font-size: 1em;
                line-height: 1;
                margin-left: -1em;
                padding: 0.5em 0;

                text-decoration: none;
                visibility: hidden;
                width: 1em;
            }

            &:hover {
                &::before {
                    visibility: visible;
                }
            }

        } */
    }

    p {
        margin: 1em 0;
    }

    img {
        width: 48%;
        content-visibility: auto;

    }

    img.img-g4 {
        width: 24%;
    }

    img.logo-inline {
        /* max-width: 100%; */
        width: auto;
        height: 1rem;
    }

    img.logo-h3 {
        width: auto;
        height: 1.5rem;
    }

    #cmbchina-logo {
        background-color: #b72d34;
    }



    pre {
        overflow-x: auto;
        /*每行内容过长时，出现水平滚动条*/
    }

    table {
        border-collapse: collapse;
        border: 2px solid rgb(140 140 140);
        font-family: sans-serif;
        font-size: 0.8rem;
        /* letter-spacing: 1px; */

        caption {
            /* caption-side: bottom; */
            padding: 10px;
            font-weight: bold;
            font-size: 1rem;
        }

        th,
        td {
            border: 1px solid rgb(160 160 160);
            padding: 4px 4px;
        }
    }

}

.em-black {
    color: var(--h3-color);
}

.em-blue {
    color: var(--text-em-blue);
}

.em-bold {
    font-weight: bold;
}

.em-normal {
    font-weight: normal;
}

.em-larger {
    font-size: larger;
}

.em-smaller {
    font-size: smaller;
}

main.with-sidebar {
    grid-row: 2;
    grid-column: 2 / span 12;
    /* display: grid;
    grid-template-columns: subgrid; */
    /* gap:inherit; */
    /* display: flex;
    flex-direction: column; */

    /* position: relative; */

    /* 要设置高度，否则 sidebar无法sticky*/
    /* height: 90vh; 
    overflow-y: auto; */

    /* div.container {
        grid-column: 1/span 12;
        grid-row:1;
    } */


}

main.without-sidebar {
    grid-row: 2;
    grid-column: 2 / span 14;
}

aside {
    /* border: 2px solid red; */
    background-color: #eee;
    padding: 2px;
    /* margin: 2px; */

    grid-column: 14 / span 3;

    position: sticky;
    top: 0px;

    * {
        grid-column: 1 / span 2;
        grid-row: 1;
    }

    align-self: start;

    /* display: flex;
    flex-direction: column;
    align-items: flex-start; */

    p,
    a {
        font-size: 0.75rem;
        line-height: var(--text-line-height, 1.6em);
        margin: 0 0;
    }

}

/* 覆盖 Prism.js 默认字体 */
/* 更具体的选择器 */
pre[class*="lang-"] code[class*="lang-"],
pre[class*="lang-"] {
    font-family: monospace !important;
    font-size: 0.95em !important;
    line-height: 1.5 !important;
}

/* body.with-sidebar {
    border: 2px solid green;
} */