body {
    padding-top: 0rem;
    background-color: #f8f9fa;
}
h1, h2, h3, h4, h5, h6 {
    text-align: center;
}

.container {
    text-align: center;
}
div:not(:last-child) {
    margin-bottom: 2rem;
}

/* 搜索框和按钮的布局 */
.form-inline {
    display: flex;
    justify-content: center;
    gap: 0.1rem; /* 按钮之间的空隙 */
}

/* 当屏幕宽度小于某个特定值时，可以进一步调整样式 */
@media (max-width: 768px) {
    .form-inline {
        flex-direction: column;
        gap: 0;
        width: 100%;
        justify-content: center;
    }
    .form-inline .search-buttons {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }
    .form-inline .input-block {
        display: flex;
        justify-content: center;
        margin: 0;
    }

    #search {
        /* 例如，减少padding或font-size以适应更小的屏幕 */
        padding: 10px 5px;
        font-size: 14px;
        width: 80%;
        box-sizing: border-box;
        min-width: 10ch;
        /* align-items: center; */
    }
}

/* 加载中的文本默认不显示 */
#loadingSpinner {
    display: none;
}

input[type="text"] {
    width: 50ch; /* 50个中文字符的默认宽度 */
    min-width: 50ch; /* 最小宽度 */
    max-width: 100%; /* 最大宽度 */
    margin-left: 0.1rem;
    margin-right: 0.1rem;
    box-sizing: content-box; /* 边框和内边距不包含在宽度内 */
}
input[type="text"]:focus {
    width: auto; /* 动态扩大 */
}