/* =============== Reset =============== */

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:
    "Inter",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;

    color:#111;

    background:url("images/bg.jpg") center center / cover no-repeat fixed;

    min-height:100vh;

    overflow-x:hidden;

    position:relative;
}


/* 背景轻微遮罩 */

body::before{

    content:"";

    position:fixed;

    inset:0;

    background:
    linear-gradient(
        to right,
        rgba(255,255,255,.25),
        rgba(255,255,255,.06),
        rgba(255,255,255,0)
    );

    z-index:-1;

}


/* 星空 */

#stars{

    position:fixed;

    inset:0;

    width:100%;

    height:100%;

    z-index:-2;

}


/* 内容 */

.container{

    min-height:100vh;

    display:flex;

    align-items:center;

    padding-left:8vw;

    animation:fade .8s ease;

}


.intro{

    max-width:520px;

}


h1{

    font-size:56px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}


.subtitle{

    font-size:20px;

    color:#444;

    margin-bottom:36px;

}


/* 图标 */

.social{

    display:flex;

    gap:22px;

    margin-bottom:70px;

}

.social a{

    color:#111;

    font-size:22px;

    transition:.25s;

}

.social a:hover{

    transform:
    translateY(-2px)
    scale(1.08);

}


/* About */

.about h2{

    font-size:34px;

    margin-bottom:26px;

}


.about p{

    font-size:18px;

    line-height:1.9;

    color:#222;

}


/* 页脚 */

footer{

    position:fixed;

    left:8vw;

    bottom:35px;

    font-size:14px;

    color:#666;

    line-height:1.8;

}


/* 深浅色按钮 */

#theme-toggle{

    position:fixed;

    top:28px;

    right:28px;

    width:42px;

    height:42px;

    border:none;

    background:transparent;

    cursor:pointer;

    font-size:18px;

}


/* 返回顶部 */

#back-top{

    position:fixed;

    right:28px;

    bottom:30px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    box-shadow:0 4px 18px rgba(0,0,0,.12);

    cursor:pointer;

    opacity:0;

    pointer-events:none;

    transition:.3s;

}

#back-top.show{

    opacity:1;

    pointer-events:auto;

}


/* 动画 */

@keyframes fade{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:none;

    }

}


/* 手机 */

@media(max-width:768px){

    .container{

        padding:50px 30px;

        align-items:flex-start;

    }

    h1{

        font-size:42px;

    }

    .subtitle{

        font-size:18px;

    }

    .about h2{

        font-size:28px;

    }

    .about p{

        font-size:16px;

    }

    footer{

        position:static;

        margin:60px 30px 30px;

    }

}
/* Dark Mode */

body.dark{
    color:#eee;
}

body.dark::before{
    background:linear-gradient(
        to right,
        rgba(0,0,0,.45),
        rgba(0,0,0,.15),
        rgba(0,0,0,0)
    );
}

body.dark .subtitle,
body.dark .about p,
body.dark footer{
    color:#d0d0d0;
}

body.dark .social a,
body.dark h1,
body.dark h2{
    color:#fff;
}

body.dark #back-top{
    background:#222;
    color:#fff;
}