/* ==========================================
   项目02：Fullscreen Video Background - 样式表
   ========================================== */
@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

/* ========== 1. 全局样式重置 ========== */
* {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
  height: 150vh;
}

/* ========== 2. Banner 容器 ========== */
.banner {
  position: relative;          /* 相对定位，作为内容的参考点 */
  width: 100%;
  height: 100vh;               /* 全屏高度 */
  overflow: hidden;
  display: flex;               /* Flexbox居中内容 */
  justify-content: center;
  align-items: center;
}

/* ========== 3. 视频背景 ========== */
.banner video {
  position: absolute;          /* 绝对定位 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 保持比例，裁剪多余 */
  pointer-events: none;        /* 禁止鼠标事件 */
  z-index: 0;                  /* 最底层 */
}

/* ========== 4. 内容层 ========== */
.banner .content {
  position: relative;          /* 相对定位 */
  z-index: 1;                  /* 在视频之上 */
  max-width: 1000px;
  padding: 20px;
  text-align: center;
}

.banner .content h1 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-size: 1.3em;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 20px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8);
}

.banner .content p {
  color: #fff;
  font-size: 0.5em;
  font-weight: 300;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.8);
}

/* ========== 5. 底部推荐网站 额外加的 ========== */
footer {
  position: relative;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  padding: 30px 20px;
  text-align: center;
  z-index: 2;
}

footer h3 {
  margin-bottom: 15px;
  font-size: 1.2em;
}

footer p {
  font-size: 0.9em;
}

footer a {
  color: #cd853f;
  text-decoration: none;
  margin: 0 10px;
}

footer a:hover {
  color: #fff;
  text-decoration: underline;
}