/* remove ads */
        .under-post-card, #cnblogs_ch {
            display: none;
        }

        /* remove old header */
        #blogTitle, #navigator #navList {
            display: none;
        }

        /* remove elements for mobile */
        @media only screen and (max-width: 767px) {
        .blogStats {
            visibility: hidden;
        }
        #green_channel {
            border-left: none;
            border-right: none;
            border-top: none;
        }
        .blogStats {
            display: none;
        }
        #footer {
            visibility: hidden;
        }
        /* body > :nth-child(1) {
            display: none;
        }
        body > :nth-child(2) {
            display: none;
        } */
        }

        /* remove theme default */
        * {
            margin: 0;
            padding: 0;
        }
        .postTitle {
            margin: 0;
        }
        .postDesc, .entrylistItemPostDesc {
            padding-bottom: 0;
        }
        .forFlow {
            margin: 0 !important;
        }
        #comment_form, .blog_comment_body {
            margin: 0;
            color: #ccc;
        }
        body input[type="button"] {
            cursor: pointer;
        }
        body, #header, #navigator, #blog_post_info_block, #post_detail .postDesc, #comment_form {
            background: none;
        }

        /* set color */
        body {
            background-color: #3f4476;
            /* background-color: rgba(63, 68, 118, 1); */
            background-image: linear-gradient(to bottom, rgba(63, 68, 118, 1), rgba(63, 68, 118, 1), rgba(63, 68, 118, 1), rgba(63, 68, 118, 1), rgba(63, 68, 118, 1), rgba(63, 68, 118, 1), rgba(63, 68, 118, 1), 
            rgba(255, 128, 0, 1));
        }
        body input, .commentbox_main, .postTitle, #tbCommentBody {
            background: #404040;
            color: #ccc;
        }
        .commentbox_main {
            border: none;
        }
        .commentbox_tab:hover, .commentbox_tab.active {
            border-bottom: 2px solid #367cc2;
            color: #ccc;
        }
        /* #mainContent {
            background-color: #222;
        } */
        .forFlow .topicListFooter, .forFlow .day, .forFlow .postTitle, #cnblogs_post_body, .forFlow .entrylist {
            background-color: #222;
        }
        #cnblogs_post_body, #cnblogs_post_body h1, #cnblogs_post_body h2, #cnblogs_post_body h3, #cnblogs_post_body h4, #cnblogs_post_body h5, #cnblogs_post_body h6   {
            color: #d0d0d0;
        }
        .dayTitle a:link, .dayTitle a:active, .dayTitle a:visited, .entrylistPosttitle, .entrylistTitle{
            color: #666;
        }
        .postCon, .entrylistPostSummary {
            color: #bbb;
        }
        .entrylistPostSummary a {
            color: #06c;
        }
        #sidebar_search input[type="text"] {
            padding-left: 2px;
        }
        #blogTitle1 h1 a{
            color: #0378bb;
        }
        #blogTitle1 h2 a{
            color: #0378bb;
        }
        #navigator1 a {
            color: dodgerblue;
            /* text-shadow: 0 1px white, 1px 0 white, -1px 0 white, 0 -1px white; */
        }
        .CalTodayDay {
            color: orange;
        }
        .postTitle a:link, .postTitle a:visited, .postTitle a:active, .entrylistPosttitle a {
            color: #0378bb;
        }
        body a:hover, body a.sidebar-card-title-a:hover {
            color: #43F2FF !important;
        }
        #sideBar * {
            color: #aaa;
            /* opacity: 1;
            filter: invert(75%); */
        }

        /* set layout */
        #main {
            clear: both;
        }
        #home, #page_begin_html {
            margin: 0 auto;
            width: 61.8%;
        }
        #mainContent {
            margin-right: 220px;
        }
        #main {
            position: relative;
        }
        #sideBar {
            position: absolute;
            width: 200px;
            border-left: none;
            border-top-width: 0;
            overflow: hidden;
            padding: 0 10px 20px 10px;
            /* top: 140px;
            right: 19.1%; */
            top: 14px;
            right: 0;
        }
        @media only screen and (max-width: 767px) {
            #home, #page_begin_html {
                width: auto;
                min-width: unset;
            }
            #calendar {
                display: none;
            }
        }
        @media only screen and (max-width: 767px) {
            #mainContent {
                word-break: break-word;
                width: auto;
                float: none;
            }
            .day, .entrylistItem {
                /* width: 80%; */
            }
        }

        /* add margin padding */
        .day, .entrylistItem {
            /* margin-bottom: 20px; */
            padding-bottom: 25px;
            padding-left: 20px;
            margin-top: 0;
            /* padding-right: 2em; */
            padding-right: 20px;
        }
        .blogStats {
            /* margin-bottom: 15px; */
        }
        @media only screen and (max-width: 767px) {
            #page_begin_html {
                margin: 0 10px;
            }
            .blogStats {
                margin-right: 10px;
            }
            .day, .entrylistItem {
                margin: auto auto auto auto;
                padding-bottom: 25px;
                padding-left: 10%;
                padding-right: 10%;
            }
        }
        #sideBar ul, #blog-news {
            margin-left: 15px;
        }
        #cnblogs_post_body {
            padding: 12px 12px;
        }
        #comment_form {
            padding: 10px 10px;
        }
        .forFlow > :nth-child(1):not(#post_detail) {
            padding-top: 10px;
        }
        .topicListFooter {
            margin-right: 0;
            padding-bottom: 10px;
        }
        .topicListFooter > #nav_next_page {
            margin-right: 10px;
        }
        #comment_nav {
            margin: 10px 0;
        }
        #comment_nav .comment-nav-right {
            border-top: 1px solid #999;
        }
        #cnblogs_post_body {
            margin-bottom: 30px;
        }
        .entrylistTitle {
            margin-left: 20px;
        }
        @media only screen and (max-width: 767px) {
        .entrylistTitle {
            width: 80%;
            margin: auto;
        }
        }
        .entrylistTitle {
            margin-top: 0;
        }
        .topicListFooter {
            margin-top: 0;
            padding-top: 10px;
        }

        /* align */
        #calendar table {
            margin: 0;
        }

        /* overwrite float */
        .dayTitle {
            float: left;
        }
        @media only screen and (max-width: 767px) {
            .day .postTitle, .entrylistItem .entrylistPosttitle {
                width: 100%;
                float: right;
                clear: both;
            }
        }
        .postCon, .entrylistPostSummary, .entrylistItemPostDesc {
            width: 100%;
            float: right;
            clear: both;
        }

        /* overwrite font and line spacing */
        #navigator {
            border-bottom: none;
            border-top: none;
        }
        #blogTitle1 h1 {
            font-size: 330%;
            font-weight: bold;
            line-height: 100%;
            letter-spacing: 1px;
            padding-top: 10px;
        }
        #blogTitle1 h2 {
            font-size: 150%;
            font-weight: bold;
            line-height: 150%;
            letter-spacing: 1px;
            margin-bottom: 10px;
        }
        #blogTitle1 h1 a {
            text-shadow: 3px 3px 3px #fff;
        }
        @media only screen and (max-width: 767px) {
            #blogTitle1 h1 {
                font-size: 180%;
            }
            #blogTitle1 h2 {
                font-size: 100%;
            }
            #blogTitle1 h1 a {
                text-shadow: 2px 2px 2px #fff;
            }
        }
        .postTitle, .entrylistPosttitle {
            font-size: 130%;
            padding: 0 0 10px 20px;
            border-bottom: 1px solid #3d97cb;
            clear: both;
            border-left: 12px solid #3d97cb;
        }
        .postSeparator {
            clear: both;
            height: 1px;
            clear: both;
            float: right;
            margin: 0 auto 5em auto;
        }
        .postCon {
            padding: 10px 0;
        }
        .postCon .c_b_p_desc {
            line-height: 1.8em;
        }
        .dayTitle {
            font-weight: bold;
            font-size: 110%;
            padding: 5px 0 5px 0;
        }
        .entrylistTitle {
            font-weight: bold;
            font-size: 110%;
        }
        body {
            font-family: 'PingFang SC','Helvetica Neue','Helvetica','Arial','Microsoft Yahei',sans-serif;
        }

        /* color gradient */
        .forFlow::before {
            position: relative;
            content: '';
            display: block;
            width: 100%;
            height: 30px;
            z-index: -3;
            background-color: #3f4476;
            background: linear-gradient(to bottom, #3f4476, #222);
        }
        /* .post .postTitle {
            background: linear-gradient(to bottom, #3f4476, #222);
        } */
        .forFlow > .topicListFooter:last-of-type {
            position: relative;
        }
        .forFlow > .topicListFooter:last-of-type::after {
            content: '';
            width: 100%;
            height: 30px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            margin-bottom: -30px;
            background-color: #3f4476;
            background: linear-gradient(to bottom, #222, #DA752B);
        }
        @media only screen and (max-width: 767px) {
        .forFlow > .topicListFooter:last-of-type::after {
            background: linear-gradient(to bottom, #222, #3f4476);
        }
        }
        .forFlow > .entrylist > .entrylistItem + p {
            position: relative;
            clear: both;
            margin-bottom: 30px;
        }
        .forFlow > .entrylist > .entrylistItem + p::after {
            content: '';
            width: 100%;
            height: 30px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            margin-bottom: -30px;
            background-color: #3f4476;
            background: linear-gradient(to bottom, #222, #3f4476);
        }
        #cnblogs_post_body {
            position: relative;
        }
        #cnblogs_post_body::after {
            content: '';
            width: 100%;
            height: 30px;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 1;
            margin-bottom: -30px;
            background-color: #3f4476;
            background: linear-gradient(to bottom, #222, #3f4476);
        }
        /* .day {
            position: relative;
        }
        .day::before {
            content: '';
            width: 20px;
            height: 100%;
            position: absolute;
            left: -20px;
            top: -20px;
            background: linear-gradient(to left, #222, #3f4476);
            border-top: 20px solid;
            border-image: linear-gradient(to left, #222, #3f4476);
            border-top-right-radius: 100px;
        }
        @media only screen and (max-width: 767px) {
            .day::before {
                display: none;
            }
        } */

        /* the sun */
        html {
            position: relative;
        }
        body::after {
            content: '';
            width: 105px;
            height: 45px;
            position: absolute;
            /* display: inline; */
            right: 9.1%;
            bottom: 0;
            z-index: 1;
            background-image: url('https://img2023.cnblogs.com/blog/2338913/202309/2338913-20230910214912023-1176776795.png');
            background-repeat: no-repeat;
            background-position-y: top;
            background-position-x: left;
            opacity: 0.8;
        }
        @media only screen and (max-width: 767px) {
            body::after {
                background-size: 70px 70px;
                height: 30px;
            }
        }
        html::before {
            content: '';
            width: 100%;
            height: 545px;
            position: absolute;
            /* display: inline; */
            left: 0;
            top: 0;
            z-index: -1;
            background-image: url('https://img2023.cnblogs.com/blog/2338913/202309/2338913-20230910233538412-893880373.png');
            background-repeat: no-repeat;
            background-position-y: top;
            background-position-x: left;
            opacity: 0.9;
            background-size: 1103px 262px;
        }
        @media only screen and (max-width: 767px) {
            html::before {
                width: 100%;
                /* background-size: contain; */
                background-size: 383px 122px;
                /* background-size: 575px 183px; */
            }
        }
        body::before {
            content: '';
            width: 19.1%;
            height: 145px;
            position: absolute;
            /* display: inline; */
            left: 0;
            top: 4vh;
            z-index: -2;
            background-image: url('https://img2023.cnblogs.com/blog/2338913/202309/2338913-20230910225154009-758282218.png');
            background-repeat: no-repeat;
            background-position-y: top;
            background-position-x: center;
            background-size: 80px 80px;
        }
        @media only screen and (max-width: 767px) {
            body::before {
            background-size: 40px 40px;
            }
        }
    
        /* animation */
        html::before {
            animation-name: likes; /*动画名称*/
            animation-direction: alternate; /*动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。*/
            animation-timing-function: linear; /*动画执行方式，linear：匀速；ease：先慢再快后慢；ease-in：由慢速开始；ease-out：由慢速结束；ease-in-out：由慢速开始和结束；*/
            animation-delay: 1s; /*动画延迟时间*/
            animation-iteration-count: infinite; /*动画播放次数，infinite：一直播放*/
            animation-duration: 100s; /*动画完成时间*/
        }
        @keyframes likes {
            0%{
                transform:translate(0,0) scale(1);
            }
            25%{
                transform:translate(-20%,-3%) scale(0.95);
            }
            50%{
                transform:translate(-40%,0) scale(1);
            }
            75%{
                transform:translate(-20%,3%) scale(1.15);
            }
            100%{
                transform:translate(0,0) scale(1);
            }
        }

        /* clone titles */
        /* #cnblogs_post_body h1::after {
            content: attr(id);
            float: right;
            font-size: 14px;
            margin-right: -22px;
            max-width: 12px;
            display: inline-block;
        } */
        .js-toc {
            /* position: sticky;
            top: 0px;
            right: 0; */
            display: inline-block;
        }