body {
            margin: 0;
            padding: 0;
            background-image: url('background.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
            background-attachment: fixed; /* 固定背景图片 */
            display: flex;
            /* justify-content: flex-start; 删除这行 */
            align-items: center;
            min-height: 100vh;
            flex-direction: column; /* 保持 flex 布局方向为 column */
        }



.main-title {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  color: white;
  margin-bottom: 20px;
            text-shadow:
              -1px -1px 0 black,
               1px -1px 0 black,
              -1px  1px 0 black,
               1px  1px 0 black,
               0px -1px 0 black,
               0px  1px 0 black,
              -1px  0px 0 black,
               1px  0px 0 black,
              -1px -2px 0 black,
               1px -2px 0 black,
              -2px -1px 0 black,
               2px -1px 0 black,
              -2px 1px 0 black,
               2px 1px 0 black,
              -1px 2px 0 black,
               1px 2px 0 black;
}
        .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center; /* 使图片在容器内水平居中 */
            max-width: 1200px; /* 限制容器最大宽度 */
            padding: 20px; /* 增加内边距 */
        }
        .image-link {
            width: 30%; /* 两列显示，预留一些间距 */
            margin: 10px;
            box-sizing: border-box; /* 保证边框不影响元素宽度 */
            border: 1px solid #ccc; /* 细线边框 */
            overflow: hidden; /* 防止图片超出边框 */
            text-decoration: none; /* 去除链接默认的下划线 */
            display: block; /* 使链接占据整个块级元素 */
            text-align: center;
        }
       .image-link img {
            width: 100%; /* 使图片填充整个链接区域 */
            display: block; /* 去除图片下方默认的间隔 */
            transition: transform 0.3s ease; /* 添加过渡效果 */
           }
        .image-link:hover img {
            transform: scale(1.1); /* 鼠标悬停时放大图片 */
        }
        .image-link span {
            font-weight: bold;
            display: block;
            padding: 5px;
            font-size: 20px;
            color: white;
            text-shadow:
              -1px -1px 0 black,
               1px -1px 0 black,
              -1px  1px 0 black,
               1px  1px 0 black,
               0px -1px 0 black,
               0px  1px 0 black,
              -1px  0px 0 black,
               1px  0px 0 black,
              -1px -2px 0 black,
               1px -2px 0 black,
              -2px -1px 0 black,
               2px -1px 0 black,
              -2px 1px 0 black,
               2px 1px 0 black,
              -1px 2px 0 black,
               1px 2px 0 black;
        }
        @media (max-width: 600px) {
            .image-link {
                width: 90%; /* 小屏幕时每行显示一个 */
            }
        }