:root {

    --light-bg:   #003c96;
    --light-text: #ddd;   
    --light-text-hover: #888;   

    --dark-bg:   #10473e; 
    --dark-text: #ddd;      
    --dark-text-hover: #999;   
}




.light-theme .navbar {
    background-color: var(--light-bg) !important;
}
.dark-theme .navbar {
    background-color: var(--dark-bg) !important;
}




.light-theme .nav-link {
    color: var(--light-text) !important;
    margin-right: 22px !important;
    padding-left: 14px;
}
.dark-theme .nav-link {
    color: var(--dark-text) !important;
    margin-right:  22px !important;
    padding-left: 14px;
}





.light-theme .btn {
    color: var(--light-text) !important;
}
.dark-theme .btn {
    color: var(--dark-text) !important;
}



.light-theme .btn:hover {
    color: var(--light-text-hover) !important;
}
.dark-theme .btn:hover {
    color: var(--dark-text-hover) !important;
}



.light-theme .active {
    background-color: #000163 !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding-left: 14px;
}
.dark-theme .active {
    background-color: #0b2f2c !important;
    color: #fff !important;
    border-radius: 6px !important;
    padding-left: 14px;
}

.light-theme .navbar-brand {
    color: #fff !important;
}

.dark-theme .navbar-brand {
    color: #fff !important;
}



/* 语言选择按钮 与 下拉三角之间的距离 */
.dropdown-toggle::after {
    margin-left: 0.55em;
}

.nav-first {
    margin-top: 0px;
}
.nav-last {
    margin-bottom: 0px;
}

.introduce-frame {
    text-align: justify;
}


/* 解决小屏中导航按钮变成下拉菜单后，导航条 第一个 和 最后一个 与上面、下面 的间距不够美观的问题 */
@media (max-width: 991.98px) {
    .nav-first {
        margin-top: 12px;
    }  
    .nav-last {
        margin-bottom: 12px;
    }

    /* ChatGPT 给的方案
    .navbar-collapse.collapsing .nav-link.active,
    .navbar-collapse.show .nav-link.active {
        margin-top: 12px;
    }
    */

    /* 左侧滑动的图片，其右侧文字，在小屏时要居中，大屏时靠左对齐（默认） */
    .slide-text {
        justify-content: center !important;
    }

    .introduce-frame {
        text-align: justify;
        margin-top: 24px;
    }
    
}


.navbar-toggler {
    border: none;
}

.navbar-sidemenu {
    cursor: pointer;
    filter: invert(48%) sepia(79%) saturate(26%) hue-rotate(412deg) brightness(118%) contrast(419%);
}

.nav-item {
    font-size: 18px;
}

.dropdown-menu {
    line-height: 36px;
}

.carousel-item.active {
    background-color: transparent !important;
}

.dark-theme .dropdown-menu {
    background-color: #052724;
}


.light-theme .dropdown-menu {
    background-color: #fff;
}