/* 公用 */

* {
    box-sizing: border-box;
    color: #fff;
    text-shadow: 0 .1875rem .3125rem #1c1f21;
}
@font-face {
    font-family: 'Minecraft';
    src: url('/public/resources/font/Minecraft.woff2');
}
@font-face {
    font-family: 'SmileySans';
    src: url('/public/resources/font/SmileySans-Oblique.woff2');
}
@font-face {
    font-style: normal;
    font-family: 'Harmony_Regular';
    src: url('/public/resources/font/HarmonyOS_Sans_SC_Regular.ttf') format('truetype');
}
body {
    font-family: 'Harmony_Regular' !important;
    margin: 0px;
    padding: 0px;
}


/* 设置面板样式 */
#OpenSettings {
    position: fixed;
    bottom: 2%;
    right: 2%;
}
/* 设置面板移入动画 */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* 设置面板移出动画 */
@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }

    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}
#settings {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    animation: slideIn 0.5s ease forwards;
}
#settings.show {
    opacity: 1;
    visibility: visible;
}
#settings.hide {
    animation: slideOut 0.3s ease forwards;
}
#settings ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#settings li {
    margin-bottom: 10px;
}
/* 语言切换样式 */
#Language li {
    display: flex;
    align-items: center;
}
#Language i {
    margin-right: 5px;
}


/* 顶部导航栏 */
#menu {
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
}
#menu li {
    display: inline-block;
    margin: 10px;
}
#menu i {
    padding: 3px;
}


footer {
    display: flex;
    align-items: center;
    position: fixed;
    padding: 10px;
    justify-content: center;
    bottom: 0;
    left: 0;
    right: 0;
}
footer a {
    margin-right: 10px;
    color: white;
    text-decoration: none;
}
footer .logo {
    width: 9.6rem;
    height: 2.4rem;
}


.aplayer-lrc {
    top: 45px;
}
.aplayer-lrc-contents p {
    text-shadow: none;
}
.aplayer-lrc-current {
    text-shadow: none;
}


#nprogress {
    pointer-events: none
}
#nprogress .bar {
    background: rgb(0, 0, 0);
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px
}
#nprogress .peg {
    display: block;
    position: absolute;
    right: 0;
    width: 100px;
    height: 100%;
    box-shadow: 0 0 10px #29d, 0 0 5px #29d;
    opacity: 1;
    -webkit-transform: rotate(3deg) translate(0, -4px);
    -ms-transform: rotate(3deg) translate(0, -4px);
    transform: rotate(3deg) translate(0, -4px)
}
#nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px
}
#nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid transparent;
    border-top-color: #29d;
    border-left-color: #29d;
    border-radius: 50%;
    -webkit-animation: nprogress-spinner 400ms linear infinite;
    animation: nprogress-spinner 400ms linear infinite
}
.nprogress-custom-parent {
    overflow: hidden;
    position: relative
}
.nprogress-custom-parent #nprogress .bar,
.nprogress-custom-parent #nprogress .spinner {
    position: absolute
}
@-webkit-keyframes nprogress-spinner {
    0% {
        -webkit-transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(360deg)
    }
}
@keyframes nprogress-spinner {
    0% {
        transform: rotate(0deg)
    }

    100% {
        transform: rotate(360deg)
    }
}