/* 设置标题和段落的文字颜色为白色，并添加阴影效果 */
h1, h2, h3, p {
    color: rgb(255, 255, 255); /* 文字颜色为白色 */
    text-shadow: 0px 0px 20px rgba(0, 0, 0, 5); /* 添加阴影效果 */
    text-align: center;
}

p{
    margin-bottom: 20px; /* 添加底部外边距 */
    text-align: center;
}

/* 重置默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 包括内边距和边框在内进行盒子模型计算 */
}

/* 设置页面背景 */
body {
    font-family: Arial, sans-serif; /* 设置字体 */
    height: 100vh; /* 使页面高度占满视口 */
    background-image: url(images/bg.png); /* 背景图像 */
    background-repeat: repeat; /* 背景图像重复 */
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

/* 容器样式 */
.container {
    max-width: 800px; /* 最大宽度为800px */
    margin: 50px auto; /* 上下50px, 左右自动居中 */
    padding: 20px; /* 内边距20px */
    background: rgba(255, 255, 255, 0.3); /* 半透明白色背景 */
    border-radius: 10px; /* 圆角边框 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 盒子阴影 */
    -webkit-backdrop-filter: blur(10px); /* Safari兼容 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
}

/* 标题样式 */
h1 {
    color: #ffffff; /* 标题文字颜色 */
    text-align: center; /* 居中对齐 */
    margin-bottom: 20px; /* 底部外边距20px */
}

/* 图片容器样式 */
.photo {
    margin-bottom: 20px; /* 底部外边距20px */
    cursor: pointer; /* 鼠标变成手型 */
    overflow: hidden; /* 确保图片不会超出边界 */
    border-radius: 8px; /* 圆角边框 */
    transition: transform 0.3s ease; /* 添加放大效果过渡 */
}

/* 鼠标悬停在图片容器上时的放大效果 */
.photo:hover {
    transform: scale(1.02); /* 图片容器放大1.05倍 */
}

/* 图片样式 */
.photo img {
    width: 100%; /* 宽度100% */
    height: auto; /* 高度自动 */
    display: block; /* 图片显示为块级元素 */
}

/* 遮罩层样式 */
.overlay {
    display: none; /* 初始不显示 */
    position: fixed; /* 固定定位 */
    top: 0; /* 距顶部0 */
    left: 0; /* 距左侧0 */
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    background: rgba(0, 0, 0, 0.8); /* 半透明黑色背景 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 居中对齐 */
    align-items: center; /* 垂直居中 */
    opacity: 1; /* 初始透明度 */
    transition: opacity 0.3s ease; /* 添加透明度过渡效果 */
}

/* 放大的图片样式 */
.overlay img {
    max-width: 90%; /* 最大宽度90% */
    max-height: 90%; /* 最大高度90% */
    border-radius: 8px; /* 圆角边框 */
    transition: transform 0.3s ease, opacity 0.3s ease; /* 添加放大和透明度过渡效果 */
}

/* 透明度渐变隐藏类 */
.overlay.hidden {
    opacity: 0; /* 设置透明度为0 */
}

/* 白天模式 */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --container-bg-color: rgba(255, 255, 255, 0.3);
    --text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.9);
}

/* 夜间模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #2e2e2e; /* 夜间模式的背景颜色 */
        --text-color: #ffffff; /* 夜间模式的文本颜色 */
        --container-bg-color: rgba(255, 255, 255, 0.1); /* 容器背景色 */
        --text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.9); /* 文本阴影颜色 */
    }
}
/* 设置页面背景 */
body {
    background-color: var(--bg-color); /* 使用CSS变量来设置背景颜色 */
    color: var(--text-color); /* 使用CSS变量来设置文本颜色 */
}
/* 容器样式 */
.container {
    background-color: var(--container-bg-color); /* 使用CSS变量来设置容器背景颜色 */
}
/* 标题和段落的文字颜色及阴影效果 */
h1, h2, h3, p {
    color: var(--text-color); /* 使用CSS变量来设置文字颜色 */
    text-shadow: var(--text-shadow); /* 使用CSS变量来设置文本阴影 */
}

/* styles.css 文件 */
.link {
    color: var(--text-color);
    text-align: center;
    text-decoration: none;
}

a{
    color: var(--text-color);
    text-align: center;
    text-decoration: none;
}

ul{
    text-align: center;
}