/* 框架整体样式 */

/* 基本样式 */
body {
  font-family: "Open Sans", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.6;
}
.card-a {
  color: rgb(17, 17, 17);
  text-decoration: underline;
}
/* 导航栏 */
nav {
  background: radial-gradient(circle, #007fff, #0000ff); /* 蓝色背景 */
  color: #ffffff; /* 白色文字 */
  padding: 28px; /* 添加内边距 */
  position: sticky; /* 固定位置 */
  top: 0;
  z-index: 1000; /* 确保导航栏在最上层 */
}

nav .logo {
  font-family: "楷体", "KaiTi", serif; /* 字体 */
  font-size: 2.3rem; /* 字体大小 */
  font-weight: 800; /* 字体粗细 */
  text-align: center; /* 文字居中 */
  padding: 0 30px; /* 左右内边距 */
}

nav .container {
  display: flex; /* 使导航栏横向排列 */
  justify-content: space-between; /* 内容左右分布 */
  align-items: center; /* 内容上下分布 */
}
ul {
  list-style: none; /* 去掉列表样式 */
  padding: 0 30px; /* 去除内边距 */
  display: flex; /* 使导航项横向排列 */
  justify-content: end; /* 内容右分布 */
  margin: 0; /* 去掉默认的外边距 */
}

a {
  text-decoration: none; /* 去除链接下划线 */
  color: #ffffff; /* 链接颜色 */
}
a:hover {
  color: #007bff; /* 设置链接悬停时的颜色 */
}

nav li {
  position: relative; /* 为了下划线效果 */
  margin: 3px 15px; /* 垂直和横向间距 */
}

nav a {
  padding: 5px 0; /* 上下内边距 */
  display: block; /* 使链接区域更大 */
  position: relative; /* 为伪元素提供定位 */
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 页脚 */
footer {
  background: radial-gradient(circle, #007fff, #0000ff);
  color: #ffffff;
  padding: 2rem 0;
  text-align: center;
}

footer .container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

footer .footer-logo {
  font-size: 1.5rem;
  font-weight: 700;
}

footer .footer-links {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
footer .social-media {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-weight: 600;
}
footer p {
  font-size: 0.9rem;
}
/* 下划线效果 */
nav a::after {
  content: "";
  display: block; /* 使下划线可见 */
  width: 0; /* 初始宽度为0 */
  height: 2px; /* 下划线的高度 */
  background-color: #ffc125; /* 下划线颜色 */
  transition: width 0.3s; /* 过渡效果 */
  position: absolute; /* 绝对定位 */
  left: 0; /* 左对齐 */
  bottom: -5px; /* 距离文字的下边距 */
}

/* 鼠标悬停时下划线动态效果 */
nav a:hover::after {
  width: 100%; /* 鼠标悬停时宽度变为100% */
}

/* 手机端导航栏 */
/* 最大宽度 */
@media (max-width: 768px) {
  nav {
    padding: 18px; /* 添加内边距 */
  }
  nav .logo {
    text-align: center; /* 文字居中 */
    font-size: 1.3rem; /* 字体大小 */
  }
  .menu-toggle {
    display: block; /* 小屏幕时显示汉堡菜单 */
    position: fixed; /* 固定位置 */
    top: 10px; /* 距离顶部的距离 */
    right: 20px; /* 距离右边的距离 */
    z-index: 1000; /* 确保汉堡菜单在导航栏之上 */
    font-size: 28px; /* 字体大小 */
    color: #f9f5f5; /* 文字颜色 */
    background-color: rgba(220, 220, 220, 0.8); /* 背景色 */
    margin-top: 90px; /* 添加上边距 */
    border-radius: 5px; /* 圆角 */
    padding: 0px 3px; /* 添加内边距 */
  }
  nav ul {
    display: none; /* 默认隐藏导航列表 */
    flex-direction: column; /* 导航列表横向排列 */
    position: fixed; /* 根据需要调整位置 */
    top: 153px; /* 根据需要调整位置 */
    right: 20px; /* 距离右边的距离 */
    background-color: rgba(200, 200, 200, 0.9); /* 背景色设置为灰色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加阴影 */
    z-index: 999; /* 确保导航栏在汉堡菜单之上 */
    border-radius: 5px; /* 圆角 */
    padding: 0 18px; /* 添加内边距 */
  }
  /* 当鼠标靠近时显示导航栏 */
  nav:hover ul,
  nav.active ul {
    display: block; /* 鼠标经过时显示 */
  }

  nav ul.show {
    display: flex; /* 当添加 .show 类时显示导航列表 */
  }
}
/* 最小宽度 */
@media (min-width: 769px) {
  nav .logo {
    text-align: left; /* 文字左对齐 */
  }
  nav {
    flex-direction: row; /* 横向排列 */
    display: flex;
    text-align: center;
    justify-content: space-between; /* 内容左右分布 */
    flex-direction: column; /* 设置为垂直方向布局 */
  }
  .menu-toggle {
    display: none; /* 在大于600px的屏幕上隐藏汉堡菜单 */
  }
}