/* 布局控制文件，根据客户端切换 CSS，可能包含通用样式和媒体查询 */

/* 菜单通用样式 */
.menu {
    /* 通用样式 */
}

/* 顶部菜单样式 */
.top-menu {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    align-items: center;
    padding: 10px;
    background-color: rgba(248, 247, 247, 0.5); /* 透明背景 */
    border-radius: 20px; /* 圆角 */
    margin: 10px auto; /* 居中并添加外边距 */
    width: 80%; /* 限制宽度 */
}

.menu-items {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.menu-items a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2); /* 增加背景色 */
}

.search-bar {
    display: flex;
    align-items: center; /* 垂直居中 */
    width: 100%; /* 扩大搜索栏区域 */
    margin: 0 auto; /* 水平居中 */
}

.search-input {
    width: 80%; /* 搜索栏不变 */
    padding: 8px; /* 增加内边距 */
    border: none; /* 移除边框 */
    border-radius: 20px; /* 圆角 */
    margin: 0 5px; /* 设置左右间距为 5px，总间距为 10px */
    background-color: rgba(255, 255, 255, 0.8); /* 白色背景，透明度 */
    color: #333; /* 设置文字颜色 */
}

.search-button {
    width: 10%; /* 缩小搜索按钮 */
    padding: 8px 12px; /* 增加内边距 */
    background-color: #5cb85c; /* 绿色 */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 20px; /* 圆角 */
    margin: 0 5px; /* 设置左右间距为 5px，总间距为 10px */
}

.search-engine-options {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.search-engine-options a {
    color: #fff;
    text-decoration: none;
    margin: 0 10px;
    padding: 5px 10px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.2); /* 增加背景色 */
}

.search-engine-options a.selected {
    background-color: #007bff; /* 选中状态的背景色 */
}

/* 导航菜单样式 */
nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
}

nav ul li {
    margin: 5px 0;
    width: 200px; /* 统一宽度 */
    text-align: center; /* 文本居中 */
}

nav ul li a {
    text-decoration: none;
    color: #333;
    display: block; /* 使链接占据整个 li 元素 */
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

body {
    /* 通用样式 */
    background-image: url('/static/back.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex; /* 使用 Flexbox 布局 */
    flex-direction: column; /* 垂直排列 */
    min-height: 100vh; /* 确保内容至少占据整个视口高度 */
}

/* 添加以下样式以对齐顶部和下方的导航菜单 */
nav {
    margin-top: 10px; /* 调整上边距以对齐 */
}

/* 底部栏样式 */
.under {
    background-color: rgba(0, 0, 0, 0.5); /* 透明背景 */
    color: #fff; /* 设置文本颜色 */
    padding: 10px 20px; /* 设置内边距 */
    text-align: center; /* 文本居中 */
}