body {
    /* 创建一个角度倾斜的七彩渐变背景，每种颜色加 50% 透明度 */
    background: linear-gradient(45deg, 
                                rgba(255, 0, 0, 0.5), /* red */
                                rgba(255, 165, 0, 0.5), /* orange */
                                rgba(255, 255, 0, 0.5), /* yellow */
                                rgba(0, 128, 0, 0.5), /* green */
                                rgba(0, 0, 255, 0.5), /* blue */
                                rgba(75, 0, 130, 0.5), /* indigo */
                                rgba(238, 130, 238, 0.5)); /* violet */
    background-attachment: fixed;
    background-size: cover;
}

.sticky-top {
    position: sticky;
    top: 0;
    z-index: 1000;  /* 确保它在页面的最顶层 */
    width: 100%; /* 确保它宽度与容器一致 */
}

.card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* 设置图片容器为 Flexbox，使内容垂直和水平居中 */
.col-md-4 {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    padding: 2px; /* 维持间隙 */
}

.card-img {
    display: block; /* 设置图片为块级元素 */
    margin: auto; /* 水平居中图片 */
    padding: 2px; /* 在图片周围添加10px的间隙 */
    max-width: 100%; /* 确保图片不会超出容器宽度 */
    height: auto; /* 保持图片原有比例 */
}

.bold-border {
    border: 2px solid #000000; /* 设置边框为2px粗且颜色为黑色 */
}

.button-link {
    background: none;            /* 无背景 */
    color: blue;                 /* 链接蓝色 */
    border: none;                /* 无边框 */
    padding: 0;                  /* 无内边距 */
    margin: 0;                   /* 根据需要调整外边距 */
    font: inherit;               /* 继承字体样式 */
    cursor: pointer;             /* 手型光标 */
    text-decoration: underline;  /* 下划线，模仿链接 */
}

.button-link:hover,
.button-link:focus {
    text-decoration: none;       /* 鼠标悬停和聚焦时无下划线 */
    color: darkblue;             /* 悬停时颜色加深 */
}


.header-container {
    display: flex;
    align-items: center;
}
.header-title {
    margin-bottom: 0;
    flex-grow: 1;
}
.header-explanation {
    padding: 10px;
    margin-left: 20px;
    background-image: linear-gradient(to right, #ffd700, #b8860b);
    border: 3px solid hsl(210.8, 73.86%, 30%);
    border-radius: 5px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}


.tooltip-inner {
    text-align: left; /* 设置文本为左对齐 */
    font-size: 11px; /* 设置字号为 11px，大约等于 8 号字体 */
}