* {
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    vertical-align: baseline;
    list-style: none;
}
@font-face {
    font-family: 'PicNic';
    src: url('font/PicNic.woff2') format('woff2'),
    url('font/PicNic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 推荐使用以优化加载体验 */
}

html, body {
    font-family:var( --font);
    font-size:var(--textSzie);
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    color: var( --color);
    background: var(--bg);
    width:100%;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
    font-weight: 400;
    min-height: 100vh;

}

:root{

    --font:"Roboto Mono", monospace,"Noto Serif SC", serif;
    --space:2rem;
    --space2:calc(var(--space)/2);
    --space3:calc(var(--space)*2);
    --color: #fff;
    --bg: #000;
    --textSzie: 14px;
}

a{
    color: var( --color);
    text-decoration: none;
}
.text{
    line-height: 1.4;
}
.text p{
    padding-bottom: 1rem;
}
.text p:last-child{
    padding-bottom: 0;
}
.text img{
    width: auto;
    height: auto;
    max-width: 100%;
}
.text a{
    text-decoration: underline;
}
.loading{
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 10;
    background-color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-svg{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}
#lottie-container{
    width:200px;
    height: 200px;
}
.loading-text{
    font-family: 'PicNic';
    font-size: 4rem;
    margin-top: -2rem;
}
.loading .text{
    padding-top: 2rem;
}

#wrapper {
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
    perspective: 1000px;
}

.page-wrap{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.tool{
    display: flex;
    justify-content: center;
    padding: var(--space2);
    height: 90px;

}
.tool a{
    display: block;
    padding: var(--space2);
    height: 100%;
    text-align: center;
}
.tool img{
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.menu-menu,
.menu-about{
    width: 15%;
}
.menu-logo{
    width: 35%;
}

#content{
    height: calc(100% - (90px *2));
    padding-right: 3%;
}
.content-wrap{
    height: 100%;
}

.content-wrap ul{
    padding: var(--space2);
}
.content-wrap ul li{
    padding: .6rem 0;
}
.content-wrap ul li a{
    display: flex;
    text-shadow: 1px 1px 1px black;
}
.content-wrap ul li a>*{
    line-height: 1.5;
}
.content-wrap ul li a i{
    display: block;
    flex: 1;
    height: 1px; /* 控制虚线的粗细 */
    background-image: linear-gradient(90deg, #fff 50%, transparent 50%);
    background-size: 10px 1px; /* 控制虚线的长度和间隔 */
    background-repeat: repeat-x;
    margin-top: .75rem;
}
.content-wrap ul li a span:first-child{
    width: 60%;
    padding:0 var(--space2);
}
.content-wrap ul li a span:last-child{
    white-space: nowrap;
    padding:0 var(--space2);
}
.scrollbar-track-y {
    top: 0;
    right: 0;
    width: 1px !important;
    height: 100%;
    background-color: transparent !important;
}
.scrollbar-thumb{
    width: 1px;
    background-color: white !important;
}
#post{
    pointer-events: none;
}