/* 设置页面背景、文字和布局 */
body {
    background-color: black;
    color: white;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

/* 配置主容器 */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%; /* 使用整个视口宽度 */
    height: 100vh; /* 使用整个视口高度 */
}

.container h1 {
    font-size: 64px; /* 设置字体大小 */
    font-family: 'Times New Roman', serif; /* 设置字体为新罗马字体 */
    font-weight: bold; /* 设置字体为粗体 */
}

/* 设置导航列表 */
nav ul {
    display: flex; /* 使用Flexbox布局 */
    list-style-type: none; /* 移除列表标记 */
    padding: 0; /* 移除默认的内边距 */
}

/* 配置每个列表项 */
nav ul li {
    margin: 0 10px; /* 在列表项之间添加水平间距 */
}

/* 设置链接样式 */
a {
    color: white;
    text-decoration: none;
    font-size: 24px; /* 设置链接文字大小 */
    font-family: 'Times New Roman', serif; /* 设置字体为新罗马字体 */
}

/* 设置鼠标悬停效果 */
a:hover {
    color: grey;
}

.image-preview {
    position: absolute; /* 或使用其他布局方式，确保图像在链接上方显示 */
    width: 200px; /* 根据需要调整大小 */
    height: auto;
    z-index: 100; /* 确保图像在其他元素之上 */
}

nav ul li {
    position: relative; /* 允许绝对定位的子元素相对于它定位 */
}

.hover-instruction {
    text-align: center;  /* 居中显示 */
    color: #ccc;        /* 设置文字颜色，灰色较为柔和 */
    font-size: 14px;    /* 设置字体大小 */
    font-family: 'SimHei', '黑体', serif; /* 设置字体为宋体 */
    font-style: italic; /* 设置字体风格为斜体 */
    margin-top: 10px;   /* 在标题和提示文本之间添加一些间距 */
    margin-bottom: 20px; /* 在提示文本和导航菜单之间添加一些间距 */
}
.container h1 {
    margin-bottom: 0; /* 将下边距设置为0 */
    /* 其他样式保持不变 */
}

.hover-instruction {
    margin-top: 5px; /* 减小上边距，根据需要调整这个值 */
    /* 其他样式保持不变 */
}