// 全局样式
* {
    padding: 0;
    margin: 0;
}
span {
    color: white;
}

// 隐藏滚动条
::-webkit-scrollbar { 
    display: none;
}
body {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
    overflow-x: hidden;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    font-family: 'HarmonyOS Sans SC', 'Microsoft YaHei';
    user-select: none;
}

// 背景二次元
.fullscreen {
    position: fixed;
    width: 100vw;
    min-width: 1340px;
    height: 100vh;
}
.black-overlay {
    .fullscreen();

    z-index: 2;
    background-color: rgba(0,0,0,0.6);
}
.bg-anime {
    .fullscreen();

    object-fit: cover;
}
.fake-topbar {
    width: 100%;
    min-width: 1340px;
    height: 15.99px;
}

// 内容
.logo {
    width: 100%;
    height: 80px;
    position: relative;
    z-index: 3;
    margin-top: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    .inner-box {
        width: 1340px;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        .server-icon {
            object-fit: cover;
            width: 50px;
            height: 50px;
            opacity: 0.8;
        }

        .divide-line {
            margin: 20px;
        }

        .time {
            font-weight: bold;
            font-size: x-large;
            font-family: sans-serif;
            opacity: 0.8;
        }

        .day {
            font-family: sans-serif;
            font-size: larger;
            margin-left: 20px;
            opacity: 0.8;
        }
    }
}

.search-bar {
    width: 100%;
    height: 40px;
    position: relative;
    z-index: 3;
    margin-top: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    .inner-box {
        width: 1340px;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        .search-box {
            width: 45%;
            height: 100%;
            background-color: #222;
            border-radius: 30px;
            border: #696eb7 solid 3px;
            opacity: 0.8;
            padding: 0 10px 0 10px;

            display: flex;
            align-items: center;
            justify-content: center;

            .search-input {
                width: 90%;
                height: 100%;
                border: none;
                background-color: transparent;
                outline: 0;
                text-align: center;
                color: white;
                font-size: 14px;
            }

            .bing-icon {
                width: 20px;
                height: 20px;

                :hover {
                    cursor: pointer;
                }

                svg {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .search-icon {
                .bing-icon();
            }
        }
    }
}

.footer {
    width: 100%;
    height: 30px;
    z-index: 3;
    position: fixed;
    bottom: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    .inner-box {
        width: 1340px;
        height: 100%;

        display: flex;
        align-items: center;
        justify-content: center;

        .avatar {
            object-fit: cover;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            opacity: 0.8;
        }

        .motto {
            opacity: 0.7;
            font-size: small;
            margin-left: 20px;
        }
    }
}