/* * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
} */

/* body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #10202b;
} */

#navbar {
    background-color: rgba(0, 0, 0, 0); /* 初始透明背景 */
    transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

    /*隐藏Radio按钮 */
.tabs input {
    visibility: hidden;
    display: none;
}


    /*导航栏容器 */
.buttons {
    position: relative;
    display: flex;
    /* justify-content: center; 使内容在水平方向上居中 */
    /* align-items: center; 使内容在垂直方向上居中 */
    gap: 30px;
    padding: 10px 20px;
    border-bottom: 1px solid rgba(255，255，255，0.2);
    /* background: #182d3c; */
    overflow: visible;
    border-radius: 20px;
}

        /*每个图标的样式 */
.buttons label {
    /* width: 20%; */
    /* width: auto; 自动调整宽度 */
    font-size: 1rem;
    color: transparent;
    opacity: 0.3;
    cursor: pointer;
    font-weight: 600;
    /* -webkit-text-stroke: 1px #fff; */
    transition: 0.5s;
}

.buttons label:hover {
    opacity: 1;
    filter: drop-shadow(8 0 10px #55fdf9)drop-shadow(0 0 20px #55fdf9);
}

.tabs input:nth-child(1):checked~.buttons label:nth-child(1),
.tabs input:nth-child(2):checked~.buttons label:nth-child(2),
.tabs input:nth-child(3):checked~.buttons label:nth-child(3),
.tabs input:nth-child(4):checked~.buttons label:nth-child(4),
.tabs input:nth-child(4):checked~.buttons label:nth-child(5),
.tabs input:nth-child(4):checked~.buttons label:nth-child(6),
.tabs input:nth-child(5):checked~.buttons label:nth-child(7) {

    color: #55fdf9;
    opacity:1;
    filter: drop-shadow(8 0 10px #55fdf9) drop-shadow(0 8 20px #55fdf9);
}
    /*下划线 */
.underline {
    position: absolute;
    /* left: 0; */
    bottom: 0;
    /* width: 20%; */
    height: 5px;
    transition: 0.5s;
}

.underline::before {
    position: absolute;
    content: "";
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    filter: drop-shadow(0 0 10px #55fdf9) drop-shadow(0 0 20px #55fdf9) drop-shadow(0 0 30px #55fdf9) drop-shadow(0 0 50px #55fdf9);
}

/*这里减去的数值是根据每个图标字体的宽度不同而定的，可以根据自己的需求调整 */
/* .tabs input:nth-child(1):checked~.buttons .underline {
    left: -2px;
}

.tabs input:nth-child(2):checked~.buttons .underline {
    left: calc(20% - 10px);
}

.tabs input:nth-child(3):checked~.buttons .underline {
    left: calc(40% - 9px);
}

.tabs input:nth-child(4):checked~.buttons .underline {
    left: calc(60% - 3px);
}

.tabs input:nth-child(5):checked~.buttons .underline {
    left: 80%;
} */