body, html {
    height: 100%;
    margin: 0;
    font-family: 'Arial', sans-serif;
    display: flex;
    flex-direction: column;
}

header {
    background-image: url('../img/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景覆盖图片 */
}

main {
    flex: 1;
    text-align: center;
    padding: 50px;
    background-color: rgba(255, 255, 255, 0.8);
}

footer {
    background-color: rgba(51, 51, 51, 0.8);
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.logo {
    width: 100px;
    height: auto;
}

.text-box {
    width: 400px;
    height: 200px;
    background-color: white;
    padding: 20px;
    box-sizing: border-box;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid #ccc;
}

/* 额外的样式 */
#site-header h1 {
    color: #ffcc00;
    font-size: 2em;
    margin: 0;
    background-color: some-color;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

img {
    transition: transform 0.5s ease;
}

img:hover {
    transform: scale(1.1);
}

.fade-in {
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in.animated {
    animation: fadeIn 3s forwards;
}
#site-footer {  
    background-color: rgba(255, 255, 255, 0.5); /* 半透明白色 */  
    color: #000; /* 文字颜色改为黑色 */  
    text-align: center;  
    padding: 10px 0;  
    position: fixed; /* 如果需要固定在页面底部 */  
    bottom: 0;  
    width: 100%;  
}
/* 滚动文本特效 */  
.scrolling-text {  
    white-space: nowrap;          /* 禁止文本换行 */  
    overflow: hidden;             /* 隐藏溢出内容 */  
    box-sizing: border-box;       /* 包括边框和内边距在内的盒模型 */  
    width: 100%;                  /* 确保容器宽度 */  
    position: relative;           /* 为子元素提供定位参照 */  
}  
  
.scrolling-text span {  
    display: inline-block;  
    /* 注意：这里通常不需要设置padding-left为100%，  
       除非您想要文本从完全不可见的位置开始滚动。  
       如果文本已经在容器内但您想要它滚动得更慢，  
       可以移除或调整这个值。 */  
    animation: scroll-text 3s linear infinite;  /* 修改滚动速度，增加时间为10秒 */  
}  
  
@keyframes scroll-text {  
    0% {  
        transform: translateX(100%);  /* 从容器右侧开始 */  
    }  
    100% {  
        transform: translateX(-100%); /* 到容器左侧结束 */  
    }  
}