/* 全局 */

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


body {

    font-family:
    "Microsoft YaHei",
    "Noto Sans SC",
    sans-serif;

    color:white;

    min-height:100vh;

    overflow-x:hidden;

    background:#080812;

}



/* 背景 */


.background {


    position:fixed;


    width:100%;

    height:100%;


    z-index:-3;



    background:

    linear-gradient(

        120deg,

        #12001f,

        #001b33,

        #24002f,

        #001122

    );


    background-size:

    400% 400%;


    animation:

    gradientMove 18s ease infinite;

}




@keyframes gradientMove {


    0% {

        background-position:

        0% 50%;

    }



    50% {

        background-position:

        100% 50%;

    }



    100% {

        background-position:

        0% 50%;

    }

}



/* 顶部 */


header {

    text-align:center;

    padding:

    80px 20px 50px;

}



.avatar {

    width:160px;

    height:160px;

    object-fit:cover;


    border-radius:50%;


    border:

    4px solid rgba(255,255,255,0.6);


    box-shadow:

    0 0 30px rgba(255,150,220,0.8);


    transition:.3s;

}



.avatar:hover {

    transform:

    scale(1.08)

    rotate(3deg);

}



h1 {

    font-size:45px;

    margin-top:25px;

    letter-spacing:3px;

}



header p {

    margin-top:15px;

    line-height:1.8;

    opacity:.85;

}



/* 按钮 */


.buttons {

    margin-top:30px;

}


.buttons a {


    display:inline-block;


    margin:8px;


    padding:

    12px 28px;


    border-radius:30px;


    text-decoration:none;


    color:white;


    background:

    rgba(255,255,255,.15);


    backdrop-filter:blur(10px);


    border:

    1px solid rgba(255,255,255,.2);


    transition:.3s;

}



.buttons a:hover {


    background:

    rgba(255,120,220,.5);


    transform:

    translateY(-5px);

}




/* 卡片 */


.card {


background:

rgba(255,255,255,.10);


backdrop-filter:

blur(18px);


box-shadow:

0 0 40px rgba(255,150,220,.15);


}



.card h2 {


    margin-bottom:25px;


    font-size:28px;

}



/* 项目网格 */


.grid {


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(220px,1fr));


    gap:20px;


}



.item {


    padding:25px;


    border-radius:18px;


    background:

    rgba(255,255,255,.12);



    transition:.3s;


}



.item:hover {


    transform:

    translateY(-8px);


    background:

    rgba(255,150,220,.25);


}




/* 音乐 */


audio {


    width:100%;

}



.playlist {


    margin-top:20px;


    display:flex;


    gap:15px;

    flex-wrap:wrap;

}



.playlist button {


    padding:

    10px 20px;


    border:none;


    border-radius:20px;


    cursor:pointer;


    color:white;


    background:

    rgba(255,255,255,.2);

}



.playlist button:hover {


    background:

    rgba(255,120,200,.6);

}




footer {


    text-align:center;


    padding:

    40px;


    opacity:.7;

}



/* 动画 */


@keyframes fadeIn {


    from {


        opacity:0;

        transform:

        translateY(30px);

    }


    to {


        opacity:1;

        transform:

        translateY(0);

    }

}





/* 手机 */

@media(max-width:600px){


    header {

        padding-top:50px;

    }



    .avatar {

        width:120px;

        height:120px;

    }



    h1 {

        font-size:32px;

    }


    .card {

        padding:25px;

    }


}

#stars {


    position:fixed;


    top:0;


    left:0;


    width:100%;


    height:100%;


    z-index:-2;


    pointer-events:none;

}