/* 通配符选择器，重置所有元素的默认内外边距，并设置默认字体 */
* {
  margin: 0; /* 移除默认外边距 */
  padding: 0; /* 移除默认内边距 */
  font-family: 'Poppins', sans-serif; /* 设置默认字体为 Poppins，若无则使用无衬线字体 */
  /* box-sizing: border-box; 已被移除或未包含在此版本，如果需要全局应用border-box，应添加回来 */
}


/* 页面主容器样式 */
/* 这个容器在美食.html中作为整个页面的背景和布局基础 */
.container {
  width: 100%; /* 容器宽度占满父元素 (通常是body，即整个视口宽度) */
  height: 100vh; /* 容器高度占满整个视口高度 */
  /* 背景设置：应用一个从上到下、从黑色半透明到黑色半透明的线性渐变，并叠加一个背景图片 */
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(img/gycs.jpeg);
  background-position: center; /* 背景图片在容器中居中显示 */
  background-size: cover; /* 背景图片等比缩放以覆盖整个容器区域 */
  padding-left: 8%; /* 左内边距为容器宽度的8% */
  padding-right: 8%; /* 右内边距为容器宽度的8% */
  box-sizing: border-box; /* padding和border的值包含在元素的width和height之内 */
}

/* 行容器样式，用于组织内容列 */
/* 在美食.html中，.row 包含左右两列 .col */
.row {
  display: flex; /* 使用flex布局，使其子元素（.col）可以灵活排列 */
  height: 88%; /* 行容器高度占其父容器 (.container) 高度的88% */
  /* (100vh * 88% = 88vh，如果 .navbar 存在且高度为12%，则此设置合理) */
  align-items: center; /* flex子项在交叉轴上居中对齐（垂直居中） */
}

/* 列容器样式 */
/* 在美食.html中，左右两块内容各使用一个 .col */
.col {
  flex-basis: 50%; /* flex子项的基础大小（主轴方向），这里设置为50%，即每列占据一半宽度 */
}

/* H1标题样式 */
h1 {
  color: #fff; /* 文字颜色为白色 */
  font-size: 100px; /* 字体大小 */
}

/* P段落文本样式 (全局定义) */
/* 注意：此处的 p 样式会影响所有 <p> 标签，包括卡片内的 <p>。*/
/* 卡片内的 <p> 稍后有 .card p 的特定样式覆盖其 font-size。*/
p {
  color: #fff; /* 文字颜色为白色 */
  font-size: 11px; /* 字体大小 */
  line-height: 15px; /* 行高 */
}

/* button按钮样式 (全局定义) */
button {
  width: 180px; /* 按钮宽度 */
  color: #000; /* 文字颜色为黑色 */
  font-size: 12px; /* 字体大小 */
  padding: 12px 0; /* 上下内边距12px，左右内边距0 */
  background: #fff; /* 背景颜色为白色 */
  border: 0; /* 移除默认边框 */
  border-radius: 20px; /* 边框圆角 */
  outline: none; /* 移除获取焦点时的轮廓（例如蓝色框） */
  margin-top: 30px; /* 距离上方元素的顶部外边距 */
  cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

/* 通用卡片样式 */
.card{
  width: 240px; /* 卡片宽度 */
  height: 230px; /* 卡片高度 */
  display: inline-block; /* 使卡片表现为行内块级元素，可以并排显示且可设置宽高 */
  border-radius: 10px; /* 边框圆角 */
  padding: 15px 25px; /* 上下内边距15px，左右内边距25px */
  box-sizing: border-box; /* padding和border的值包含在元素的width和height之内 */
  cursor:pointer; /* 鼠标悬停时显示手型光标 */
  margin: 10px 15px; /* 外边距：上下10px，左右15px，用于卡片间的间距 */
  background-position: center; /* 背景图片在卡片中居中显示 */
  background-size: cover; /* 背景图片等比缩放以覆盖整个卡片区域 */
  transition: transform 0.5s; /* 为 transform 属性添加0.5秒的过渡动画效果 */
}

/* 特定卡片背景图1 (老友粉) */
.card1{
  background-image: url(img/老友粉.jpeg); /* 设置背景图片路径 */
}
/* 特定卡片背景图2 (柠檬鸭) */
.card2{
  background-image: url(img/柠檬鸭.png);
}
/* 特定卡片背景图3 (横县鱼生) */
.card3{
  background-image: url(img/横线鱼生.jpeg); /* 文件名可能是 横县鱼生.jpeg */
}
/* 特定卡片背景图4 (酸嘢) */
.card4{
  background-image: url(img/酸嘢.jpeg);
}

/* 卡片鼠标悬停效果 */
.card:hover{
  transform: translateY(-10px); /* 鼠标悬停时，卡片沿Y轴向上移动10px */
}

/* H5标题样式 (主要用于卡片内标题) */
h5{
  color: #fff; /* 文字颜色为白色 */
  /* text-shadow: 0 0 5px #999; */ /* 此行被注释掉了，原意是添加灰色文本阴影 */
}

/* 卡片内部P段落文本的特定样式 */
.card p{
  text-shadow:  0 0 5px #000; /* 为卡片内的段落文字添加黑色文本阴影，以增强在背景图上的可读性 */
  font-size: 8px; /* 覆盖全局P标签的字体大小，使卡片内描述文字更小 */
}


/* 版权信息样式 */
/* 注意1：使用中文作为类名不是CSS的最佳实践。*/
/* 注意2：此样式规则当前在 美食.html 文件中没有直接对应的HTML元素使用 .版权 类。*/
/* 注意3：关于定位，见下方 transform 属性的注释。 */
/* 注意4：此处的 color: black; 与之前文件中的 color: white; 不同。*/
.版权{
  color: black; /* 文字颜色为黑色 (与之前文件中的白色不同，请确认是否期望如此) */
  background-color: rgba(188, 188, 188, 0.50); /* 背景色为半透明的灰色 */
  position:fixed; /* 固定定位，相对于浏览器视口 */
  bottom:0; /* 定位到视口底部 */
  left: 50%; /* 元素的左边缘距离其定位父元素（此处为视口）的左边缘50% */
  /* transform: translate(-50%, -50%); */
  /* 上一行原始的 transform 会使元素在水平居中的同时，向上偏移自身高度的50%。*/
  /* 由于 bottom:0，这会导致元素的一半显示在屏幕内，一半在屏幕外（下方）。*/
  /* 如果意图是元素紧贴底部并水平居中，应使用 transform: translateX(-50%); */
  transform: translate(-50%, -50%); /* 实现水平居中，但垂直方向会因-50%向上移动 */
  text-align:center; /* 内部文本水平居中 */
}