/* 页面头部样式 */
header {
    display: flex; /* 使用 flex 布局，使容器内的内容按行排列 */
    justify-content: space-between; /* 两边对齐，左边是 Logo，右边是菜单和按钮 */
    align-items: center; /* 垂直居中对齐 */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    background-color: #f8f9fa; /* 背景颜色，浅灰色 */
    border-bottom: 1px solid #e0e0e0; /* 底部边框，浅灰色 */
}

/* 修改顶部导航栏的背景颜色（这里的颜色 #99999 没有实际作用） */
header {
    background-color: #f8f9fa; /* 顶部导航栏背景颜色，设置为 #f8f9fa */
}

/* Logo 容器样式 */
.logo-container img {
    height: 28px; /* 设置 Logo 图片的高度为30px */
}

/* 菜单容器样式 */
.menu-container {
    display: flex; /* 使用 flex 布局，水平排列菜单 */
    align-items: center; /* 菜单项垂直居中 */
}

/* 网站名样式 */
.site-name {
    font-size: 23px; /* 字体大小设置为20px */
    color: #000000; /* 文字颜色设置为蓝色 */
    font-weight: bold; /* 加粗字体 */
}

/* 连接钱包按钮样式 */
#connectWalletButton {
    margin-right: 20px; /* 设置右边距为20px */
    padding: 10px 15px; /* 内边距：上下10px，左右20px */
    background-color: #007bff; /* 按钮背景颜色为蓝色 */
    color: #fff; /* 按钮字体颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角边框，半径为5px */
    cursor: pointer; /* 鼠标悬停时显示指针，表示按钮可点击 */
}

/* 下拉菜单样式 */
.dropdown {
    position: relative; /* 使用相对定位，为下拉菜单提供定位参考 */
    display: inline-block; /* 按钮为内联块级元素 */
}

/* 下拉按钮样式 */
.dropbtn {
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    font-size: 16px; /* 字体大小为16px */
    color: white; /* 按钮文字颜色为白色 */
    background-color: #007bff; /* 按钮背景颜色为蓝色 */
    border: none; /* 无边框 */
    border-radius: 5px; /* 圆角边框，半径为5px */
    cursor: pointer; /* 鼠标悬停时显示指针 */
}

/* 下拉菜单内容样式 */
.dropdown-content {
    display: none; /* 默认隐藏菜单内容 */
    position: absolute; /* 绝对定位，保证菜单显示在按钮下面 */
    background-color: #f9f9f9; /* 背景颜色为浅灰色 */
    min-width: 115px; /* 设置菜单的最小宽度 */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
    z-index: 1; /* 设置 z-index，确保菜单层级高于其他元素 */
}

/* 下拉菜单项样式 */
.dropdown-content a {
    color: black; /* 文字颜色为黑色 */
    padding: 12px 16px; /* 内边距：上下12px，左右16px */
    text-decoration: none; /* 去除下划线 */
    display: block; /* 使每一项为块级元素 */
}

/* 下拉菜单项悬停样式 */
.dropdown-content a:hover {
    background-color: #f1f1f1; /* 背景色变化，鼠标悬停时变为浅灰色 */
}

/* 下拉菜单显示样式 */
.dropdown.show .dropdown-content {
    display: block; /* 当菜单处于显示状态时，设置为 block 显示 */
}

/* 当鼠标悬停在按钮上时，改变按钮颜色 */
.dropdown:hover .dropbtn {
    background-color: #0056b3; /* 悬停时按钮背景颜色变化为深蓝色 */
}

/* 汉堡包菜单样式 */
.hamburger-menu {
    position: relative; /* 设置相对定位，方便定位菜单 */
}

/* 菜单复选框样式 */
.menu-checkbox {
    display: none; /* 隐藏复选框，实际用于控制菜单显示 */
}

/* 菜单图标样式 */
.menu-icon {
    cursor: pointer; /* 鼠标悬停时显示手型，表示可以点击 */
    font-size: 30px; /* 图标字号为24px */
}

/* 菜单样式 */
.menu {
    display: none; /* 默认隐藏菜单 */
    flex-direction: column; /* 菜单项垂直排列 */
    position: absolute; /* 绝对定位，确保菜单出现在顶部 */
    right: 0; /* 设置右对齐 */
    z-index: 10; /* 确保汉堡包菜单层级较高 */
    top: 40px; /* 菜单距离顶部的距离 */
    background-color: #fff; /* 菜单背景颜色为白色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 为菜单添加阴影效果 */
    border-radius: 5px; /* 圆角边框，半径为5px */
    overflow: hidden; /* 超出部分隐藏 */
    width: max-content; /* 根据内容自动调整宽度 */
}

/* 菜单链接样式 */
.menu a {
    display: block; /* 每个菜单项为块级元素 */
    padding: 10px 20px; /* 内边距：上下10px，左右20px */
    text-decoration: none; /* 去除下划线 */
    color: #333; /* 字体颜色为深灰色 */
    white-space: nowrap; /* 禁止菜单项内容换行 */
}

/* 菜单链接悬停样式 */
.menu a:hover {
    background-color: #f0f0f0; /* 鼠标悬停时背景色变化 */
}

/* 复选框选中时显示菜单 */
.menu-checkbox:checked + .menu-icon + .menu {
    display: flex; /* 显示菜单并使用 flex 布局 */
}