:root {
    --button-margin: 5px; /* 按钮间距变量 */
}

body {
    margin: 0; /* 去掉默认外边距 */
    font-family: Arial, sans-serif; /* 设置字体 */
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 1300px; /* 设置显示区域的高度 */
    overflow: hidden;
    display: flex; /* 使用 flexbox */
    justify-content: center; /* 水平居中 */
}

iframe {
    position: relative; /* 改为 relative */
    width: 90%; /* 设置iFrame的宽度为90% */
    max-width: 900px; /* 最大宽度 */
    height: 2000px; /* 设置iFrame的高度 */
    border: none;
}

.button-container {
    display: flex;
    flex-wrap: wrap; /* 允许按钮换行 */
    justify-content: center; /* 水平居中 */
    margin: 20px 0; /* 上下外边距 */
}

button {
    background-color: #234d5a; /* 按钮背景色 */
    color: white; /* 字体颜色 */
    padding: 15px; /* 内边距 */
    font-size: 16px; /* 字体大小 */
    border: none; /* 去掉边框 */
    border-radius: 5px; /* 圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影 */
    margin: var(--button-margin); /* 使用变量 */
    cursor: pointer; /* 鼠标悬停效果 */
    transition: background-color 0.3s, transform 0.3s; /* 增加过渡效果 */
    min-width: 120px; /* 固定最小宽度 */
    height: 50px; /* 固定高度 */
    text-align: center; /* 文本居中 */
}

button:hover {
    background-color: #45a049; /* 悬停时的背景颜色 */
    transform: scale(1.05); /* 鼠标悬停时稍微放大 */
}

.hint {
    text-align: center; /* 文本居中 */
    color: gray; /* 字体颜色 */
    font-size: 12px; /* 字体大小 */
    margin: 0; /* 去掉上下外边距 */
    padding-top: 10px; /* 适当的上内边距，与 iframe 框间隔 */
}

@media (max-width: 768px) {
    iframe {
        height: 400px; /* 在小屏幕上适当调整高度 */
    }
    button {
        flex: 1 1 100%; /* 使按钮在小屏幕上占满一行 */
        margin: 5px 0; /* 竖直间距 */
    }
}