#header a:focus {
    outline: none;
}
#header button {
    outline: none;
    border:none;
    cursor:pointer;
}

/* 确保header始终固定在顶部 */
.header-nav {
    top: 0; /* 设置为 0，确保它始终在顶部 */
    left: 0; /* 左侧对齐 */
    width: 100%;
    z-index: 999; /* 确保导航栏始终显示在最上面 */
    transition: background-color 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out;
}

    /* 背景色透明时的样式 */
    .header-nav.transparent {
        background-color: rgba(255, 255, 255, 0); /* 透明 */
        backdrop-filter: blur(0px); /* 设置背景模糊 */
    }

    /* 背景色变为白色时的样式 */
    .header-nav.solid {
        background-color: rgba(255, 255, 255, 1); /* 白色背景 */
        backdrop-filter: blur(5px) grayscale(50%);
    }

    /* 背景色透明时的样式 */
#mobile-menu.transparent {
    background-color: rgba(255, 255, 255, 0); /* 透明 */
    backdrop-filter: blur(0px); /* 设置背景模糊 */
}

    /* 背景色变为白色时的样式 */
#mobile-menu.solid {
    background-color: rgba(255, 255, 255, 1); /* 白色背景 */
    backdrop-filter: blur(5px) grayscale(50%);
}

/* 响应式菜单 */
@media (max-width: 767px) {
    #mobile-menu {
        display: none; /* 默认隐藏 */
        /*box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);*/
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        padding: 1rem;
    }

        /* 当菜单被打开时，显示 */
        #mobile-menu.show {
            display: block;
        }
}

.hero-sentinel {
    visibility: hidden; /* 隐藏但占位 */
    height: 1px;
}

/*.svg-container {
    transition: filter 0.7s ease;
}

    .svg-container:hover {
        filter: invert(1);*/ /* 颜色反转，黑变白 */
    /*}*/

/* Define the breathing effect */
@keyframes breathing {
    0%, 100% {
        fill: #000000;
    }

    50% {
        fill: #F5F5F5;
    }
}

/* Apply the breathing effect to the text */
.breathing-text {
    animation: breathing 3s ease-in-out infinite;
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}