body {
    font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,  "Source Sans Pro", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", Arial, sans-serif;
    color: #4a4a4a;
    font-weight: 400;
    transition: all 2s ease;
}
#page_begin_html{
    display: block;
    height: 90vh;
    background-image: url(https://images.cnblogs.com/cnblogs_com/dongqunren/1377778/o_191107135736bg0.jpg);
    background-position: 50%;
    background-size: cover;
    position: relative;
    text-aalign: center;
}
#page_begin_html::before {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    background: #840d79e0;
    background: linear-gradient(45deg,#840d79e0,#d02cb44f);
    background: -webkit-linear-gradient(135deg,#840d79e0,#d02cb44f);
}
#page_begin_html p {
    display: block;
    max-width: 690px;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.5rem;
    color: #fff;
    font-style: italic;
    text-align: center;
    font-weight: 700;
}
#home {
    width: auto;
    margin: -60px 30px 60px;
    border-radius: 6px;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
    background: #fff;
    position: relative;
    z-index: 3;
}
@media (max-width: 767px) {
    #home {
       margin-left: 10px;
       margin-right: 10px;
   }
}
#header {
    padding: 25px 15px 10px;
    margin: 0 auto;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    transition: all .15s ease;
}
.no-transparent {
    padding-top: 10px !important;
    color: #555 !important;
    background-color: #fff!important;
    box-shadow: 0 4px 18px 0 rgba(0,0,0,.12), 0 7px 10px -5px rgba(0,0,0,.15);
}
@media (min-width: 767px) {
   #header {
      width: calc(100% - 60px);
      padding: 25px  30px 10px;
  } 
}
@media (min-width: 1200px) {
   #header {
      max-width: 1140px;
      padding: 25px  calc((100% - 1140px)/2) 10px;
  } 
}
#header #blogTitle a,
#header #navigator a,
#header #navigator .blogStats {
   color: inherit;
}
#blogTitle {
    height: 50px;
    font-size: 1.125rem;
}
#blogTitle h1 {
    margin-top: 0;
    position: relative;
    height: 50px;
    font-size: 1.125rem;
    line-height: 50px;
    font-weight: 400;
    letter-spacing: 3px;
}
#blogTitle h1 a {
    white-space: nowrap;
}
#navigator {
    flex: 1;
    display: flex;
    margin: 0;
    border: 0;
}
#navigator #navList {
    display: flex;
    margin-left: auto;
}
#navList li {
    float: none;
    margin: 0;
}
#navList a:link, #navList a:visited, #navList a:active {
    font-weight: 400;
    color: inherit;
}
#navList a {
    padding: 15px;
    height: 20px;
    line-height: 20px;
}
.blogStats {
    margin: 0;
    height: 50px;
    line-height: 50px;
}
@media (max-width: 767px){
    #navigator {
        position: fixed;
        flex: none;
        display: block;
        top: 0;
        height: 100vh;
        width: 230px;
        right: 0;
        margin: 0!important;
        z-index: 6;
        visibility: visible;
        background-color: #fff;
        overflow-y: visible;
        border-top: none;
        text-align: left;
        padding: 0;
        max-height: none!important;
        transform: translate3d(230px,0,0);
        transition: all .5s cubic-bezier(.685,.0473,.346,1);
        color: #3c4858;
    }
    #navigator #navList {
        float: none;
        display: block;
        width: 100%;
    }
    #navList li {
        float: none;
        display: block;
    }
    #blog_nav_sitehome,
    #blog_nav_myhome,
    #blog_nav_admin {
        border-bottom: 1px solid #e5e5e5;
    }
    #navList a {
        float: none;
        padding: 15px;
        margin: 5px 15px;
        text-align: left;
    }
    .blogStats {
        float: none;
        padding-right: 15px;
    }
}
.CalNextPrev {
    text-align: center !important;
}
.postTitle {
    border-left-color: #9c27b0 !important;
}
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
    color: #9c27b0 !important;
}
.postTitle a:hover,
a:hover {
     color: #9c27b0 !important;
}
#header a:hover {
    color: inherit !important;
}
.CalTodayDay {
    border-radius: 3px;
    background: #9c27b0 !important;
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
}
.
#blog-calendar {
    border: 0;
    border-radius: 6px;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}
#tbCommentAuthor {
    background-color: #e9ecef;
    border: 0;
}
.comment_btn {
    background-color: #9c27b0;
    border-color: #9c27b0;
}
.CalTodayDay a {
    color: #fff !important;
}
.comment_btn:hover {
    background-color: #9c27b0;
    box-shadow: 0 14px 26px -12px rgba(156,39,176,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(156,39,176,.2);
}
#footer {
    font-size: 16px;
    font-family: Roboto,Helvetica,Arial,sans-serif;
    font-weight: 300;
    line-height: 1.5em;
}
#green_channel a {
    border-radius: .2rem;
    background: none;
    transition: box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
}
#green_channel #green_channel_digg {
    background-color: #9124a3;
    border-color: #701c7e;
    box-shadow: 0 2px 2px 0 rgba(156,39,176,.14), 0 3px 1px -2px rgba(156,39,176,.2), 0 1px 5px 0 rgba(156,39,176,.12);
}
#green_channel #green_channel_digg:hover {
    background: none;
    background-color: #9124a3;
    box-shadow: 0 14px 26px -12px rgba(156,39,176,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(156,39,176,.2);
}
#green_channel #green_channel_favorite {
    background-color: #ff9800;
    border-color: #ff9800;
    box-shadow: 0 2px 2px 0 rgba(255,152,0,.14), 0 3px 1px -2px rgba(255,152,0,.2), 0 1px 5px 0 rgba(255,152,0,.12);
}
#green_channel #green_channel_favorite:hover {
    background: none;
    background-color: #ff9800;
    box-shadow: 0 14px 26px -12px rgba(255,152,0,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(255,152,0,.2);
}
#green_channel #green_channel_follow {
    background-color: #e91e63;
    border-color: #e91e63;
    box-shadow: 0 2px 2px 0 rgba(233,30,99,.14), 0 3px 1px -2px rgba(233,30,99,.2), 0 1px 5px 0 rgba(233,30,99,.12);
}
#green_channel #green_channel_follow:hover {
    background: none;
    background-color: #e91e63;
    box-shadow: 0 14px 26px -12px rgba(233,30,99,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(233,30,99,.2);
}
.author_avatar {
    box-shadow: 0 5px 15px -8px rgba(0,0,0,.24), 0 8px 10px -5px rgba(0,0,0,.2);
}
#sideBar {
    overflow: visible;
}
.catListView,
.catListPostCategory  {
    margin-top: 65px;
    border: 0;
    border-radius: 6px;
    color: #000000de;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
    padding-top: 1px;
}
.catListTitle {
    border-radius: 3px;
    padding: 1rem 15px;
    margin-left: 15px;
    margin-right: 15px;
    margin-top: -30px;
    background: linear-gradient(60deg,#ab47bc,#7b1fa2);
    box-shadow: 0 5px 20px 0 rgba(0,0,0,.2), 0 13px 24px -11px rgba(156,39,176,.6);
    color: #fff;
    font-weight: 700;
    font-family: Roboto Slab,Times New Roman,serif;
    font-size: 1.125rem;
    line-height: 1.5em;
}
#sideBarMain li {
    padding: .3rem 1.875rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-size: 14px;
}
#blog-calendar {
   width: 100%;
}
.navbar-toggler {
    padding: .25rem .75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    outline: none;
    text-decoration: none;
    cursor: pointer;
    margin: 0;
    font-family: inherit;
    position: relative;
    z-index: 6;
}
.navbar-toggler-icon {
    position: relative;
    width: 22px;
    height: 2px;
    vertical-align: middle;
    outline: 0;
    display: block;
    border-radius: 1px;
    background-color: #fff;
}

.navbar-toggler-icon+.navbar-toggler-icon {
    margin-top: 4px;
}

@keyframes h {
    0% {
        top: 6px;
        transform: rotate(135deg);
    }

    45% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        top: 0;
        transform: rotate(0);
    }
}

.open .navbar-toggler-icon:nth-child(3) {
    bottom: 6px;
    animation: i .5s 0s;
    animation-fill-mode: forwards;
}

.open .navbar-toggler-icon:nth-child(2) {
    opacity: 0;
}

.open .navbar-toggler-icon:nth-child(1) {
    top: 6px;
    animation: g .5s 0s;
    animation-fill-mode: forwards;
}

.navbar-toggler-icon:nth-child(3) {
    bottom: 0;
    animation: j .5s 0s;
    animation-fill-mode: forwards;
}

.navbar-toggler-icon:nth-child(2) {
    opacity: 1;
}

.navbar-toggler-icon:nth-child(1) {
    top: 0;
    animation: h .5s 0s;
    animation-fill-mode: forwards;
}

@keyframes j {
    0% {
        bottom: 6px;
        transform: rotate(-135deg);
    }

    45% {
        transform: rotate(10deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes i {
    0% {
        bottom: 0;
        transform: rotate(0deg);
    }

    45% {
        bottom: 6px;
        transform: rotate(-145deg);
    }

    75% {
        transform: rotate(-130deg);
    }

    100% {
        transform: rotate(-135deg);
    }
}

@keyframes g {
    0% {
        top: 0;
        transform: rotate(0deg);
    }

    45% {
        top: 6px;
        transform: rotate(145deg);
    }

    75% {
        transform: rotate(130deg);
    }

    100% {
        transform: rotate(135deg);
    }
}
@media (min-width: 767px) {
     .navbar-toggler {
        display: none;
     }
}
@media (max-width: 767px) {
    #blogTitle {
        display: flex;
        width: 100%;
        justify-content: space-between!important;
        position: relative;
        align-items: center;
        transition: transform .5s cubic-bezier(.685,.0473,.346,1);
    }
    #lnkBlogLogo {
        display: none;
    }
    .open #blogTitle {
        transform: translate3d(-230px,0,0);
    }
    #navigator  {
        transition: all .5s cubic-bezier(.685,.0473,.346,1);
    }
    .open #navigator {
         transform: translateZ(0);
    }
}
.no-transparent .navbar-toggler-icon {
    background-color: #555;
}
.cnblogs-markdown .hljs, .cnblogs-post-body .hljs, .hljs {
    background: #23241f !important;
    color: #f8f8f2 !important;
    direction: ltr;
    font-family: Consolas,"Courier New",Courier,FreeMono,monospace !important;
    border: 0 !important;
    font-size: 1em !important;
}
.hljs-attr, .hljs-keyword, .hljs-name, .hljs-selector-tag {
    color: #f92672 !important;
}
.hljs-bullet, .hljs-link, .hljs-literal, .hljs-number, .hljs-quote, .hljs-regexp {
    color: #ae81ff !important;
}
.hljs-addition, .hljs-built_in, .hljs-builtin-name, .hljs-selector-attr, .hljs-selector-id, .hljs-selector-pseudo, .hljs-string, .hljs-template-variable, .hljs-type, .hljs-variable {
    color: #e6db74 !important;
}
.hljs-comment, .hljs-quote, .hljs-variable {
    color: #FFEB3B !important;
}
.hljs-tag {
    color: #2196F3 !important;
}
pre {
    overflow-x: auto;
    padding: 1.25em 1.5em;
    white-space: pre;
    word-wrap: normal;
    background-color: #23241f !important;
    color: #586e75 !important;
    border-radius: .5rem;
}
#nav_next_page a,
.pager a {
    background-color: #9124a3;
    border-color: #701c7e;
    box-shadow: 0 2px 2px 0 rgba(156,39,176,.14), 0 3px 1px -2px rgba(156,39,176,.2), 0 1px 5px 0 rgba(156,39,176,.12);
    display: inline-block;
    padding: 3px 8px;
    color: #fff;
    transition: all .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1);
    border-radius: 3px;
}
#nav_next_page a:hover,
.pager a:hover {
    color: #fff !important;
    background: none;
    background-color: #9124a3;
    box-shadow: 0 14px 26px -12px rgba(156,39,176,.42), 0 4px 23px 0 rgba(0,0,0,.12), 0 8px 10px -5px rgba(156,39,176,.2);
}
.c_b_p_desc_readmore {
    padding: 0 3px 2px 3px;
    border-bottom: 2px solid #9c27b0;
    text-decoration: none !important;
    font-weight: 500;
}
.xsj_heading_h1 {
    font-size: 2em !important;
}
.xsj_heading_h2 {
   font-size: 1.5em !important;
}
.feedbackListSubtitle a:link, .feedbackListSubtitle a:visited, .feedbackListSubtitle a:active {
    color: #9c27b0 !important;
}
.back-top {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    padding: 8px;
    background: #7b1fa2;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    display: none;
    box-shadow: 0 16px 24px 2px rgba(0,0,0,.14), 0 6px 30px 5px rgba(0,0,0,.12), 0 8px 10px -5px rgba(0,0,0,.2);
}
.medium-zoom--opened .medium-zoom-overlay, .medium-zoom-image {
    z-index: 9999;
}