body{
    --jianbian-color: rgba(255,255,255,0.72);
    --header-text: #000;
    --header-name: #000;
    --header-a: rgb(82, 82, 82);
    --header-a-hover: rgb(49, 49, 49);
}
body[theme=dark]{
    --jianbian-color: rgba(52,50,50,0.7);
    --header-text: rgb(250, 250, 250);
    --header-name: #fff;
    --header-a: rgb(231, 231, 231);
    --header-a-hover: rgb(241, 241, 241);
}
/* header 部分 */
#hcont .placeHolder{
    height: 78rem;
}
#hcont .header{
    transition: background-color 0.1s, backdrop-filter 0.05s 0.05s, -webkit-backdrop-filter 0.05s 0.05s, height 0.7s, overflow-y 0s 0.7s;
}
#hcont .header:not([open]).hidden{
    transition: background-color 0.1s 0.5s, backdrop-filter 0.05s 0.55s, -webkit-backdrop-filter 0.05s 0.55s, height 0.7s, overflow-y 0s 0.7s;
}
#hcont .header:not([open]).hidden *{
    transition: color 0.1s 0.5s, visibility 0.1s 0.5s!important;
}
#hcont .header:not([open]).hidden .left, #hcont .header:not([open]).hidden .left *{
    transition: color 0.1s 0.2s, visibility 0.1s 0.5s, opacity 0.1s 0.5s!important;
}
#hcont .header:not([open]) *{
    transition: color 0.1s , visibility 0.1s 0.5s, opacity 0.1s!important;
}
#hcont .header.hidetitle:not([open]) .left{
    opacity: 0;
}
#hcont .header .right .links button{
    background: none;
}
@media (min-width: 800px) {
    #hcont .header{
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 40rem;
        padding: 5rem 20rem;
        z-index: 100;
        -webkit-backdrop-filter: blur(20rem);
        backdrop-filter: blur(20rem);
        background-color: var(--jianbian-color);
        color: var(--header-text);
    }
    #hcont .header.hidden{
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #hcont .header *{
        margin: 0;
        padding: 0;
    }
    #hcont .header .left{
        border: none;
        background: none;
        border-radius: 4rem;
        color: var(--header-a);
        font-weight: normal;
        flex-grow: 0;
        flex-shrink: 0;
        cursor: pointer;
    }
    #hcont .header .left .logo{
        display: inline-block;
        width: 36rem;
        height: 36rem;
        background-size: 36rem;
    }
    #hcont .header .left .name{
        display: inline;
        position: relative;
        top: -8rem;
        font-size: 25rem;
        font-weight: bold;
        color: var(--header-name);
    }
    #hcont .header .right{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;  
        align-items: center;
    }
    #hcont .header .right *{
        font-size: 15rem;
        font-weight: 300;
        color: var(--header-a);
        text-decoration: none;
        border-radius: 2rem;
    }
    #hcont .header .right .links{
        display: flex;
        flex-wrap: nowrap;
        font-size: 15rem;
        font-weight: 300;
        color: var(--header-a);
    }
    #hcont .header .right .links button{
        padding: 10rem 8rem;
        word-break: keep-all;
    }
    #hcont .header .right .links button:hover, #hcont .header .right .links button:focus-visible, #hcont .header .right .accountBox:hover p, #hcont .header .right .accountBox:focus-visible p{
        color: var(--header-a-hover);
        font-weight: 400;
        cursor: pointer;
    }
    #hcont .header .right .accountBox{
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        margin-left: 8rem;
        border-radius: 2rem;
    }
    #hcont .header .right .accountBox i{
        display: inline-block;
        width: 30rem;
        height: 30rem;
        background-image: url(https://static.hdslb.com/images/akari.jpg);
        background-size: 30rem 30rem;
        border-radius: 20rem;
        margin-right: 4rem;
    }
    #hcont .header .right .accountBox p{
        display: inline-block;
        max-width: 117rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        transition: max-width 0.5s;
    }
    #hcont .header .right .accountBox p:hover{
        max-width: 100vw;
    }
}
@media (max-width: 800px) {
    #hcont .header{
        display: flex;
        flex-direction: column;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 24rem;
        overflow-x: hidden;
        overflow-y: hidden;
        padding: 9rem 10rem;
        z-index: 100;
        -webkit-backdrop-filter: blur(20rem);
        backdrop-filter: blur(20rem);
        background-color: var(--jianbian-color);
        color: var(--header-text);
    }
    #hcont .header[open]{
        height: 100vh;
    }
    #hcont .header[open] .right{
        overflow-y: auto;
    }
    #hcont .header.hidden:not(*[open]){
        background: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
    #hcont .header *{
        margin: 0;
        padding: 0;
    }
    #hcont .header .left{
        flex-grow: 0;
        flex-shrink: 0;
        width: 80vw;
        margin-bottom: 20rem;
        cursor: pointer;
        text-align: center;
        border: none;
        background: none;
        color: var(--header-a);
        border-radius: 4rem;
        font-weight: normal;
    }
    #hcont .header .left .logo{
        display: inline-block;
        width: 26rem;
        height: 26rem;
        background-image: url('https://logos.nmteam.agou.im/nmTeam/logo@32.png');
        background-size: 26rem;
    }
    #hcont .header .left .name{
        display: inline-block;
        position: relative;
        top: -8rem;
        font-size: 18rem;
        font-weight: bold;
        color: var(--header-name);
        /* width: 0; */
        /* overflow-y: hidden; */
    }
    #hcont .header .right{
        display: flex;
        flex-direction: column;
        /* justify-content: end;   */
        align-items: center;
        flex-grow: 1;
        flex-shrink: 1;
        visibility: hidden;
    }
    #hcont .header[open] .right{
        visibility: visible;
    }
    #hcont .header .right *{
        font-size: 15rem;
        font-weight: 300;
        color: var(--header-a);
        text-decoration: none;
        text-align: center;
    }
    #hcont .header .right .links{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        font-size: 15rem;
        width: 80%;
        font-weight: 300;
        color: var(--header-a);
    }
    #hcont .header .right .links button{
        padding: 10rem 8rem;
        word-break: keep-all;
    }
    #hcont .header .right .links button:hover, #hcont .header .right .links button:focus-visible, #hcont .header .right .accountBox:hover p, #hcont .header .right .accountBox:focus-visible p{
        color: var(--header-a-hover);
        font-weight: 400;
        cursor: pointer;
    }
    #hcont .header .right .accountBox{
        display: flex;
        width: 80vw;
        position: relative;
        flex-direction: row;
        justify-content: center;
        margin: 14rem 0;
    }
    #hcont .header .right .accountBox i{
        position: absolute;
        top: -6rem;
        left: 0;
        display: inline-block;
        width: 30rem;
        height: 30rem;
        background-image: url(https://static.hdslb.com/images/akari.jpg);
        background-size: 30rem 30rem;
        border-radius: 20rem;
        margin-right: 4rem;
        
    }
    #hcont .header .right .accountBox p{
        display: inline-block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-break: break-all;
        margin: 0 37rem;
    }
}