/* 
元素	色值（HEX）	色值（HSL）	备注
背景	#121212	hsl(0, 0%, 7%)	深灰，不是纯黑
表面/卡片	#1E1E1E	hsl(0, 0%, 12%)	比背景亮一点点，有层次
一级文字	#E0E0E0	hsl(0, 0%, 88%)	柔白，不刺眼
二级文字	#A0A0A0	hsl(0, 0%, 63%)	辅助信息
边框/分隔线	#2C2C2C	hsl(0, 0%, 17%)	有存在感但不抢眼
链接/强调	#8AB4F8	hsl(217, 89%, 75%)	柔和的蓝，不荧光 */
:root {
    --bgcolor: #121212;
    /*深灰，不是纯黑*/
    --surface-color: #1E1E1E;
    /*比背景亮一点点，有层次*/
    --text-color-1: #E0E0E0;
    /*柔白，不刺眼*/
    --text-color-2: #A0A0A0;
    /*辅助信息*/
    --border-color: #2C2C2C;
    /*有存在感但不抢眼*/
    --link-color: #8AB4F8;
    /*柔和的蓝，不荧光*/
}

html,
body {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    background: var(--bgcolor);
    scroll-behavior: smooth;
}

ul {
    list-style: none;
    padding: 0;
    margin: 0;

}

a {
    text-decoration: none;
    color: var(--link-color);
}

p {
    color: var(--text-color-1);
}

.nav {
    color: var(--text-color-1);
    height: 50px;
    background: var(--surface-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav .icon {
    margin-left: 20px;
}

.nav .icon a {
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav .icon img {
    width: 30px;
    height: 30px;

}

.nav .title {
    display: inline-block;
    margin-left: 100px;
}

.nav ul {
    display: flex;
    justify-content: end;
    gap: 20px;
    line-height: 50px;
    margin-right: 100px;
}

.totop {
    position: fixed;
    width: 40px;
    height: 40px;
    right: 50px;
    bottom: 100px;
    background-color: var(--link-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer {
    width: 100%;
    height: 100px;
    margin-top: 100px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}