/* 全局变量 */
:root {
    /* 左上颜色 */
    --bg-color-1: rgb(12, 87, 226);
    /* 右下颜色 */
    --bg-color-2: rgb(104, 18, 234);
    /* 三个级别的内容颜色 */
    --content-color-primary: white;
    --content-color-secondary: #ffffff76;
    --content-color-border: #ffffffa9;
}

/* 基础全局样式 */
html {
    /* 不允许用户选中文本 */
    user-select: none;
    /* 禁用 Chrome Mobile 难看的蓝色聚焦指示 */
    -webkit-tap-highlight-color: transparent;
}

a {
    text-decoration: none;
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--bg-color-2), white 40%), color-mix(in srgb, var(--bg-color-1), white 40%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-stroke: 0.8px transparent;
    /* letter-spacing: 1px; */
    display: inline-block;
}

a:hover {
    background: linear-gradient(to bottom right, color-mix(in srgb, var(--bg-color-2), white 70%), color-mix(in srgb, var(--bg-color-1), white 70%));
    background-clip: text;
}

#nav {
    position: fixed;
    z-index: 3000;
    top: 0;
    left: 0;
    width: 100%;
    height: 5rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

/* 导航栏按钮 */
.nav-button {
    height: 2.4rem;
    width: 2.4rem;
    margin: 1.3rem;
    border-radius: 100%;
    /* 内部图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 关于按钮内部图标 */
.nav-button-icon {
    max-height: 1rem;
    max-width: 1rem;
}

.nav-button-icon path {
    fill: var(--content-color-primary);
}

#notify {
    font-family: text, 'Noto Serif CJK SC', serif;
    font-size: 1.1rem;
    min-height: 2.4rem;
    max-width: calc(100% - 5rem * 2);
    --padding: 0.6rem 0.8rem;
    border-radius: 1rem;
    transform: translateY(-5rem);
}

#content-layer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8000;
    width: calc(100dvw - 2rem * 2);
    height: 100dvh;
    padding: 5rem 2rem 0 2rem;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
    opacity: 0;
}

@media (min-width: 1000px) {
    #content-layer {
        width: calc(80dvw - 2rem);
        padding: 5rem 20dvw 0 2rem;
    }
}

#content-icon-box {
    display: flex;
    flex-direction: row;
    margin-bottom: 1rem;
    transform: translateY(-100dvh);
}

.content-item-box {
    margin-bottom: 0.8rem;
    transform: translateY(-100dvh);
}

.content-icon {
    height: 2rem;
    width: 2rem;
    border-radius: 100%;
    margin: 0 0.4rem 0.4rem 0;
    /* 内部图标居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 菜单按钮内部图标 */
#content-icon-back-icon,
#content-icon-sound-icon,
#content-icon-mute-icon {
    max-height: 1.1rem;
    max-width: 1.1rem;
}

#content-icon-refresh-icon {
    max-height: 0.9rem;
    max-width: 0.9rem;
}

.content-icon svg path {
    fill: var(--content-color-primary);
}

.content-item {
    --padding: 0.3rem 0.8rem;
    margin: 0 0.4rem 0.4rem 0;
    border-radius: 5rem;
    font-size: 1.1rem;
    font-family: text, 'Noto Serif CJK SC', serif;
}

.highlight {
    --glass-bg: rgba(255, 255, 255, 0.22);
}

.hide-icon {
    display: none;
}

#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100dvw;
    transform: translateX(-100dvw);
    height: 3px;
    background: linear-gradient(to right, var(--bg-color-1) 0%, var(--bg-color-2) 100%);
}

/* 所有容器全部占满视口 */
.container {
    height: 100dvh;
    width: 100dvw;
    /* 相对视口定位 */
    position: fixed;
    /* 占满 */
    inset: 0;
    /* 高于背景 */
    z-index: 1;
    /* 默认隐藏 */
    display: none;
}