/* ============================================================
   index.css —— 首页专用样式
   只在本页面引入(其他页面不需要)

   依赖:必须在 base.css 之后引入,
        因为这里用到了 base.css 里定义的 --main_color
   ============================================================ */


/* ============================================================
   1. 页面主标题
   h1 默认字号太大(浏览器约 2em),这里降到 1.6rem(约 26px)
   ============================================================ */
h1 {
    font-size: 1.6rem;
}


/* ============================================================
   2. 首页社交链接行(小红书 / B站 / 原神面板)
   ============================================================ */
.social-links {
    display: flex;              /* 让里面的 <a> 横排 */
    justify-content: center;    /* 整体水平居中 */
    gap: 1.5rem;                /* 链接之间的间距 */
    margin-top: 1rem;           /* 与上方副标题拉开距离 */
}

.social-links a {
    color: var(--main_font_color);
    text-decoration: none;
    opacity: 0.85;              /* 平时略淡,不抢标题注意力 */
    transition: opacity 0.2s;   /* 悬浮时平滑变亮 */
}

.social-links a:hover {
    opacity: 1;                 /* 悬浮时变亮,给出可点击的反馈 */
}


.social-links a:not(:last-child)::after {
    content: "|";
    margin-left: 1.5rem;
    opacity: 0.4;               /* 竖线比文字淡,起分隔作用但不抢眼 */
}
h1 em { 
    cursor: pointer;
    transition: 0.18s;
    opacity: 1;
}
h1 em:hover{
    opacity: 0.7;
}