/*网站字体*/
/*原则上你可以设置多个字体，然后在不同的部位使用不同的字体。*/
@font-face{
    font-family:btfFont;
    src:
    url(https://cdn.starskyz.top/fonts/LXGWWenKaiLite.woff2) format('woff2')
}
body{
    font-family:"btfFont" !important
}


/* 基础变量定义 */
:root {
    /* 颜色方案 */
    --bg-dark: #1a1a1a;         /* 背景底色 */
    --text-primary: rgba(255, 255, 255, 0.9);  /* 主要文字颜色 */
    --text-secondary: rgba(255, 255, 255, 0.6); /* 次要文字颜色 */
    --card-bg: rgba(30, 30, 30, 0.85);         /* 卡片背景 */
    --hover-bg: rgba(255, 255, 255, 0.1);      /* 悬停背景 */
}

/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 盒模型计算方式 */
}

/* 基础页面样式 */
body {
    font-family: 'Segoe UI', system-ui, sans-serif; /* 字体栈 */
    min-height: 100vh; /* 最小高度撑满视口 */
    background: var(--bg-dark); /* 使用CSS变量 */
    background-size: cover;
    background-position: center;
    color: var(--text-primary); /* 文字颜色 */
}

/* 内容区块通用样式 */
.content-block {
    background: var(--card-bg);
    backdrop-filter: blur(8px);  /* 毛玻璃效果 */
    border-radius: 12px;         /* 圆角半径 */
    padding: 20px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 页头样式 */
header {
    min-height: 40vh; /* 最小高度为视口40% */
    display: flex;
    align-items: center;   /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    flex-direction: column; /* 纵向排列 */
    text-align: center;
    padding: 40px 20px;
}

/* 主标题 */
h1 {
    font-size: 3rem; /* 48px */
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); /* 文字阴影 */
}

/* 容器约束 */
.container {
    max-width: 800px;     /* 最大内容宽度 */
    margin: 0 auto;       /* 水平居中 */
    padding: 0 20px;      /* 左右留白 */
}

/* 分组标题 */
.group-title {
    font-size: 1.5rem;    /* 24px */
    margin: 1rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1); /* 下划线 */
}

/* 链接容器布局 */
.links {
    display: grid;
    grid-template-columns: 1fr; /* 自动适应列数 */
    gap: 1rem; /* 项间距 */
}

/* 单个链接项 */
.link-item {
    display: flex;
    align-items: center;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: transform 0.2s, background 0.2s; /* 过渡动画 */
    text-decoration: none;
    color: inherit; /* 继承文字颜色 */
}

/* 链接悬停效果 */
.link-item:hover {
    background: var(--hover-bg);
    transform: translateY(-2px); /* 上移效果 */
}

/* 链接图标 */
.link-icon {
    width: 60px;
    height: 60px;
    object-fit: cover;   /* 保持图片比例 */
    border-radius: 6px;
    margin-right: 12px;
}

/* 页脚样式 */
footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--text-secondary);
}

/* 移动端适配 */
@media (max-width: 768px) {
    h1 {
        font-size: 2rem; /* 32px */
    }
    
    .links {
        grid-template-columns: 1fr; /* 单列布局 */
    }
}