/* 设置页面主体样式 */
body {
    /* 设置背景图片的 URL，需替换为实际图片链接 */
    /*background-image: url('http');*/
    background-image: url('/image/indexp0.jpg');           
    /* 让背景图片覆盖整个页面 */
    background-size: cover;
    /* 将背景图片居中显示 */
    background-position: center;
    /* 固定背景图片位置 */
    background-attachment: fixed;
    /* 禁止背景图片重复 */
    background-repeat: no-repeat;
    /* 设置页面字体 */
    font-family: Arial, sans-serif;
    /* 使用 Flexbox 布局，将子元素垂直排列 */
    display: flex;
    flex-direction: column;
    /* 水平居中对齐子元素 */
    align-items: center;
    /* 让内容尽量往顶部靠，底部的元素会被挤到最下面 */
    justify-content: flex-start;
    /* 确保页面高度至少为视口高度 */
    min-height: 100vh;
    /* 去除页面默认的外边距 */
    margin: 0;
    /* 防止内容溢出产生滚动条 */
    overflow: hidden;
}

/* 设置页面标题样式 */
h1 {
    /* 设置标题文字颜色为白色 */
    color: white;
    /* 为标题文字添加阴影效果 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* 设置标题的上外边距 */
    margin-top: 20px;
}

/* 设置卡片容器样式 */
.card-container {
    /* 使用 Flexbox 布局，允许卡片换行显示 */
    display: flex;
    flex-wrap: wrap;
    /* 水平居中对齐卡片 */
    justify-content: center;
    /* 设置卡片之间的间距 */
    gap: 20px;
    /* 给卡片容器添加一些上下边距，让布局更美观 */
    margin: 20px 0;
}

/* 设置卡片样式 */
.card {
    /* 设置卡片的背景颜色，带有一定透明度 */
    background-color: rgba(182, 207, 215, 0.6);
    /* 设置卡片的圆角 */
    border-radius: 20px;
    /* 设置卡片的内边距 */
    padding: 5px;
    /* 设置卡片的宽度 */
    width: 200px;
    /* 让卡片内的文字居中显示 */
    text-align: center;
    /* 为卡片添加阴影效果 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    /* 设置卡片缩放动画的过渡效果 */
    transition: transform 0.3s ease;
}

/* 设置卡片内链接的样式 */
.card a {
    /* 去除链接的下划线 */
    text-decoration: none;
    /* 设置链接文字的颜色 */
    color: #222222;
}

/* 设置鼠标悬停在卡片上时的样式 */
.card:hover {
    /* 卡片放大 5% */
    transform: scale(1.05);
}

/* 设置链接标题样式 */
.link-title {
    /* 设置链接标题文字颜色 */
    color: rgb(227, 239, 249);
    /* 为链接标题文字添加阴影效果 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    /* 让链接标题宽度占满一行 */
    width: 100%;
    /* 让链接标题文字居中显示 */
    text-align: center;
    /* 设置链接标题的上外边距 */
    margin-top: 20px;
}

/* 设置友情链接卡片的样式 */
.friend-link-card {
    /* 单独为友情链接卡片设置背景颜色，带有一定透明度 */
    background-color: rgba(255, 204, 204, 0.5);
}

/* 设置底部版权信息和网站说明的样式 */
.footer {
    /* 设置底部内容的背景颜色，带有一定透明度 */
    background-color: rgba(0, 0, 0, 0.5);
    /* 设置底部内容的文字颜色为白色 */
    color: white;
    /* 设置底部内容的内边距 */
    padding: 10px;  
    /* 让底部内容文字居中显示 */
    text-align: center;
    /* 设置底部内容的宽度占满一行 */
    width: 100%;
    /* 让底部元素在父元素中尽量往底部靠 */
    margin-top: auto;
}