body {
    background-image: url(/assets/background-img.png);
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    cursor: url('/assets/basic/cursor.png'),auto;
}

html {
    scroll-behavior: smooth;
    cursor: url('/assets/basic/cursor.png'),auto;
}

* {
    scrollbar-width: none;
}

i {
    font-size: 0.8rem;
    margin-right: 4px;
    color: #ffffff80;
    transition: 0.3s;
}

#warning {
    color: #FFBA4A;
}

a {
    text-decoration: none;
    cursor: url('/assets/basic/cursor.png'),auto;
}

.top-header {
    width: 100%;
    background-color: rgba(51, 51, 51, 0.6);
    backdrop-filter: blur(10px);
    position: fixed;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center; /* 垂直居中整个导航栏 */
    justify-content: center; /* 水平居中整个导航栏 */
    padding: 0 20px; /* 添加一些内边距以确保内容不会紧贴边缘 */
}

.top-nav {
    display: flex;
    align-items: center; /* 垂直居中所有子元素 */
    justify-content: center; /* 水平居中所有子元素 */
    width: 100%;
}

.top-nav img {
    width: 72px;
    margin-right: 20px; /* 为 logo 添加一些右边距 */
}

.top-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* 水平居中列表项 */
}

.top-nav li {
    margin: 0 15px;
    display: flex;
    align-items: center; /* 确保 li 内的元素也垂直居中 */
}

.top-nav li a {
    display: block;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    padding: 14px 16px;
    font-weight: 100;
    text-decoration: none;
    position: relative; /* 设置相对定位 */
    transition: 0.3s;
}

.top-nav li a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%; /* 初始位置在中间 */
    width: 0; /* 初始宽度为0 */
    height: 2px; /* 初始高度为2px */
    background-color: #FFBA4A;
    transform: translateX(-50%); /* 使长方形居中 */
    transform-origin: center; /* 从中间扩展 */
    transition: width 0.3s, height 0.3s;
}

.top-nav li a:hover::after {
    width: 100%; /* 鼠标悬停时宽度扩展到100% */
}

.top-nav li a:hover i {
    color: #ffffff;
}

.top-nav li a:hover {
    scale: 1.2;
    color: #Ffffff;
    font-weight: 600;
}

/* 当滚动到对应 section 时，增加高度 */
.active-link::after {
    height: 4px; /* 增加高度为4px */
}

.top-nav li input {
    display: block;
    width: auto;
    border: 0px #00000000; 
    outline: none; 
    background-color: transparent; 
    color: #ffffff;
    opacity: 0.5; 
    padding: 10px; 
    font-size: 16px; 
    background-color: #00000040;
    border-radius: 9999px;
    transition: 0.2s;
    cursor: url('/assets/basic/cursor.png'),auto;
}

.top-nav li input:hover {
    background-color: #00000050;
    border: #ffffff10 3px solid;
    color: rgb(255, 255, 255);
}

.top-nav li input:focus {
    background-color: #00000050;
    border: #ffffff40 2px solid;
    color: rgb(255, 255, 255);
}

#main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    color: white;
    text-align: center;
    margin-top: 60px; /* 为导航栏留出空间 */
}

#main h1 {
    font-size: 3rem;
    margin-bottom: 20px;
}

.btn {
    display: inline-block;
    background-color: #FFBA4A;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.btn i {
    margin-left: 4px;
    font-size: 1rem;
}

.btn:hover {
    background-color: #f7ad37;
}

.links-bg {
    background-color: rgba(57, 59, 64, 0.6);
    backdrop-filter: blur(10px);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 20px;
    box-sizing: border-box;
    transition: 0.3s;
}

.container-title {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    transition: 0.3s;
}

.container-title p {
    font-size: 1.2rem;
    color: white;
    margin: 0;
    margin-left: 10px;
}

.links-container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 4px 0;
    box-sizing: border-box;
    transition: 0.3s;
}

.link {
    background-color: rgba(38, 39, 43, 0.3);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}

.link:hover {
    scale: 1.05;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.3);
    background-color: #00000040;
}

.link:active {
    scale: 0.9;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.3);
    background-color: #00000050;
}

.link img {
    width: 64px;
    height: 64px;
    margin-right: 10px;
    border-radius: 16px;
}

.link-text h4 {
    margin: 0;
    color: white;
}

.link-text p {
    margin: 5px 0 0;
    color: #ddd;
    font-size: 1rem;
}

.no-results-message {
    color: #ffffff80;
}

footer {
    width: 100%;
    background-color: rgba(51, 51, 51, 0.8);
    color: white;
    text-align: center;
    padding: 16px 0;
    box-sizing: border-box;
}

.footer-links {
    margin-bottom: 16px;
    display: flex;
    justify-self: center;
    gap: 8px;
}

footer p {
    margin: 0;
}

footer #sitetime-container {
    display: flex;
    justify-self: center;
    justify-content: center;
    align-items: center;
}

footer #sitetime {
    color: #ffffff60;
    font-size: smaller;
}

footer a {
    color: #ffffff80;
    transition: 0.3s;
}

footer a:hover {
    color: #ffffff;
    text-shadow: 0px 0px 4px #ffffff;
}