/* style.css - 自定义样式 */

/* 基础样式和主题 */
body {
    /* 设置清晰的字体 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    /* 可以设置一个基础背景色，Tailwind 也可以覆盖 */
    @apply bg-gray-100 text-gray-800;
}

/* 炫酷 3D 闪光 Logo 样式 (简化版) */
/* 注意：纯 CSS 实现复杂 3D 闪光效果有限 */
/* 这里使用文本阴影和渐变来模拟效果 */
.cool-logo {
    /* 字体大小 */
    font-size: 2rem; /* 调整大小 */
    /* 字体加粗 */
    font-weight: bold;
    /* 文本颜色 - 使用渐变 */
    background: linear-gradient(45deg, #ffcc00, #ff6699, #cc66ff, #66ccff);
    -webkit-background-clip: text;
    background-clip: text;
    /* 使文字背景透明 */
    color: transparent;
    /* 简单的文本阴影模拟 3D 感 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    /* 添加一点动画效果 */
    /* transition: transform 0.3s ease; */
}

/* 鼠标悬停时给 Logo 添加轻微效果 */
.cool-logo:hover {
   /* transform: scale(1.05); */ /* 轻微放大 */
   /* 可以添加更多悬停效果 */
}

/* 五彩绚丽背景 (示例：使用渐变) */
.colorful-background {
    /* background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); */ /* 示例渐变 */
    /* 或者可以使用背景图片 */
    /* background-image: url('path/to/your/colorful-background.jpg'); */
    /* background-size: cover; */
}

/* 语言切换按钮激活状态 */
#language-switcher .lang-button.active {
    /* 激活状态下加粗 */
    font-weight: bold;
    /* 添加下划线 */
    text-decoration: underline;
    /* 可以改变颜色 */
    @apply text-blue-600;
}

/* iframe 容器，用于控制 iframe 比例和最大宽度 */
.iframe-container {
    /* 设置一个宽高比，例如 16:9 */
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
    overflow: hidden;
    margin: 0 auto; /* 居中 */
}

/* iframe 本身样式 */
.iframe-container iframe {
    /* 绝对定位以填充容器 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none; /* 移除边框 */
}

/* 全屏按钮样式 */
#fullscreen-button {
    /* 基础样式 */
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-700 transition duration-300;
    /* 定位 (可以根据需要调整) */
    /* position: absolute; */
    /* top: 10px; */
    /* right: 10px; */
    /* z-index: 10; */
}

/* 内容区域样式 */
#content-section {
    @apply max-w-4xl mx-auto px-4 py-8; /* 设置最大宽度、居中、内边距 */
}

/* 内容区域标题样式 */
#content-section h2 {
    @apply text-2xl font-bold mt-8 mb-4 border-b pb-2;
}

#content-section h3 {
    @apply text-xl font-semibold mt-6 mb-3;
}

/* 评论样式 */
.review {
    @apply bg-gray-200 p-4 rounded my-4 italic border-l-4 border-blue-400;
}

/* 页脚样式 */
footer {
    @apply text-center text-sm text-gray-600 py-6 mt-12 bg-gray-200;
}

footer a {
    @apply text-blue-600 hover:underline;
}

/* 添加更多自定义样式 */