@charset "utf-8";

body {
    font-family: Microsoft YaHei, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    font-size: 16px;
    line-height: 1.6;
    background-color: #fbfcfc;
    scroll-behavior: smooth; /* 平滑滚动 */
}

img {
    max-width: 100%
}

@media (min-width: 768px) {
    html {
        font-size: 14px;
    }
}

header {
    padding: 156px 0 100px;
}

#top-bar {
    position: fixed;
    top: 0;
    width: 100%;
    background: linear-gradient(to right, #007BFF, #00BFFF);
    z-index: 1000;
}

#top-bar nav a {
    font-size: 18px; /* 根据需要调整字体大小 */
    font-weight: normal;
}

#top-bar .btn {
    font-size: 16px; /* 根据需要调整按钮字体大小 */
    font-weight: normal;
}

#main {
    margin-top: 100px;
}

@media (max-width: 992px) {
    #top-bar {
        position: relative; /* 移除在中等屏幕下的 fixed 定位 */
    }

    #main {
        margin-top: 0; /* 重置在中等屏幕下的顶部间距 */
    }
}

section {
    padding: 150px 0;
}

.card-header-title {
    max-width: 700px;
}

.card-deck .card {
    min-width: 220px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

.panel {
    display: none;
    margin: 20px 5px 20px;
}

.panel.active {
    display: block;
}

.shadow {
    box-shadow: 0 0 10px #ccc;
    transition: box-shadow 0.3s;
}

.oauth-login-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

.oauth-login-btn img {
    max-width: 100%;
}

.hand-pointer {
    cursor: pointer;
}

#topBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 50%; /* 将border-radius设置为50%实现圆形 */
}

#avatar {
    cursor: pointer;
}

.border-left-primary {
    border-left: 0.25rem solid #4e73df !important;
}

.border-bottom-primary {
    border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
    border-left: 0.25rem solid #858796 !important;
}

.border-bottom-secondary {
    border-bottom: 0.25rem solid #858796 !important;
}

.border-left-success {
    border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
    border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
    border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
    border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
    border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
    border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
    border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
    border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
    border-left: 0.25rem solid #f8f9fc !important;
}

.border-bottom-light {
    border-bottom: 0.25rem solid #f8f9fc !important;
}

.border-left-dark {
    border-left: 0.25rem solid #5a5c69 !important;
}

.border-bottom-dark {
    border-bottom: 0.25rem solid #5a5c69 !important;
}

/* 开发者回复和子评论统一样式 */
.bg-light.p-3.rounded,
.child-comment {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #e9ecef;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.bg-light.p-3.rounded:hover,
.child-comment:hover {
    background-color: #f1f3f4;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.child-comments {
    margin-top: 12px;
    padding-left: 0;
}

.child-comment .media-body {
    padding: 0;
}

.child-comment .border-left {
    border-left: none !important;
}

/* 减少开发者回复的默认内边距 */
.bg-light.p-3 {
    padding: 12px !important;
}