/* 小米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);
    /* 鼠标悬停时的背景色 */
}

/* 上面为通用模板，下面为当前页面 */

a {
    color: var(--text-color);
    text-decoration: none;
}

/* 搜索框 */
.search {
    background-color: var(--bg-color);
    /* 用于固定在前面 */
    position: sticky;
    top: 54px;
}

/* 小屏幕隐藏搜索框 */
@media (max-width: 1000px) {
    .search {
        display: none;
    }

}

.search-container {
    width: 60%;
    margin: 10vh auto;
    /* 水平居中 */
    position: relative;
    /* 没用sticky时使用，写html中会出问题 */
}

@media (max-width: 1000px) {
    .search-container {
        width: 90%;
        margin: 10vh auto;
        /* 水平居中 */
        position: relative;
        /* 没用sticky时使用，写html中会出问题 */
        /* 对小屏幕设备进行调整，min对大屏幕进行调整 */
    }
}

.search-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

/* 聚焦时特殊显示
.search-input:focus {
    box-shadow: 0 0 8px rgba(235, 8, 8);
} */

.search-button {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    border: none;
    background-color: var(--text-color2);
    /* border-radius: 0 5px 5px 0; */
    padding: 0 15px;
    cursor: pointer;
}

#searchInput {
    background-color: var(--bg-color);
    color:var(--text-color2);
    /* 输入框文字颜色可调整 */
}

#searchtype {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 37px;
    /* 用auto更好，宽度和高度一样设置需研究 */
    border: none;
    /* border-radius: 0 5px 5px 0; */
    padding: 0px 0px;
    cursor: pointer;
}

.search-engine {
    color: var(--text-color2);
}

.website-container {
    display: flex;
    flex-wrap: wrap;
    /* 不用换行就是并排显示 */
    align-items: center;
    align-content: center;
    justify-content: center;
}

@media (max-width: 1000px) {
    .website-container {
        display: block;
    }
}

/* 网站-之前用的ul */
.website {
    width: 100%;
    scroll-margin-top: 100px;
    /* 锚链接跳转避遮挡，高度适当大于遮挡内容高度，要兼容旧浏览器可用空锚点元素 */
    display: flex;
    /* 消除ul左侧空白 */
    /* padding-left: 0; */
    flex-flow: row wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    /* flex-direction:column; */
    /* 列对齐模式，不常用会变成只有一列 */
    margin-bottom: 10px;
    margin-top: 0;
}

.website a {
    /* width: 22%; */
    /* 想要规整排列可使用，需要配合去除p元素 */
    /* height: 30px; */
    line-height: 30px;
    /* align-content: center; */
    /* 当行高不是固定值时使用 */
    text-align: center;
    display: inline-block;
    /* 使其表现得像块级元素，但可以在行内显示 */
    word-wrap: break-word;
    /* 防止长单词不换行 */
    margin: 3px 3px;
    padding: 0px 3px;
    background: var(--text-bg);
    border-radius: 10px;
    box-shadow: 4px 6px rgba(0, 0, 0, 0.1);
    /* 背景颜色和阴影 */
}

@media (max-width: 1000px) {
    .website a {
        width: 23%;
        margin: 5px 3px;
        padding: 0px 0px;
        /* height: 25px; */
        line-height: 25px;
        /* align-content: center; */
        /* 当行高不是固定值时使用 */
        font-size: 0.9rem;
        background: var(--text-bg);
        border-radius: 5px;
        box-shadow: 3px 5px rgba(0, 0, 0, 0.1);
        /* 对小屏幕设备进行调整，min对大屏幕进行调整 */
    }
}

.website p {
    /* align-content: center; */
    /* 用父容器align-items控制了 */
    text-align: center;
    color: var(--text-color2);
}

@media (max-width: 1000px) {
    .website p {
        display: none;
    }
}

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