* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    color: #34373b;
    font-family: 'Source Han Sans SC', '微软雅黑', serif;
    transition: 0.25s ease-out;
    user-select: none;
}

@font-face {
    font-family: 'Source Han Sans SC';
    src: url('../fonts/Source_Han_Sans_SC_Normal_Normal.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

body {
    overflow-x: hidden;
    width: 100vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
    background-color: #e1e4e6;
    background-image: linear-gradient(135deg, #c3c6c8, #e3e6e8);
}

main {
    padding: 2rem;
    border-radius: 1rem;
    background-color: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    background-image: url("../img/bg.jpeg");
    background-blend-mode: overlay;
    background-repeat: no-repeat;
    box-shadow:
            2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),
            6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),
            12.5px 12.5px 10px rgba(0, 0, 0, 0.035),
            22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),
            41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),
            100px 100px 80px rgba(0, 0, 0, 0.07);
}

header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

header .title {
    font-size: 24px;
    letter-spacing: 1px;
}

header .description {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #3D5A80;
}

header .description:hover {
    gap: 10px;
    color: #000;
}

header .description img {
    width: 1rem;
    opacity: 0.5;
}

section {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

section a {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 8px 13px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    box-shadow:
            1px 0.9px 3.6px rgba(0, 0, 0, 0.1),
            2.8px 2.5px 10px rgba(0, 0, 0, 0.045),
            6.6px 6px 24.1px rgba(0, 0, 0, 0.059),
            22px 20px 80px rgba(0, 0, 0, 0.09);
}

section a img {
    width: 32px;
    height: 32px;
}

section a .inf {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

section a .inf .left {
    color: #374357;
    font-size: 14px;
}

section a .inf .right {
    font-size: 12px;
    font-style: italic;
    color: #3D5A80;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

section a:hover {
    transition: 0.3s ease-out;
    transform: scale(1.06);
    background: #fff;
    box-shadow:
            1px 0.9px 3.6px rgba(0, 0, 0, 0.05),
            2.8px 2.5px 10px rgba(0, 0, 0, 0.045),
            6.6px 6px 24.1px rgba(0, 0, 0, 0.059),
            22px 20px 80px rgba(0, 0, 0, 0.03);
}

footer {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    font-size: 12px;
    color: #3a4455;
}