:root{
    --midnight-purple: rgb(89,82,90);
    --color-article-link: #5171d1;
    --color-hfive: rgb(109,102,110);
}

body {
    font-family: "SF Pro SC","SF Pro Text","PingFang SC",'Noto Sans SC',Tahoma,'Microsoft YaHei UI',sans-serif;
    background-color: rgb(252,252,252);
    margin: 0;
    /*scrollbar-width: 20px;*/
}

/*
body::-webkit-scrollbar {
    width: 9px;
}

body::-webkit-scrollbar-thumb{
    background-color: rgb(40,40,40); 
}*/

a{
    color: var(--midnight-purple);
}

a:hover{
    text-decoration: none;
}

p{
    margin:0;
    padding: 0;
}

#sub {
    display: none;
}

#wrapper,
#main_container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#content {
    width: 50vw;
    margin: 0 auto;
    /*background-color: rgb(246,244,238);*/
    padding: 0 6vw;
}

/*---header start---*/
#header {
    font-family: serif;
    text-align: center;
    margin-bottom: 2vh;
    padding-bottom: 4vh;
    border-bottom: 1px solid var(--midnight-purple);
    width: 100%;
}

#Header1_HeaderTitle,
#Header1_HeaderTitle:visited {
    color: rgb(40, 40, 40);
    text-decoration: none;
}

#Header1_HeaderTitle:hover {
    text-decoration: underline;
}

/*---header end---*/

/*---leftmenu start---*/
.toc>ul>li::marker,
#leftmenu li::marker {
    font-size: 0;
}

#leftmenu {
    font-size: .9rem;
    position: absolute;
    top: 23vh;
    left: 85vw;
    max-width: 8rem;
    overflow: auto;
}

#leftmenu ul {
    padding-left: 0;
    margin: 0;
}

#leftmenu h3 {
    margin: 2vh 0 1vh 0;
}

#RecentPosts>ul>li {
    margin-bottom: 0.2rem;
}
/*---leftmenu end---*/

.postbody {
    display: flex;
    flex-direction: column;
}

.post>h2{
    margin-top:2rem;
}

.postTitle2 {
    text-decoration:none;
    border-bottom: 2px solid;
    border-image: linear-gradient(
  90deg,
  hsl(203deg 92% 59%) 0%,
  hsl(209deg 74% 62%) 11%,
  hsl(215deg 56% 62%) 22%,
  hsl(222deg 40% 60%) 33%,
  hsl(230deg 27% 57%) 44%,
  hsl(242deg 17% 53%) 56%,
  hsl(254deg 13% 48%) 67%,
  hsl(266deg 11% 43%) 78%,
  hsl(279deg 8% 38%) 89%,
  hsl(292deg 5% 34%) 100%
) 0 0 100% 0;
}

.postTitle2:hover{
    border-bottom: 4px solid;
}

p[class="date"] {
    display: none;
}

.postfoot{
    margin: .5rem 0;
}

/*---main article start---*/
#cnblogs_post_body {
    width: 70vw;
    align-self: flex-end;
    font-size: 1.25rem !important;
}

#cnblogs_post_body>*{
    margin-left: 20vw !important;
}

#cnblogs_post_body>.toc {
    position: sticky;
    top: 20vh;
    margin: 0 0 -70vh 0 !important;
    width: 7rem;
    max-width: 15vw;
    height: 70vh;
    overflow: auto;
    padding-right: 1rem;
}

#cnblogs_post_body>.toc>ul>li {
    margin-top: 1rem;
    font-size: 1.1rem;
}

#cnblogs_post_body>.toc>ul{
    margin-left: 0.5em;
}

#cnblogs_post_body>.toc>.toc-container-header,
#cnblogs_post_body>.toc>ul>li {
    text-align: right;
}

#cnblogs_post_body>p:first-of-type,
#cnblogs_post_body>.toc + p {
    margin-top: 0;
    margin-bottom: 0;
}

#cnblogs_post_body>p {
    width: 50vw;
    line-height: 1.75;
    margin-top:0;
    margin-bottom: 1rem;
    color:#101010;
}

#cnblogs_post_body em{
    font-size: 1.25rem;
    margin: 0;
}

#cnblogs_post_body em::before{
    content: "*";
    color: sandybrown;
    padding-right: 1.25em;
}

#cnblogs_post_body>h5 {
    display: inline-block;
    background-color: var(--color-hfive);
    color: white;
    padding: 0 .62rem;
    font-weight: 500;
    font-size: 1.25rem;
    margin-top: .62rem;
    margin-bottom: 1.25rem;
}

.cnblogs-markdown code, .cnblogs-post-body code,
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs {
    font-size: 1.25rem !important;
}

#cnblogs_post_body a{
    color: var(--color-article-link);
    text-decoration: none;
}

#cnblogs_post_body a:visited{
    color: var(--color-article-link);
}

#cnblogs_post_body a:hover{
    text-decoration: underline;
}
/*---main article end---*/

/*---comment start---*/
#comment_form {
    width: 100%;
    margin: auto;
    font-size: 1rem;
}

.comment_textarea{
    width: 100%;
}

#footer {
    font-size: .9rem;
    margin-top: 3rem;
}

#footer br {
    display: none;
}

#footer br:last-of-type {
    display: initial;
}

@media screen and (max-width: 1024px) {

    #leftmenu{
        position: initial;
        max-width: 100vw;
    }

    #content {
        width: 62vw;
        margin: 0 auto 0 20vw;
    }

    #cnblogs_post_body {
        width: 86vw;
    }

    #cnblogs_post_body>p {
        width: 62vw;
    }

    #cnblogs_post_body>* {
        margin-left: 24vw !important;
    }

}

@media screen and (max-width: 768px) {
    
    #leftmenu>h3, #leftmenu>ul{
        display: none;
    }

    #content{
        width: 90vw;
        margin: 0;
        padding: 0;
    }

    #cnblogs_post_body {
        width: 90vw;
    }

    #cnblogs_post_body>p {
        width: 100%;
    }

    #cnblogs_post_body>* {
        margin-left: 0 !important;
    }

    #cnblogs_post_body>.toc{
        position: initial;
        width: init+ial;
        max-width: initial;
        height: initial;
        margin: initial !important;
    }

    #cnblogs_post_body>.toc>.toc-container-header,
    #cnblogs_post_body>.toc>ul>li {
        text-align: initial;
    }

    #green_channel {
        width: 100%;
    }
}