/* 首行缩进 */
/* .post-content p {
    text-indent: 2em;
} */

/* 代码块纯黑色背景 */
code[class*=" language-"], pre[class*=" language-"]{
    background: #18171d;
}

/* banner 字体图标大小及位置 */
i.haofont.hao-icon-arrow-right.banner-righticon{
    font-size: 80px;
}

/*span.bannerText{*/
/*    display: block;*/
/*    margin-top: 35px;*/
/*}*/

/* 自我介绍渐变色背景 */
#aside-content > .card-widget.card-info::before {
    background: linear-gradient(-25deg, var(--heo-main), #031764, var(--heo-main), #67044d);
    background-size: 400%;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    content: '';
    animation: gradient 15s ease infinite;
}

/* 列表样式及缩进 */
ul li {
    font-size: 18px;
}

#article-container ol li:not(.tab), #article-container ul li:not(.tab){
    /* margin-left: 2em; */
}

#article-container pre > code {
    background: transparent !important;
    /* 解决文章界面代码超长时溢出问题 */
    /* display: block;
    overflow: auto; */
}

/* 导航子菜单闪跳 */
#nav .menus_items .menus_item .menus_item_child li a{
    padding: 0.3rem 0.5rem;
}



/* 通讯录 */
:root {
    --card-friend-class-desc-bgcolor: #e7e7e7;
    --card-friend-name-color: #000;
    --card-friend-item-hover: var(--text-bg-hover);
    --card-friend-descr-color: #797979
}

[data-theme=dark] {
    --card-friend-class-desc-bgcolor: #111;
    --card-friend-name-color: #fff;
    --card-friend-item-hover: var(--text-bg-hover);
    --card-friend-descr-color: #797979
}

.card-widget.card-friend-link {
    padding: 0.4rem 0.6rem !important;
}


.card-widget.card-friend-link .card-friend-link-container {
    max-height: 460px;
    overflow: scroll
}

.card-widget.card-friend-link .card-friend-link-container::-webkit-scrollbar {
    display: none
}

.card-widget.card-friend-link summary.card-friend-class-desc {
    padding: 0 15px
}

.card-widget.card-friend-link details.card-friend-class-name[open] summary.card-friend-class-desc {
    position: sticky;
    top: 0;
    background: var(--card-friend-class-desc-bgcolor);
    z-index: 1
}

.card-widget.card-friend-link a.card-friend-item {
    padding: 0 15px;
    height: 60px;
    width: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -o-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.card-widget.card-friend-link a.card-friend-item:hover {
    background-color: var(--heo-main);
    border-radius: 12px;
    -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
}

.card-widget.card-friend-link img.card-friend-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 10px 10px
}

.card-widget.card-friend-link .offline-friend-link img.card-friend-avatar {
    filter: grayscale(100%)
}

.card-widget.card-friend-link .card-friend-details {
    width: auto;
    height: 60px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -o-box-lines: single;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -o-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: start;
    -moz-box-align: start;
    -o-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.card-widget.card-friend-link .card-friend-name {
    color: var(--card-friend-name-color)
}

.card-widget.card-friend-link .card-friend-descr {
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    width: 14em;
    color: var(--card-friend-descr-color)
}
/* 通讯录 */





/* 音乐天地 */
#aside-content .item-headline-music {
    padding-bottom: 0;
    margin-left: 8px;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1em;
    font-weight: 700;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#aside-content .item-headline-music span {
    margin-left: 6px
}

#flip-wrapper-card {
    -webkit-perspective: 1000;
    perspective: 1000
}

#flip-wrapper-card {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1
}

#flip-music {
    width: 100%;
    height: 100%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    transition: cubic-bezier(0, 0, 0, 1.29) .3s
}

#aside-content #flip-wrapper-card #flip-music .msimg {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-size: 100%
}

#aside-content #flip-wrapper-card #flip-music .back.msimg {
    display: block;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    box-sizing: border-box;
    background-size: 100%
}

#flip-wrapper-card:hover #flip-music {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg)
}

@media screen and (max-width: 768px) {
    .card-music {
        height: 520px !important
    }
}

.card-music {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0 !important;
    cursor: pointer;
    border: none !important;
    height: 405px;
    margin-top: 0 !important;
    background: 0 0 !important
}

/* 音乐天地 */


/* 小板报 */
#welcome-info {
    overflow: hidden;
    border-radius: 14px;
    --hao-welcome-color: #49B1F5;
    --hao-ip-color: #49B1F5;
    --hao-gl-size: 16px !important;
}
#aside-content .card-announcement .item-headline i{
    color: red;
}
/* 小板报 */


/* Steam卡片 */
#aside-content .item-headline-steam {
    padding-bottom: 0;
    margin-left: 8px;
    margin-top: 15px;
    margin-bottom: 5px;
    font-size: 1em;
    font-weight: 700;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

#aside-content .item-headline-steam span {
    margin-left: 6px
}


#flip-steam {
    width: 100%;
    height: 100%;
    transition: transform .3s
}

#flip-steam::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: linear-gradient(to right,transparent,#fff,transparent);
    transform: translateX(-200%);
    transition: transform .5s linear;
    z-index: 1
}

#flip-steam:hover::before {
    transform: translateX(100%) skewX(-60deg)
}

#aside-content #flip-wrapper-card #flip-steam .stimg {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 100%;
    z-index: 0
}

#aside-content #flip-wrapper-card #flip-steam .back.stimg {
    display: none
}

@media screen and (max-width: 768px) {
    .card-steam {
        height:130px!important
    }
}

.card-steam {
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 0!important;
    cursor: pointer;
    border: none!important;
    height: 105px;
    margin-top: 0!important;
    background: 0 0!important
}

/* Steam卡片 */

/* 分类3D */
#libCategories .card-info p{
    font-size: 0.9rem;
    font-weight: 400;
    text-align: left;
    letter-spacing: 0.6px;
    margin: 1rem 0;
}

#libCategories .card-wrap:hover .card-info:after {
    width: 300%
}

.fa-sharp, .fa-solid{
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display,inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto
}