@import url('https://at.alicdn.com/t/font_2464210_3bqn3dlplbs.css');
@import url('https://cdn.jsdelivr.net/npm/hajeekn-static/styles/animate.min.css');
@import url('https://cdn.jsdelivr.net/gh/sviptzk/StaticFile_HEXO@latest/butterfly/css/plugins.min.css');
@import url('https://cdn.jsdelivr.net/npm/more-beautiful-div-framework@1.0.9/more-beautiful-div-framework.min.css');
@font-face {
    font-family: Meow Font;
    src: url('https://npm.elemecdn.com/perorepe-cdn/v1/static-files/meow.ttf');
}
body {
    font-family: 'Meow Font';
    font-weight: bold;
}
html {
    font-family: 'Meow Font';
}
#page-header #site-subtitle:hover, #page-header #site-title:hover {
    color: #fff;
    text-shadow: #fff 0 0 10px, #fff 0 0 20px, #fff 0 0 30px, #0ff 0 0 40px, #0ff 0 0 70px, #0ff 0 0 80px, #0ff 0 0 100px;
}
#page-header #site-subtitle, #page-header #site-title {
    color: #fff;
    text-shadow: #fff 0 0 10px, #fff 0 0 20px, #ff00de 0 0 30px, #ff00de 0 0 40px, #ff00de 0 0 70px, #ff00de 0 0 80px, #ff00de 0 0 100px;
    transition: 0.3s;
}
#nav.hide-menu .menus_items {
    display: none;
}
#page-header.nav-fixed #nav {
    position: fixed;
    top: -60px;
    z-index: 91;
    background: rgba(255,255,255,.8);
    backdrop-filter: blur(3px);
    -webkit-box-shadow: 0 5px 6px -5px rgb(133 133 133 / 60%);
    box-shadow: 0 5px 6px -5px rgb(133 133 133 / 60%);
    -webkit-transition: -webkit-transform .2s ease-in-out,opacity .2s ease-in-out;
    -moz-transition: -moz-transform .2s ease-in-out,opacity .2s ease-in-out;
    -o-transition: -o-transform .2s ease-in-out,opacity .2s ease-in-out;
    -ms-transition: -ms-transform .2s ease-in-out,opacity .2s ease-in-out;
    transition: transform .2s ease-in-out,opacity .2s ease-in-out;
}
#aside-content #card-toc .toc-content .toc-link.active {
    border-left-color: #365dff;
    background: var(--loger-theme);
    color: #fff;
}
#footer {background: rgba(255,255,255,.15);border-radius: 31px;}body{font-size: 0.7rem!important}
.wowpanels { transition: all .4s cubic-bezier(.39,.575,.565,1); }
.app-refresh{position:fixed;top:-2.2rem;left:0;right:0;z-index:99999;padding:0 1rem;font-size:15px;height:2.2rem;transition:all .3s ease}.app-refresh-wrap{display:flex;color:#fff;height:100%;align-items:center;justify-content:center}.app-refresh-wrap a{color:#fff;text-decoration:underline;cursor:pointer}
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body{left:-66px!important}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover{left:0!important}
/* Custom Style */
/* Author: Hajeekn */
:root {
    --loger-white: #fff;
    --loger-none: rgba(0, 0, 0, 0);
    --loger-gray: #999999;
    --loger-yellow: #ffc93e;
    --loger-main: #ff0000;
    --loger-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234, .20);
    --loger-shadow-white: 0 8px 12px -3px rgba(255, 255, 255, .20);
    --loger-shadow-black: 0 0 12px 4px rgba(0, 0, 0, .08);
    --loger-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62, .12);
    --loger-shadow-pink: 0 8px 12px -3px #ee7d7936;
    --loger-shadow-lightblack: 0 5px 12px -5px rgba(102, 68, 68, 0.1);
    --loger-shadow-light2black: 0 5px 12px -5px rgba(102, 68, 68, 0.2);
    --loger-logo-color: linear-gradient(215deg, #4584ff 30%, #ff7676 70%);
    --loger-sidebar-bg: var(--loger-theme)
}

::selection {
    background: var(--loger-blue);
    color: var(--loger-white)
}

[data-theme=newyear] {
    --loger-theme: #ff0000;
    --loger-blue: #ff5353;
    --loger-fontcolor: #363636;
    --loger-background: #f5eded;
    --loger-maskbg: rgba(245, 19, 19, 0.6);
    --loger-hovertext: #ff5353;
    --loger-ahoverbg: #faf7f7;
    --loger-lighttext: #ef794f;
    --loger-secondtext: rgba(60, 60, 67, 0.6);
    --loger-card-btn-bg: #f1e8e8;
    --loger-post-blockquote-bg: #f7f2f2;
    --loger-post-tabs-bg: #f8f2f2;
    --loger-sceondbg: #f8f2f2;
    --loger-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.1);
    --loger-card-bg: #ffffffa1;
}

[data-theme=light] {
    --loger-theme: #5374ff;
    --loger-blue: #5374ff;
    --loger-fontcolor: #363636;
    --loger-background: #edf0f5;
    --loger-maskbg: rgba(255, 255, 255, 0.6);
    --loger-hovertext: #5374ff;
    --loger-ahoverbg: #F7F7FA;
    --loger-lighttext: #ef794f;
    --loger-secondtext: rgba(60, 60, 67, 0.6);
    --loger-card-btn-bg: #e8eaf1;
    --loger-post-blockquote-bg: #f2f5f7;
    --loger-post-tabs-bg: #f2f5f8;
    --loger-sceondbg: #f2f5f8;
    --loger-shadow-nav: 0 5px 12px -5px rgba(102, 68, 68, 0.1);
    --loger-card-bg: #fff;
    --loger-sidebar-bg: var(--loger-theme)
}

[data-theme=dark] {
    --loger-theme: #007AFF;
    --loger-blue: #007AFF;
    --loger-fontcolor: #F7F7FA;
    --loger-background: #18171d;
    --loger-maskbg: rgba(0, 0, 0, 0.6);
    --loger-hovertext: #0A84FF;
    --loger-ahoverbg: #fff;
    --loger-lighttext: #f2b94b;
    --loger-secondtext: #a1a2b8;
    --loger-card-btn-bg: #2e2d38;
    --loger-post-blockquote-bg: #000;
    --loger-post-tabs-bg: #121212;
    --loger-sceondbg: #30343f;
    --loger-shadow-nav: 0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --loger-card-bg: #1d1b26;
    --loger-sidebar-bg: var(--loger-theme)
}

#recent-posts {
    margin-top: -1rem;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between
}

#recent-posts>.recent-post-item {
    margin-top: 1rem;
    display: inline-block;
    height: auto;
    width: 49%;
    color: var(--font-color) !important;
}
#aside-content .item-headline {
    padding-bottom: .3rem;
    font-size: 1.2em;
    color: var(--font-color);
}

#recent-posts>.recent-post-item .post_cover {
    width: 100%;
    height: 200px
}

#recent-posts>.recent-post-item .post_cover img.post_bg {
    width: 100%;
    height: 100%
}

#recent-posts>.recent-post-item {
    flex-direction: column
}

#recent-posts>.recent-post-item .left_radius {
    border-radius: 8px 8px 0 0
}

#recent-posts>.recent-post-item .right_radius {
    border-radius: 8px 8px 0 0
}

.recent-post-item {
    height: auto !important
}

.recent-post-info {
    padding: 0 40px;
    margin-top: 1em;
    width: 100% !important
}

#recent-posts>.recent-post-item>.recent-post-info>.article-title {
    -webkit-line-clamp: 1;
    margin-top: .3rem;
    margin-bottom: .3rem;
    color: var(--text-highlight-color);
    font-size: 1.2em;
    line-height: 1.4
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
    margin-bottom: 1rem
}

@media screen and (max-width:768px) {
    #recent-posts>.recent-post-item {
        width: 100%
    }
}

#aside-content .card-widget {
    position: relative;
    overflow: hidden;
    margin-top: 1rem;
    padding: 1rem 1.2rem;
    border-radius: 8px;
    background: var(--loger-card-bg);
    -webkit-box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
    box-shadow: 0 4px 8px 6px rgba(7, 17, 27, .06);
    -webkit-transition: box-shadow .3s;
    -moz-transition: box-shadow .3s;
    -o-transition: box-shadow .3s;
    -ms-transition: box-shadow .3s;
    transition: box-shadow .3s
}

#nav .menus_items .menus_item .menus_item_child li:hover {
    background: var(--text-bg-hover);
    transition: all 1.5s
}

#nav .menus_items .menus_item>a:after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 3px;
    background-color: #80c8f8;
    content: '';
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    transition: all 1.5s
}

#nav .menus_items .menus_item:hover i.expand {
    -webkit-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
    transition: all 1.5s
}

#nav .menus_items .menus_item i.expand {
    padding: 4px;
    -webkit-transition: -webkit-transform .3s;
    -moz-transition: -moz-transform .3s;
    -o-transition: -o-transform .3s;
    -ms-transition: -ms-transform .3s;
    transition: transform .3s;
    transition: all 1.5s
}

#recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
    color: #49b1f5;
    transition: all 1.5s
}

#rightside>div>a:hover,
#rightside>div>button:hover {
    background-color: var(--btn-hover-color);
    transition: all .5s
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap:hover {
    color: #49b1f5;
    transition: all .5s
}

#aside-content .card-info .card-info-data>.card-info-data-item a .length-num:hover {
    color: #49b1f5;
    transition: all 1.5s
}

.CoolButton {
    background: linear-gradient(to right, #2f80ed, #56ccf2);
    height: 4em;
    width: 100%;
    border-radius: 8px;
    display: inline-block;
    text-align: center;
    line-height: 4em;
    font-weight: 700;
    font-size: .9rem;
    color: #eff;
    transition: all .4s cubic-bezier(.39, .575, .565, 1)
}

.CoolButton:hover {
    transform: perspective(300px) rotateX(0) rotateY(0) rotateZ(0) scale3d(1, 1, 1);
    transition: all .4s cubic-bezier(.39, .575, .565, 1)
}

#recent-posts>.recent-post-item>.recent-post-info:hover {
    transform: translateX(0);
    transition: all 1.5s;
    height: 98%
}

#recent-posts>.recent-post-item>.recent-post-info {
    transform: translateX(0);
    transition: all 1.5s
}

#page .tag-cloud-list a {
    color: #fff !important;
    font-size: 1.4em !important;
    padding: .2em .5em;
    background: #5a4f4ffc;
    margin: .5em .5em;
    border-radius: 12px
}

#page .tag-cloud-list a:hover {
    background: #409eff !important;
    box-shadow: var(--btn-bg)
}

#rightside>div>a,
#rightside>div>button {
    margin-bottom: 8px;
    transition: .3s
}

.meTags {
    font-size: 1.1em;
    color: #fff !important;
    font-size: 1.4em !important;
    padding: .2em .5em;
    background: #5a4f4ffc;
    margin: .5em .5em;
    border-radius: 12px
}

.meTags:hover {
    background: #eff !important;
    box-shadow: var(--btn-bg)
}

#aside-content .aside-list>.aside-list-item .content>time {
    display: none
}

#aside-content .aside-list>.aside-list-item .content>.title {
    -webkit-line-clamp: 3;
    font-weight: 700;
    padding: 2px 0
}

#aside-content .aside-list>.aside-list-item {
    padding: 8px;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    border-radius: 12px;
    transition: .3s;
    margin: 4px 0
}

#aside-content .aside-list>.aside-list-item:not(:last-child) {
    border-bottom: 0 dashed var(--loger-background) !important
}

#aside-content .aside-list>.aside-list-item a {
    border-radius: 12px
}

#aside-content .aside-list>.aside-list-item:hover {
    background: var(--loger-main);
    color: var(--loger-white);
    transition: .3s;
    transform: scale(1.03);
    box-shadow: var(--loger-shadow-black)
}

#aside-content .aside-list>.aside-list-item:hover a {
    color: var(--loger-white) !important
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap a {
    color: var(--loger-secondtext)
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap i {
    margin: 0 .4rem 0 0
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap .sticky {
    color: var(--loger-lighttext)
}

#recent-posts>.recent-post-item {
    height: 14.5em;
    background: var(--loger-card-bg)
}

@media screen and (min-width:769px) {
    #recent-posts>.recent-post-item:hover .post_cover img.post_bg {
        width: 93%;
        transition: all .3s
    }

    #recent-posts>.recent-post-item .post_cover img.post_bg {
        width: 100%;
        transition: all .3s
    }

    #recent-posts>.recent-post-item:hover>.recent-post-info {
        transform: translateX(-10px);
        transition: all .3s;
        position: relative
    }

    #recent-posts>.recent-post-item>.recent-post-info {
        transform: translateX(0);
        transition: all .3s
    }
}

#aside-content .card-widget {
    box-shadow: var(--loger-shadow-lightblack);
    background: var(--loger-card-bg);
    color: var(--font-color);
}

#aside-content .card-widget:hover {
    box-shadow: var(--loger-shadow-light2black)
}

#recent-posts>.recent-post-item {
    box-shadow: var(--loger-shadow-lightblack)
}

#recent-posts>.recent-post-item:hover {
    box-shadow: var(--loger-shadow-light2black)
}

@media screen and (max-width:768px) {
    #sidebar-menus>div.author-avatar {
        display: none
    }

    #recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap {
        display: none
    }

    #rightside {
        display: none
    }

    #loading-box {
        display: none
    }
}

.recent-post-item:hover a.article-meta__categories {
    margin-left: 12px;
    padding: 4px 8px
}

a.article-meta__categories {
    position: absolute;
    padding: 4px 10px;
    background: var(--loger-card-bg);
    border-radius: 32px;
    margin-left: 16px;
    transform: translateY(-85px);
    font-size: .6rem;
    font-weight: 700
}

a.article-meta__categories:hover {
    background: var(--loger-blue);
    color: var(--loger-white);
    box-shadow: var(--loger-shadow-blue)
}

@media screen and (max-width:1200px) {
    a.article-meta__categories {
        display: none
    }
}

#recent-posts>.recent-post-item>.recent-post-info>.article-title {
    line-height: 1.6;
    margin-top: 20px;
    font-weight: 700;
    color: var(--loger-fontcolor)
}

#recent-posts>.recent-post-item>.recent-post-info>.article-title:hover {
    color: var(--loger-hovertext)
}

@media screen and (max-width:768px) {
    #recent-posts>.recent-post-item>.recent-post-info>.article-title {
        margin-top: 0
    }
}

@media screen and (max-width:768px) {
    .layout {
        padding: 0 5px !important
    }
}

.article-meta-wrap {
    padding-top: 12px;
    color: var(--loger-secondtext) !important
}

#recent-posts>.recent-post-item>.recent-post-info>.article-meta-wrap>.post-meta-date {
    right: 85px;
    text-align: right;
    position: absolute
}

#pagination .next-post,
#pagination .prev-post,
.next-post.pull-right,
.prev-post.pull-left {
    background: var(--loger-background)
}

#pagination img.next-cover,
#pagination img.prev-cover {
    opacity: .15
}

#pagination .next-post:hover img.next-cover,
#pagination .next-post:hover img.prev-cover,
#pagination .prev-post:hover img.next-cover,
#pagination .prev-post:hover img.prev-cover {
    opacity: .4
}

#pagination .next-post .label,
#post #pagination .prev-post .label {
    color: var(--loger-fontcolor)
}

#pagination .next_info,
#post #pagination .prev_info {
    color: var(--loger-fontcolor);
    font-weight: 700
}

#post #pagination {
    overflow: hidden
}

#article-container {
    color: var(--loger-fontcolor) !important;
}
[data-theme=dark] #footer:before, [data-theme=dark] #web_bg:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.7) !important;
    content: '';
}
.moments-item-img img {
    transition: 0.3s !important;
}
.moments-item-img img:hover {
    transform: scale3d(1.2, 1.2, 1) !important;
}
.moments-item {
    transition: 0.3s !important;
}
.moments-item:hover {
    border-radius: 15px !important;
    box-shadow: rgba(0, 0, 0, 0.055) 0 0.5px 0.5px 0, rgba(0, 0, 0, 0.048) 0 0.5px 0.5px 0 !important;
}
#nav .menus_items .menus_item .menus_item_child {
    transition: 0.3s im !important;
}
.site-page child {
    transition: 0.3s !important;
}
.site-page child:hover {
    background: var(--loger-theme) !important;
}
@media screen and (min-width:769px) {
    #pagination .page-number {
        width: 2rem;
        background: var(--loger-card-bg);
        height: 2rem;
        line-height: calc(2rem - 2px);
        border-radius: 8px !important;
        margin: 0 .3rem;
        box-shadow: var(--loger-shadow-lightblack);
        border-width: 1px;
        border-style: solid;
        border-color: var(--loger-none)
    }

    #pagination .page-number.current {
        background: var(--loger-theme)
    }

    #pagination .page-number.current:hover {
        background: var(--loger-theme);
        color: var(--loger-white)
    }

    #pagination .page-number:hover {
        color: var(--loger-fontcolor);
        border-color: var(--loger-theme);
        background: var(--loger-sceondbg)
    }

    #pagination a.extend.next:hover,
    #pagination a.extend.prev:hover {
        color: var(--loger-white);
        background: var(--loger-theme)
    }

    #pagination span.space {
        margin: 0 .3rem
    }

    #pagination a.extend.next,
    #pagination a.extend.prev {
        width: 4rem;
        height: 2rem;
        line-height: 2rem;
        border-radius: 8px !important;
        background: var(--card-bg);
        box-shadow: var(--loger-shadow-lightblack)
    }

    #pagination {
        overflow: visible
    }

    #aside-content .aside-list>.aside-list-item .content>time {
        display: none
    }

    #aside-content .aside-list>.aside-list-item .content>.title {
        -webkit-line-clamp: 3;
        font-weight: 700;
        padding: 2px 0
    }

    #aside-content .aside-list>.aside-list-item {
        padding: 8px;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        border-radius: 12px;
        transition: .3s;
        margin: 4px 0
    }

    #aside-content .aside-list>.aside-list-item:not(:last-child) {
        border-bottom: 0 dashed var(--loger-background) !important
    }

    #aside-content .aside-list>.aside-list-item a {
        border-radius: 12px
    }

    #aside-content .aside-list>.aside-list-item:hover {
        background: var(--loger-main);
        color: var(--loger-white);
        transition: .3s;
        transform: scale(1.03);
        box-shadow: var(--loger-shadow-black)
    }

    #aside-content .aside-list>.aside-list-item:hover a {
        color: var(--loger-white) !important
    }

    #aside-content .card-archives ul.card-archive-list>.card-archive-list-item.more span,
    #aside-content .card-categories ul.card-category-list>.card-category-list-item.more span {
        transition: .3s !important
    }

    #aside-content .card-archives ul.card-archive-list>.card-archive-list-item:hover.more span,
    #aside-content .card-categories ul.card-category-list>.card-category-list-item.more span {
        transition: .3s !important
    }

    #aside-content .card-archives ul.card-archive-list>.card-archive-list-item a:hover,
    #aside-content .card-categories ul.card-category-list>.card-category-list-item a:hover {
        color: var(--loger-white);
        background-color: var(--loger-blue);
        box-shadow: var(--loger-shadow-blue);
        border-radius: 12px
    }

    #aside-content .card-archives ul.card-archive-list>.card-archive-list-item a,
    #aside-content .card-categories ul.card-category-list>.card-category-list-item a {
        border-radius: 12px;
        margin: 2px 0
    }

    #aside-content .card-tag-cloud {
        color: var(--heo-lighttext) !important;
        font-weight: 500
    }

    #rightside>div>a,
    #rightside>div>button {
        display: block;
        margin-bottom: 2px;
        width: 30px;
        height: 30px;
        background-color: var(--loger-theme);
        color: var(--btn-color);
        text-align: center;
        font-size: 16px
    }

    .layout>div:first-child:not(.recent-posts) {
        -webkit-align-self: flex-start;
        align-self: flex-start;
        -ms-flex-item-align: start;
        padding: 50px 40px;
        border-radius: 8px;
        background: var(--loger-card-bg);
        -webkit-box-shadow: var(--card-box-shadow);
        box-shadow: var(--card-box-shadow)
    }

    #post-info #post-meta {
        color: var(--loger-white) !important;
        font-size: 95%
    }

    #post-info .post-title {
        margin-bottom: .4rem;
        color: var(--loger-white) !important;
        font-weight: 400;
        font-size: 2.5em;
        line-height: 1.5;
        -webkit-line-clamp: 3
    }

    #page-header #post-info {
        position: absolute;
        bottom: 5rem;
        padding: 0 8%;
        width: 100%;
        color: var(--loger-white) !important;
        text-align: center
    }
}
.aplayer.aplayer-fixed .aplayer-body {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 99;
    background: var(--loger-card-bg) !important;
    padding-right: 18px;
    transition: all .3s ease;
    max-width: 400px;
}
.aplayer-played {
    background: var(--loger-theme) !important;
}
.aplayer {
    background: var(--loger-card-bg) !important;
    font-family: Arial,Helvetica,sans-serif;
    margin: 5px;
    box-shadow: 0 2px 2px 0 rgb(0 0 0 / 7%), 0 1px 5px 0 rgb(0 0 0 / 10%);
    border-radius: 2px !important;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    line-height: normal;
    position: relative;
}
.aplayer .aplayer-list ol li.aplayer-list-light {
    background: var(--loger-card-bg) !important;
}
.aplayer .aplayer-list ol li {
    position: relative;
    height: 32px;
    line-height: 32px;
    padding: 0 15px;
    font-size: 12px;
    border-top: 1px solid var(--loger-card-btn-bg) !important;
    cursor: pointer;
    transition: all .2s ease;
    overflow: hidden;
    margin: 0;
}
.aplayer .aplayer-list ol li .aplayer-list-cur {
    background-color: var(--loger-theme) !important;
}
.aplayer .aplayer-miniswitcher {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    background: var(--loger-card-bg) !important;
    width: 18px;
    border-radius: 0 2px 2px 0 !important;
}
.search-dialog__title {
    padding: 0 0 .7rem;
    color: var(--loger-theme);
    font-size: 1.4em;
    line-height: 1;
}
#local-search .search-dialog .local-search-box input {
    padding: .25rem .7rem !important;
    width: 100% !important;
    outline: 0 !important;
    border: 2px solid var(--loger-theme) !important;
    border-radius: 2rem !important;
    background: var(--search-bg);
    color: var(--search-input-color);
    -webkit-appearance: none;
}
.aplayer .aplayer-list ol li:hover {
    background: var(--loger-white) !important;
}
#search-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: none;
    backdrop-filter: blur(3px);
    background: rgba(0,0,0,.6);
}
hr {
    position: relative;
    margin: 2rem auto;
    border: 2px dashed var(--loger-theme);
    width: calc(100% - 4px);
}
.aplayer.aplayer-fixed .aplayer-info {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    transition: all .3s ease;
    border-bottom: none;
    border-top: none !important;
}
.aplayer.aplayer-fixed .aplayer-list{
    border: none !important;
}
hr:before {
    position: absolute;
    top: -10px;
    left: 5%;
    z-index: 1;
    color: var(--loger-theme);
    content: '\f0c4';
    font-size: 20px;
    line-height: 1;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -ms-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
#footer {
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(3px);
    border-radius: 0px;
    transition: all .3s;
}
#local-search .search-dialog .local-search-box input {
    padding: .25rem .7rem !important;
    width: 100% !important;
    outline: 0 !important;
    border: 2px solid var(--loger-theme) !important;
    border-radius: 2rem !important;
    background: transparent;
    color: var(--search-input-color);
    -webkit-appearance: none;
}
.search-dialog {
    position: fixed;
    top: 5rem;
    left: 50%;
    z-index: 1001;
    display: none;
    margin-left: -15rem;
    padding: 1rem;
    width: 30rem;
    background: var(--loger-card-bg);
    border-radius: 30px;
}
#recent-posts>.recent-post-item {
    height: 14.5em;
    background: var(--loger-card-bg);
}
#aside-content .card-widget {
    box-shadow: var(--loger-shadow-lightblack);
    background: var(--loger-card-bg);
    color: var(--font-color);
}
#local-search .search-dialog .local-search__hit-item:before {
    position: absolute;
    top: 2em;
    left: 0.2rem;
    width: .5em;
    height: .5em;
    border: .15rem solid var(--loger-theme);
    border-radius: .5em;
    background: 0 0;
    content: '';
    line-height: .5em;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
#local-search .search-dialog .local-search__hit-item {
    position: relative;
    padding-left: 1.2rem;
    line-height: 1.7;
    border-radius: 25px;
    margin: 0.3rem;
}
::-webkit-scrollbar-thumb {
    background: var(--loger-theme);
    border-radius: 30px;
}
#page-header #site-subtitle, #page-header #site-title {
    color: #fff;
    text-shadow: none;
    transition: .3s;
}
.site-page child:hover {
    transition: .3s !important;
    color: var(--loger-theme);
}
#nav .site-page:not(.child):after {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 0;
    height: 3px;
    background-color: var(--loger-white) !important;
    content: '';
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    color: #fff;
}
#nav .site-page:not(.child) {
    transition: all .3s !important;
    color: #fff;
}
#nav .menus_items .menus_item .menus_item_child li:hover {
    background: var(--loger-card-bg);
    transition: all .3s;
    color: #fff;
}
#nav .menus_items .menus_item .menus_item_child li a {
    color: #fff;
    transition: all .3s;
}
#nav .menus_items .menus_item .menus_item_child {
    position: absolute;
    right: 0;
    display: none;
    margin-top: 8px;
    padding: 0;
    width: max-content;
    background-color: var(--loger-sidebar-bg);
    -webkit-box-shadow: 0 5px 20px -4px rgb(0 0 0 / 50%);
    box-shadow: 0 5px 20px -4px rgb(0 0 0 / 50%);
    -webkit-animation: sub_menus .3s .1s ease both;
    -moz-animation: sub_menus .3s .1s ease both;
    -o-animation: sub_menus .3s .1s ease both;
    -ms-animation: sub_menus .3s .1s ease both;
    padding: 6px 8px 8px 8px;
    border-radius: 12px;
    background: var(--loger-card-bg);
    box-shadow: var(--loger-shadow-black);
    animation: sub_menus .3s .1s ease both;
}
.aplayer.aplayer-fixed .aplayer-body {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    z-index: 99;
    background: var(--loger-card-bg) !important;
    padding-right: 18px;
    transition: all .3s ease;
    max-width: 400px;
}
.aplayer .aplayer-list ol li.aplayer-list-light {
    background: var(--loger-card-bg) !important;
}
#nav .menus_items .menus_item .menus_item_child li a {
    display: inline-block;
    padding: .3rem .7rem;
    width: 100%;
    color: var(--font-color);
    text-shadow: none!important;
}
#nav a:hover {
    color: var(--btn-bg) !important;
}
#post .post-copyright .post-copyright-meta {
    color: var(--loger-theme);
    font-weight: 700;
}
#post .post-copyright {
    position: relative;
    margin: 2rem 0 .5rem;
    padding: .5rem .8rem;
    border: none;
    -webkit-transition: box-shadow .3s ease-in-out;
    -moz-transition: box-shadow .3s ease-in-out;
    background: var(--loger-card-bg);
    border-radius: 30px;
    -o-transition: box-shadow .3s ease-in-out;
    -ms-transition: box-shadow .3s ease-in-out;
    transition: box-shadow .3s ease-in-out;
}
[data-theme=dark] #footer:before, [data-theme=dark] #page-header:before, [data-theme=dark] #web_bg:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: none !important;
    content: '';
}
b, strong {
    border-bottom: 3px solid var(--loger-lighttext);
    font-weight: bolder;
    color: var(--loger-theme);
    padding: 5px 0px;
}
#article-container a:hover {
    text-decoration: none;
    border-bottom: 2 px solid var(--loger-none);
    color: var(--loger-white) !important;
    background: var(--loger-theme);
    border-radius: 4px;
    box-shadow: var(--loger-shadow-main);
}
#article-container a {
    color: var(--loger-hovertext);
    transition: .3s ease-in-out;
    border-bottom: 2px solid #f2b94b;
    padding: 3px 0px;
}
[data-theme=dark] #footer:before, [data-theme=dark] #web_bg:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: none !important;
    content: '';
}
[data-theme=dark] #web_bg:before {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #212121 !important;
    content: '';
}
:root{
    --heo-white: #fff;
    --heo-black: #000;
    --heo-none: rgba(0,0,0,0);
    --heo-gray: #999999;
    --heo-yellow: #ffc93e;
    --heo-main: #007AFF;
    --heo-shadow-main: 0 8px 12px -3px rgba(40, 109, 234,.20);
    --heo-shadow-blue: 0 8px 12px -3px rgba(40, 109, 234,.20);
    --heo-shadow-white: 0 8px 12px -3px rgba(255, 255, 255,.20);
    --heo-shadow-black: 0 0 12px 4px rgba(0, 0, 0,.05);
    --heo-shadow-yellow: 0px 38px 77px -26px rgba(255, 201, 62,.12);
    --heo-shadow-red: 0 8px 12px -3px #ee7d7936;
    --heo-shadow-green: 0 8px 12px -3px #87ee7936;
    --heo-logo-color: linear-gradient(215deg,#4584ff 30%,#ff7676 70%);
    --style-border: 1px solid var(--heo-card-border);
    --heo-theme: #425AEF;
    --heo-blue: #425AEF;
    --heo-red: #D8213C;
    --heo-pink: #FF7C7C;
    --heo-green: #008200;
    --heo-fontcolor: #363636;
    --heo-background: #f7f9fe;
    --heo-reverse: #000;
    --heo-maskbg: rgba(255, 255, 255, 0.6);
    --heo-hovertext: #5374ff;
    --heo-ahoverbg: #F7F7FA;
    --heo-lighttext: var(--heo-main);
    --heo-secondtext: rgba(60, 60, 67, 0.6);
    --heo-scrollbar: rgba(60, 60, 67, 0.4);
    --heo-card-btn-bg: #edf0f7;
    --heo-post-blockquote-bg: #fafcff;
    --heo-post-tabs-bg: #f2f5f8;
    --heo-secondbg: #edf0f7;
    --heo-shadow-nav:0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --heo-card-bg: #fff;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-card-border: #e3e8f7;
  }
  
  ::selection {
    background: var(--heo-blue);
    color: var(--heo-white);
  }
  
  [data-theme=light] {
    --heo-theme: #425AEF;
    --heo-blue: #425AEF;
    --heo-red: #D8213C;
    --heo-pink: #FF7C7C;
    --heo-green: #008200;
    --heo-fontcolor: #363636;
    --heo-background: #f7f9fe;
    --heo-reverse: #000;
    --heo-maskbg: rgba(255, 255, 255, 0.6);
    --heo-hovertext: #5374ff;
    --heo-ahoverbg: #F7F7FA;
    --heo-lighttext: var(--heo-main);
    --heo-secondtext: rgba(60, 60, 67, 0.6);
    --heo-scrollbar: rgba(60, 60, 67, 0.4);
    --heo-card-btn-bg: #edf0f7;
    --heo-post-blockquote-bg: #fafcff;
    --heo-post-tabs-bg: #f2f5f8;
    --heo-secondbg: #edf0f7;
    --heo-shadow-nav:0 5px 12px -5px rgba(102, 68, 68, 0.05);
    --heo-card-bg: #fff;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.00);
    --heo-card-border: #e3e8f7;
  }
  
  [data-theme=dark] {
    --heo-theme: #0084FF;
    --heo-blue: #0084FF;
    --heo-red: #FF3842;
    --heo-pink: #FF7C7C;
    --heo-green: #00FF00;
    --heo-fontcolor: #F7F7FA;
    --heo-background: #18171d;
    --heo-reverse: #fff;
    --heo-maskbg: rgba(0,0,0, 0.6);
    --heo-hovertext: #0A84FF;
    --heo-ahoverbg: #fff;
    --heo-lighttext: #f2b94b;
    --heo-secondtext: #a1a2b8;
    --heo-scrollbar: rgba(200, 200, 223, 0.4);
    --heo-card-btn-bg: #30343f;
    --heo-post-blockquote-bg: #000;
    --heo-post-tabs-bg: #121212;
    --heo-secondbg: #30343f;
    --heo-shadow-nav:0 5px 20px 0px rgba(28, 28, 28, 0.4);
    --heo-card-bg: #1d1b26;
    --heo-shadow-lightblack:0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --heo-shadow-light2black:0 5px 12px -5px rgba(102, 68, 68, 0.0);
    --heo-card-border: #42444a;
  }
  
  @media screen and (max-width: 768px){
    :root{
      --style-border: 0px solid var(--heo-card-border);
    }
  }
  
  #fMessageBoard {
    font-size: 20px;
    background: var(--heo-background);
    color: var(--heo-fontcolor);
    border-radius: 12px;
    font-weight: bolder;
    box-shadow: none;
    width: 90%;
    max-width: 810px;
    margin: auto;
    height: 19rem;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-top: 2rem;
  }
  #fMessageBoard .fUpdatedTime {
    text-align: center;
    order: 1;
    height: 0.5rem;
    /* line-height: 40px; */
    padding-left: 11.2rem;
    padding-right: 3rem;
  }
  #fMessageBoard .fMessageItem {
    background: var(--heo-background);
    order: 0;
    width: 100%;
    height: 1rem;
    display: flex;
  }
  #fMessageBoard .fMessageItem .fItem {
    height: 80px;
    background: transparent;
    display: flex;
    flex-direction: column;
    width: 33%;
  }
  #fMessageBoard .fMessageItem .fItem .fLabel {
    padding: 0 3%;
    align-self: center;
    text-align: center;
    width: 100%;
    height: 24px;
  }
  #fMessageBoard .fMessageItem .fItem .fMeasureBar {
    align-self: center;
    text-align: center;
    height: 60px;
    width: 50%;
  }
  #fMessageBoard .fMessageItem .fItem .fMessage {
    align-self: center;
    text-align: center;
    /* padding: 0 3%; */
    /* width: 25%; */
  }
  #fMessageBoard #switchRankBtn {
    max-width: 250px;
    height: 4rem;
    display: flex;
    text-align: center;
    margin-left: 14rem;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    order: 2;
    /* width: 11rem; */
    /* padding-left: 20rem; */
  }
  #fMessageBoard #switchRankBtn #rankByCreated {
    font-size: 20px;
    height: 30px;
    /* width: 80px; */
    display: inline-block;
    padding: 2px 5px;
    /* padding-top: 0.3rem; */
  }
  #fMessageBoard #switchRankBtn #rankByUpdated {
    font-size: 20px;
    height: 30px;
    /* width: 80px; */
    display: inline-block;
    padding: 2px 5px;
    /* margin: 0.3rem; */
  }
  #fMessageBoard #switchRankBtn input#switchRankMode[type=checkbox] {
    display: none;
  }
  #fMessageBoard #switchRankBtn label#switchRank {
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 20px;
    margin: 7px 0px;
    background: #3a8ec4;
    display: inline-block;
    border-radius: 10px;
    position: relative;
  }
  #fMessageBoard #switchRankBtn label#switchRank:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 8px;
    transition: 0.3s;
  }
  #fMessageBoard #switchRankBtn label#switchRank:active:after {
    width: 50px;
  }
  #fMessageBoard #switchRankBtn input#switchRankMode:checked + label {
    background: #d8653e;
  }
  #fMessageBoard #switchRankBtn input#switchRankMode:checked + label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
  }
  #fcircleMoreBtn {
    width: 90%;
    max-width: 810px;
    height: 30px;
    margin: auto;
    background: var(--heo-background);
    color: var(--heo-lighttext);
    border-radius: 12px;
    font-weight: bolder;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    transition: 0.3s;
  }
  #fcircleMoreBtn:hover{
    color: var(--heo-white);
    background: var(--heo-main);
  }
  #fcircleContainer {
    width: 100%;
    max-width: 900px;
    height: auto;
    margin: auto;
  }
  #fcircleContainer a {
    text-decoration: none;
  }
  #fcircleContainer .fArticleItem {
    margin: 20px 5%;
    display: flex;
    color: rgba(60,60,61,0.7);
    border-radius: 5px;
    font-weight: bolder;
    overflow: hidden;
    flex-direction: column;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar {
    display: flex;
    flex-direction: row;
    padding: 0 1rem 0.5rem 1rem;
    order: 1;
    transform: translateY(-23px);
    width: 9rem;
    height: 0px;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fAvatar {
    align-self: center;
    text-align: center;
    border-bottom: none;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fAvatar img {
    width: 22px;
    /* height: 22px; */
    border-radius: 99px;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fAvatar .img-alt.is-center {
    display: none;
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fArticleAuthor {
    margin: 0 0.3rem;
    align-self: center;
    text-align: center;
    /* height: 22px; */
    padding-bottom: 0.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--heo-fontcolor);
  }
  #fcircleContainer .fArticleItem .fArticleMessage {
    display: flex;
    flex-direction: column;
    padding: 0 1rem 0.8rem 1rem;
    background: var(--heo-background);
    border-radius: 12px;
    order: 0;
  }
  #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle {
    align-self: start;
    text-align: left;
    font-size: 20px;
    line-height: 40px;
    padding: 0;
    color: var(--heo-fontcolor);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
  }
  
  #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover{
    color: var(--heo-main);
  }
  
  #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime {
    width: 100%;
    text-align: center;
    display: flex;
    margin-left: 9rem;
  }
  #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime .fArticleCreated {
    margin-right: 1rem;
    text-align: left;
    align-self: center;
    color: var(--heo-secondtext);
  }
  #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime .fArticleUpdated {
    margin-right: 1rem;
    text-align: left;
    align-self: center;
    color: var(--heo-secondtext);
  }
  #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime i:before {
    margin-right: 5px;
  }
  @media screen and (max-width: 768px) {
    #fMessageBoard {
      font-size: 16px;
    }
  }
  @media screen and (max-width: 400px) {
    #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime i {
      display: none;
    }
    #fMessageBoard {
      font-size: 12px;
    }
    #fMessageBoard #switchRankBtn #rankByCreated {
      font-size: 12px;
    }
    #fMessageBoard #switchRankBtn #rankByUpdated {
      font-size: 12px;
    }
    #fcircleContainer .fArticleItem .fArticleAvatar {
      display: none;
    }
    #fcircleContainer .fArticleItem .fArticleMessage .fArticleTime{
      margin-left: 0;
    }
    #fMessageBoard #switchRankBtn{
      display: none;
    }
    #fMessageBoard .fUpdatedTime{
      display: none;
    }
    #fMessageBoard{
      display: none;
    }
    #fcircleContainer .fArticleItem .fArticleMessage {
      width: 100%;
    }
    #fcircleContainer .fArticleItem .fArticleMessage a.fArticleTitle:hover:before {
      font-size: 16px;
    }
  }
  @media screen and (max-width: 300px) {
    #fMessageBoard .fUpdatedTime span.fLabel {
      display: none;
    }
    #fMessageBoard .fMessageItem .fItem .fLabel {
      width: 50%;
    }
    #fMessageBoard .fMessageItem .fItem meter.fMeasureBar {
      display: none;
    }
    #fMessageBoard .fMessageItem .fItem .fMessage {
      width: 50%;
    }
    #fMessageBoard span#rankByCreated {
      display: none !important;
    }
    #fMessageBoard span#rankByUpdated {
      display: none !important;
    }
  }
  #fcircleContainer .fArticleItem .fArticleAvatar .fAvatar:hover{
      background:none;
}
.snckbar {
    background: var(--loger-theme) !important;
}