/* 小米8调试宽度为392px */
/* 1. 定义亮色主题变量 */
:root {
    --bg-color: #F8F9FA;
    /* 背景颜色 */
    --text-color: #666666;
    /* 文本颜色 */
    --text-color2: #4A7AFF;
    /* 显眼文本颜色 */
    --text-bg: #EAEBFA;
    /* 文字背景 */
    --ahover-color: #FAF6E8;
    /* 悬停颜色 */
}

/* 2. 定义暗黑主题变量 */
html.dark {
    --bg-color: #18191A;
    --text-color: #A0A0A0;
    --text-color2: #4A7AFF;
    --text-bg: #2A2C3E;
    --ahover-color: #1E1E1E;
}

/* 基础重置：清除默认边距，统一盒模型 */
* {
    margin: 0;
    padding: 0;
    /* 核心：确保宽度包含内边距/边框，避免布局错乱 */
    box-sizing: border-box;
    /* 确保padding不会增加元素的总宽度 */
    transition: all 0.3s ease;
    /* 切换更丝滑 */
}

body {
    /* background-image: url('media/bg.jpg');*/
    /* 设置壁纸，文字需要改颜色 */
    color:var(--text-color);
    /* 影响文本等颜色 */
    background-color: var(--bg-color);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* 导航栏 */
.navbar {
    /* 粘性定位 */
    position: sticky;
    /* 关键：滚动到顶部时固定,有多个时后面的top值需要计算 */
    top: 0;
    display: flex;
    /* 使用flex布局来实现水平排列 */
    justify-content: flex-end;
    /* 项目右对齐 */
    flex-wrap: wrap;
    /* 自动换行 */
    padding: 10px 0px;
    /* 上下内边距 */
    background-color: var(--bg-color);
    /* 添加背景色用于挡住滚动时下面内容 */
}

@media (max-width: 1000px) {
    .navbar {
        /* 粘性定位 */
        position: sticky;
        /* 关键：滚动到顶部时固定,有多个时后面的top值需要计算 */
        top: 0;
        display: flex;
        /* 使用flex布局来实现水平排列 */
        justify-content: flex-end;
        /* 当导航项目多时用分散对齐space-around */
        flex-wrap: wrap;
        /* 自动换行 */
        padding: 10px 0px;
        /* 上下内边距 */
        background-color: var(--bg-color);
        /* 添加背景色用于挡住滚动时下面内容 */
    }
}

.nav-item {
    /* 实现div中img居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px 5px;
    /* 项目之间的外边距 */
}

@media (max-width: 1000px) {
    .nav-item {
        /* 实现div中img居中 */
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0px 5px;
        /* 项目之间的外边距，项目多时需要都设为0 */
    }
}

.nav-item.linksite {
    display: none;
}

@media (max-width: 1000px) {
    .nav-item.linksite {
        display: none;
        /* 当手机站点多的需要翻页时设为flex */
    }
}

.nav-item a {
    width: 42px;
    height: 34px;
    border-radius: 10px 10px;
    padding: 5px 5px;
    /* 内边距，使链接区域更大，更容易点击 */
    display: inline-block;
    /* 使其表现得像块级元素，但可以在行内显示 */
    display: flex;
    align-items: center;
    justify-content: center;
    /* 实现a中img居中 */
    cursor: pointer;
    color: var(--text-color);
    text-decoration: none;
    background-color: var(--text-bg);
}

.nav-item a:hover {
    background-color: var(--ahover-color);
    /* 鼠标悬停时的背景色 */
}

/* 上面为通用模板 */

p {
    margin: 1lh auto;
}

a {
    color: var(--text-color2);
}