body{
    background-color: #EAEAEA;
}


.header {
    width: 100%;
    height: 80px;
    display: flex;
    align-items: center;
    width: 100%;
    /* background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); */
    background: linear-gradient(135deg, #1a5f7a 0%, #0e3b5e 100%); 
    /* background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);  */
    /* background: linear-gradient(135deg, #003366 0%, #005c99 100%);  */
    /* background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);  */
    box-sizing: border-box;
    padding: 15px 15px 15px 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}


.header {
    position: fixed;  /* 将header div设置为固定定位 */
    top: 0;           /* 设置header div距离顶部的距离 */
    left: 0;          /* 设置header div距离左边的距离 */
    width: 100%;      /* 设置header div的宽度 */
    background-color: #f2f2f2;  /* 设置header div的背景颜色 */
    z-index: 1000;    /* 设置header div的层级 */
}

.header a, p{
    color: aliceblue;
    
}

.header:hover {
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* 悬停时阴影加强 */
    transform: translateY(-2px); /* 微微上移 */
}

.logo {
    /* background-color: #d32a2a; */
    margin-top: 8px;
    margin-right: 20px; 
    color: white;
    font-size: 24px;
    font-weight: bold;
    width: 100px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logo img{
    width: 100px;
    height: 30px;
}

.nav {
    display: flex;
    align-items: center;
    gap: 10px; 
    padding: 0px;
    
}

.nav a {
    font-family: 
        "PingFang SC",  /* 苹果系统字体 */
        "Microsoft YaHei",  /* 微软雅黑 */
        "Hiragino Sans GB",  /* 决定字体 */
        "Source Han Sans CN", /* 思源黑体 */
        "WenQuanYi Micro Hei", /* 文泉驿微米黑 */
        sans-serif; /* 通用字体 */
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 0;
    background-color: white;
    transition: width 0.3s ease;
}

.nav a:hover {
    color: white;
}

.nav a:hover::after {
    width: 100%;
}

.nav li{
    list-style-type: none;

}


.login {
    margin-left: auto;
}


.login-button {
    padding: 8px 16px;
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid white;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: bold;
    text-transform: none;
    letter-spacing: 1px;
}

.login-button:hover {
    background-color: white;
    color: #2575fc;
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* 添加一些炫酷的动画效果 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.login-button:active {
    animation: pulse 0.3s linear;
}

.breaker {
    margin: 82px;
}

/* added for small size */

:root {
    --z-index: 1001;
}

nav{
    z-index: var(--z-index);
}

.nav-dropdown {
    display: none; /* 默认隐藏下拉菜单 */
}

.dropdown-toggle {
    background-color: #7c857c;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.dropdown-toggle:hover {
    background-color: #f7a747;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    margin-top: 0px;
    z-index: var(--z-index);
}

.dropdown-menu li {
    /* padding: 12px 16px; */
    display: block;
    line-height: 30px; 
    padding: 0px;
}

.dropdown-menu li:hover {
    background-color: #f1f1f1;
}

.dropdown-menu a {
    color: #333;
    text-decoration: none;
    width: 100%; /* 设置宽度为100% */
    height: 100%; /* 设置高度为100% */
    padding: 0px;
    display: block;
}

.dropdown-menu a:hover {
    color: #4CAF50;
}

.nav-dropdown:hover .dropdown-menu {
    display: block; /* 鼠标悬停时显示下拉菜单 */
}

@media (max-width: 768px) {
    .nav {
        display: none; /* 隐藏导航列表 */
    }
    .nav-dropdown {
        display: block; /* 显示下拉菜单 */
    }
    .nav-dropdown:hover .dropdown-menu {
        display: block;
    }
    .dropdown-menu li:hover {
        background-color: #f1f1f1;
    }
}