* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    height: 100vh;
    display: flex;
    flex-direction: column; /* 元素从上到下排列 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
    background-color: #f0f0f0;

/*     height: 100%; */
    margin: 0;
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #000; /* Fallback color while image loads */
    background: url('background.jpg') no-repeat center center fixed;
    background-size: cover;  /* Ensure background covers entire page */
    background-position: center; /* Position image in the center */
    background-repeat: no-repeat; /* Avoid image tiling */
}

/* 日期和时间容器样式 */
.datetime-container {
    background: rgba(0, 0, 0, 0.2); /* 修改半透明区域颜色和透明度，原值为0.5 */
    text-align: center; /* 居中对齐文字 */
    margin-bottom: 200px; /* 给搜索框留出空间 */
    justify-content: center; /* 不是影响因素 */
    align-items: center; /* This centers the content horizontally */
    padding: 20px; /* 元素与容器边框间距。原数值为20 */
    width: 360px; /* Adjust the width for a wider container */
    border-radius: 15px;

}
/* 时间样式 */
.current-time {
    font-size: 50px;
    color: #fff;    /* 设置日期的颜色 */
    margin-bottom: 10px;
}

/* 日期样式 */
.current-date {
    font-size: 20px;
    color: #F0F0F0;    /* 设置日期的颜色 */
    margin-bottom: 0px;
}

/* 搜索框的初始居中对齐 */
.search-container {
    position: absolute;


    transform: translate(-0%, -0%); /* 将位置移动到绝对居中的点 */
    transition: all 0.5s ease; /* 添加平滑过渡效果 */
}


.search-box {
    width: 300px;
    height: 40px;
    top: 10%;
    padding: 10px 40px 10px 10px; /* 为右侧按钮留出空间 */
    font-size: 16px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}

.search-box::placeholder {
    color: #aaa;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.search-box:hover,
.search-box:focus {
    background: rgba(255, 255, 255, 0.4); /* 悬浮或聚焦时增强透明度 */
}

.search-button {
    height: 40px; /* 与搜索框高度一致 */
    width: 40px;  /* 按钮的宽度 */
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    border: none;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    color: #333;
    border-radius: 20px 20px 20px 20px;
    padding: 0;
    outline: none;
}


.search-button img {
    max-width: 60%; /* 确保图标不会超过按钮宽度 */
    max-height: 60%; /* 确保图标不会超过按钮高度 */
}
.search-button:hover {
    background-color: rgba(255, 255, 255, 0.4); /* 悬浮或聚焦时增强透明度 */
    transition: all 0.3s ease;
    color: #000;
}

.search-box:hover {
    width: 500px;
    height: 40px;
    padding: 10px 40px 10px 10px; /* 为右侧按钮留出空间 */
    font-size: 16px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}
.search-box:focus {
    width: 500px;
    height: 40px;
    padding: 10px 40px 10px 10px; /* 为右侧按钮留出空间 */
    font-size: 16px;
    border: none;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.5); /* 半透明白色背景 */
    backdrop-filter: blur(10px); /* 背景模糊效果 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    color: #333;
    outline: none;
    transition: all 0.3s ease;
}