/* 整体容器居中 */
.container {
    display: flex;
    justify-content: center;
    height: 100vh;
    text-align: center;
}

/* 标题 h1 样式 */
h1 {
    font-size: 3rem;  /* 调整标题大小 */
    margin-top: 3rem;
    color: #007bff;  /* 字体颜色设置为蓝色 */
}

/* 搜索框和按钮一致高度且居中显示 */
.input-group {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
    max-width: 800px;  /* 最大宽度稍微调整一下 */
    margin-top: 1rem;
}

.input-group .form-control {
    height: 40px;  /* 设置输入框高度 */
    font-size: 1rem;
    border-radius: 0.375rem 0 0 0.375rem;  /* 圆角 */
    width: 150%;  /* 输入框宽度设置为最大宽度 */
    border: 1px solid #ccc;  /* 边框颜色调整为灰色，变细 */
}

.input-group .btn {
    height: 40px;  /* 按钮高度与输入框一致 */
    border-radius: 0 0.375rem 0.375rem 0;  /* 圆角 */
    background-color: #007bff;  /* 背景颜色设置为蓝色 */
    color: white;  /* 字体颜色设置为白色 */
    font-size: 1rem;
    padding: 0 20px;  /* 添加左右内边距使按钮更长 */
    border: 1px solid #007bff;  /* 边框颜色与按钮背景颜色一致 */
    display: flex;  /* 使用 flexbox 布局 */
    justify-content: center;  /* 水平居中 */
    align-items: center;  /* 垂直居中 */
}

.input-group .btn:hover {
    background-color: #007bff;  /* 悬停时背景颜色稍微变暗 */
}

/* 最近搜索关键词文本样式 */
.mt-4 {
    margin-top: 1.5rem;
}

.mt-4 span {
    font-size: 1.1rem;  /* 设置文字大小 */
    color: #333;
}

.mt-4 .btn-link {
    font-size: 1.1rem;  /* 设置字体大小一致 */
    color: #007bff;  /* 蓝色字体 */
    background-color: transparent;  /* 去掉背景 */
    border: none;  /* 去掉边框 */
    text-decoration: none;  /* 去掉下划线 */
}

.mt-4 .btn-link:hover {
    text-decoration: underline;  /* 添加悬停效果 */
}