body {
    font-family: 'Noto Sans', 'PingFang SC', 'Source Han Sans', 'Microsoft YaHei', sans-serif;
    color: darkgray;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background: linear-gradient(to top, #333, #111), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 10 10"><circle cx="1" cy="1" r="1" fill="rgba(255, 255, 255, 0.1)"/></svg');
    background-size: cover;
    background-attachment: fixed;
}

#additionalImage {
    position: fixed;
    left: 35%;
    width: 50%;
    z-index: -1; /* Ensures the image is behind all other content */
    opacity: 0.5; /* Optional: Adjust opacity if needed */
}

h1 {
    text-align: center;
    font-size: 2.2em;
    color: rgb(107, 175, 127);
    margin-bottom: 30px;
}

.search-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 15px;
}

.search-result {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

#searchBox {
    width: 25%;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid darkgray;
}

#randomPick {
    padding: 6px 9px;
    background-color: rgb(107, 175, 127);
    color: rgb(48, 48, 48);
    border: none;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

.filter {
    background-color: #333; /* 深灰背景 */
    color: darkgray; /* 字体颜色 */
    border: 1px solid #474747; /* 边框颜色 */
    border-radius: 5px; /* 圆角 */
    padding: 5px; /* 内边距 */
    width: 70%; /* Ensures the filter always fits in the column */
    box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

.filter option {
    background-color: #333; /* 深灰背景 */
    color: darkgray; /* 字体颜色 */
    font-size: small;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Ensures columns are fixed width */
}

.table-container {
    height: 480px;
    overflow-y: auto;
    overflow-x: hidden; /* Prevent horizontal scrolling */
    margin-bottom: 10px;
    
}

/* Custom scrollbar styles for all elements */
*::-webkit-scrollbar {
    width: 12px;
}

*::-webkit-scrollbar-track {
    background: #2e2e2e; /* Dark grey background */
}

*::-webkit-scrollbar-thumb {
    background-color: #474747; /* Darker grey thumb */
    border-radius: 10px;
    border: 3px solid #2e2e2e; /* Adds a border around the thumb */
}

.song-name {
    cursor: pointer;
}

.clicked-song {
    color: rgb(53, 128, 81); /* 可以根据需要更改颜色 */
}

#songTable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* Ensures columns are fixed width */
}

#songTable th {
    position: sticky;
    top: 0; /* 修正表头位置 */
    background-color: #333; /* 使表头背景不透明 */
    z-index: 1; /* 确保表头在其他表格行之上 */
}

#songTable th, #songTable td {
    text-align: left;
    border: 1px solid #474747;
    padding: 10px;
    word-wrap: break-word; /* Ensures content wraps within the cell */
}

#songTable tr:hover {
    background-color: #4e4e4e;
}

#songTable th[data-sort] {
    cursor: pointer;
    transition: background-color 0.3s; /* 背景色渐变效果 */
}

#songTable th[data-sort]:hover {
    background-color: #555; /* 或您喜欢的任何颜色 */
}

#songTable th:nth-child(1), #songTable td:nth-child(1) { /* 第一列, songName */
    width: 40%; /* 调整为所需的宽度 */
}

#songTable th:nth-child(2), #songTable td:nth-child(2) { /* 第二列, singerName */
    width: 40%; /* 调整为所需的宽度 */
}

#songTable th:nth-child(3), #songTable td:nth-child(3) { /* 第三列, language */
    width: 20%; /* 调整为所需的宽度 */
}

#songTable tbody tr {
    transition: background-color 0.3s, color 0.3s; /* 添加过渡效果 */
}

.highlighted-row {
    background-color: rgb(103, 211, 136);
    color: rgb(48, 48, 48);
}

.footer-container {
    margin-top: 10px;
    padding: 20px 0;
    text-align: center;
    color: rgb(255, 255, 255);
    border-top: 1px solid #2E2E2E;
    background-image: url('footer_gif.gif'); /* 更改为您的图片路径 */
    background-size: cover; /* 使图片覆盖整个footer区域 */
    background-repeat: no-repeat; /* 防止图片重复 */
    background-position: center; /* 将图片居中 */
}

footer p {
    margin: 0;
    padding: 5px;
    color: rgb(218, 218, 218);
    font-size: 0.9em; /* 设置尾注文字大小 */
}

/* Global Time Section Styling */
#global-times {
    color: rgb(107, 175, 127); /* Green text */
    padding: 5px 5px; /* Compact padding */
    font-family: 'Arial', sans-serif; /* Modern font, change as needed */
}

#global-times h2 {
    margin-bottom: 8px;
    font-size: 1.1em; /* Slightly smaller heading for compact design */
}

/* Container for time entries */
.time-entries {
    display: flex;
    justify-content: center;
    gap: 5px; /* Reduced space between the children for a compact design */
}

/* Individual time entries */
.time-entry {
    position: relative; /* 设置为相对定位 */
    color: rgb(107, 175, 127); /* Green text */
    padding: 5px; /* Reduced padding for a compact design */
    border: 1px solid rgb(107, 175, 127); /* Green border */
    border-radius: 2px; /* Smaller border radius for a sharper look */
    flex: 1; /* Allows equal spacing and takes up available space */
    min-width: 80px; /* Minimum width to ensure content fits */
    text-align: center; /* Center-align the text */
}

.date-diff {
    position: absolute; /* 绝对定位 */
    top: 0; /* 距离容器顶部为0 */
    right: 0; /* 距离容器右边为0 */
    color: rgb(107, 175, 127); /* 字体颜色，根据需要调整 */
    padding: 3px 6px; /* 内填充，根据需要调整 */
    border-radius: 0 0 0 4px; /* 根据需要调整圆角 */
    font-size: 0.8em; /* 字体大小，根据需要调整 */
    font-style: oblique;
    font-weight: bold;
}

.time-entry h3 {
    margin: 0;
    font-size: 0.8em; /* Smaller font size for city names */
    font-weight: normal; /* Less emphasis on city names to highlight times */
}

.time-entry p {
    margin: 3px 0 0; /* Reduced space above the time */
    font-size: 0.9em; /* Compact font size for times */
    font-weight: bold; /* Bold to make the time stand out */
}

@media screen and (max-width: 768px) {
    body {
        padding: 10px;
        font-size: 0.9em;
    }

    #additionalImage {
        position: fixed;
        top: 45%;
        left: 5%;
        width: 100%;
        z-index: -1; /* Ensures the image is behind all other content */
        opacity: 0.5; /* Optional: Adjust opacity if needed */
    }

    .search-container {
        flex-direction: column;
        align-items: center;
    }

    #searchBox {
        width: 50%;
    }

    .header {
        padding-top: 30px;
    }

    .table-container {
        height: 360px; /* Adjust the table height for mobile view */
        overflow-x: auto;
    }

    .filter option {
        font-size:0.8em;
    }

    .time-entry {
        padding: 3px; /* Less padding for a more compact entry */
        margin: 1px; /* Reduce margin to save space */
        flex: 1; /* Allows shrinking and growing as needed */
        min-width: 0; /* Allows shrinking below the specified width */
        text-align: left; /* Center-align the text */
    }

    .time-entry h3 {
        font-size: 0.7em; /* Even smaller font size for city names on mobile */
    }

    .time-entry p {
        font-size: 0.8em; /* Slightly smaller font size for times on mobile */
    }

    .date-diff {
        padding: 2px 3px; /* 内填充，根据需要调整 */
        border-radius: 0 0 0 4px; /* 根据需要调整圆角 */
        font-size: 0.2em; /* 字体大小，根据需要调整 */
    }
}