/* 重置样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    background: linear-gradient(135deg, #009c3b, #ffcc00); /* 使用巴西风格的绿色和黄色渐变 */
    padding: 0;
    color: #fff; /* 文字颜色更改为白色，使其在深色背景上清晰可见 */
}

/* 顶部导航栏 */
.navbar {
    width: 100%;
    background-color: #006600; /* 深绿色 */
    padding: 10px 20px;
    position: fixed;
    top: 0;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navbar .logo {
    font-size: 1.8em;
    color: #fff;
    font-weight: bold;
}

/* 顶部横幅 */
header .banner {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
    margin-top: 60px; /* 为导航栏腾出空间 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 正文部分 */
.content {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9); /* 半透明背景，保持内容可读性 */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    margin-bottom: 40px;
}

h1 {
    font-size: 2.5em;
    color: #003366; /* 深蓝色，呼应巴西国旗中的蓝色 */
    margin-bottom: 20px;
}

p {
    font-size: 1.2em;
    color: #333;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 悬浮广告样式 */
.floating-ad {
    position: fixed;
    width: 12%; /* 使用百分比宽度，根据屏幕大小调整 */
    height: auto; /* 自动高度 */
    max-height: 400px; /* 默认最大高度为400px */
    border-radius: 8px;
    background-color: #ffcc00;
    border: 2px solid #000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

.floating-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.floating-ad.left {
    left: 2%; /* 距离屏幕左边2%，可根据实际情况调整 */
    top: 150px;
}

.floating-ad.right {
    right: 2%; /* 距离屏幕右边2% */
    top: 150px;
}

/* 底部广告 */
.bottom-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto; /* 自动高度，根据图片比例调整 */
    background-color: #ff6600;
    text-align: center;
    border-top: 2px solid #000;
    overflow: hidden;
}

.bottom-ad .bottom-ad-img {
    width: 100%; /* 图片宽度100%填充广告位 */
    height: auto; /* 高度自动调整，保持比例 */
    max-height: 20vh; /* 最大高度设置为视口高度的20%，根据屏幕大小自适应 */
    object-fit: contain; /* 保持图片比例 */
}

/* 广告关闭按钮 */
.close-btn {
    position: absolute;
    top: 5px;
    right: 5px;
    cursor: pointer;
    background-color: #333;
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    border-radius: 50%;
}

/* 响应式设计 - 针对H5优化 */
@media (max-width: 768px) {
    .floating-ad {
        width: 18%; /* 在较小屏幕上，广告宽度为18% */
        max-height: 400px; /* 广告最大高度调整为400px，确保足够的高度展示广告 */
    }

    .floating-ad.left {
        left: 1%; /* 减小与屏幕边缘的距离 */
    }

    .floating-ad.right {
        right: 1%; /* 减小与屏幕边缘的距离 */
    }

    .bottom-ad .bottom-ad-img {
        max-height: 15vh; /* 底部广告的最大高度为屏幕高度的15% */
    }
}

/* 更小屏幕适配 */
@media (max-width: 480px) {
    .floating-ad {
        width: 25%; /* 在更小屏幕上，广告宽度为25% */
        max-height: 350px; /* 广告最大高度调整为350px */
    }

    .bottom-ad .bottom-ad-img {
        max-height: 15vh; /* 底部广告的最大高度为屏幕高度的15% */
    }
}