/*将所有超链接的下划线移除，并使所有 <h1> 标签的文本呈现出彩虹渐变效果*/

a {text-decoration:none;}
h1 {
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
background-clip: text;
-webkit-background-clip: text;
color: transparent;
-webkit-text-fill-color: transparent;
font-size: 64px; /* 设置字体大小为 48 像素 */
font-weight: bold; /* 设置字体为粗体 */
text-align: center; /* 设置文本居中对齐 */
margin-top: 10px; /* 设置上边距为 20 像素 */
margin-left: 50px; /* 设置左边距为 50 像素 */
padding: 50px; /* 设置内边距为 20 像素 */
    position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

h2 {
font-size: 32px; /* 设置字体大小为 48 像素 */
font-weight: bold; /* 设置字体为粗体 */
text-align: center; /* 设置文本居中对齐 */
margin-top: 20px; /* 设置上边距为 20 像素 */
margin-left: 50px; /* 设置左边距为 50 像素 */
padding: 50px; /* 设置内边距为 20 像素 */
    position: absolute;
  top: 20%;
  left: 10%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

#date {
            position: fixed;
            bottom: 0;
            right: 0;
            padding: 10px;
            font-size: 24px;
            font-family: Arial, sans-serif;
            color: black;
        }
#time {
	position: fixed;
	bottom: 34px;
	right: 0;
	padding: 10px;
	font-size: 24px;
	font-family: Arial, sans-serif;
  color:linear-gradient(to right, #FFC0CB, #87CEEB);
    font-size: 24px;
    font-family: Arial, sans-serif;
	border: none;
	}
body {
    background-image: url('/images/img-002.webp'); /* 替换为你的 WebP 图片 */
    background-size: cover;
    position: relative;/* 确保 ::before 可以叠加在 body 上 */
    background-attachment: fixed;
    background-repeat: no-repeat;
}
/* 2. 使用 ::before 叠加一个半透明层 */
body::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  /* 可用黑色半透明或其他颜色半透明 */
  background: rgba(83, 132, 157, 0.1); 
  pointer-events: none; /* 避免遮挡点击 */
  z-index: -1; /* 保证它在内容后面 */
}

#@keyframes floatClouds {
    0% { transform: translateX(-100px); opacity: 0.5; }
    50% { transform: translateX(100px); opacity: 1; }
    100% { transform: translateX(-100px); opacity: 0.5; }
}

#.clouds {
    position: fixed;
    top: 10%;
    left: 0;
    width: 100%;
    height: 200px;
    background: url('your-cloud-image.png') repeat-x;
    opacity: 0.3;
    animation: floatClouds 30s linear infinite;
}
#.ink-effect {
    position: absolute;
    width: 50px;
    height: 50px;
    background: url('your-ink-splash.png') no-repeat center/cover;
    opacity: 0.5;
    animation: fadeOut 1s;
}
#@keyframes fadeOut {
    to { opacity: 0; transform: scale(2); }
}