/* 导航栏基础样式 */
.navbar {
  background-color: #e23912; /* 导航栏背景色 */
  padding: 0.5em; /* 导航栏内边距 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置字体 */
  width: 100%; /* 占满宽度 */
  position: relative; /* 相对定位 */
}

.navbar-container {
  max-width: 1200px; /* 设置最大宽度 */
  margin: 0 auto; /* 居中对齐 */
  display: flex; /* 使用flex布局 */
  justify-content: space-between; /* 子元素左右对齐 */
  align-items: center; /* 子元素垂直居中 */
  flex-wrap: nowrap; /* 不允许子元素换行 */
  overflow-x: auto; /* 超出部分自动滚动 */
}

.navbar-menu {
  list-style: none; /* 去掉列表样式 */
  display: flex; /* 使用flex布局 */
  margin: 0; /* 去掉默认外边距 */
  padding: 0; /* 去掉默认内边距 */
  flex-wrap: nowrap; /* 不允许子元素换行 */
  justify-content: center; /* 子元素居中对齐 */
}

.navbar-item {
  margin: 0.5em; /* 上下左右外边距 */
  white-space: nowrap; /* 防止文字换行 */
}

.navbar-item a {
  text-decoration: none; /* 去掉链接下划线 */
  color: #ffffff; /* 链接文字颜色 */
  font-size: 1rem; /* 设置字体大小 */
  padding: 0.5em 1em; /* 内边距 */
  border-radius: 4px; /* 设置圆角 */
  transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
  display: inline-block; /* 链接行内块级显示 */
  text-align: center; /* 文字居中 */
}

.navbar-item a:hover {
  background-color: #ffffff; /* 悬停时背景色 */
  color: #e23912; /* 悬停时文字颜色 */
}

/* 响应式设计 */
@media (max-width: 768px) {
  .navbar-container {
    justify-content: center; /* 小屏幕时居中对齐 */
    overflow-x: auto; /* 使导航条在小屏幕上可滚动 */
  }

  .navbar-item {
    margin: 0.5em; /* 保持外边距 */
    white-space: nowrap; /* 防止文字换行 */
  }

  .navbar-item a {
    display: inline-block; /* 链接行内块级显示 */
  }
}