/* 导入基础和响应式样式表 */
@import url(content.css?LikeGirl=v5.2.0);
@import url(small-x.css?LikeGirl=v5.2.0) only screen and (max-width: 768px);
@import url(small.css?LikeGirl=v5.2.0) only screen and (min-width: 768px);
@import url(medium.css?LikeGirl=v5.2.0) only screen and (min-width: 960px);
@import url(big.css?LikeGirl=v5.2.0) only screen and (min-width: 1200px);

/*
 * ===================================================================
 * 新增的自定义样式
 * ===================================================================
 * 以下是为您网站增加活力和设计感的自定义CSS规则。
 * 将它们直接添加到 index.css 文件中，可以覆盖从其他文件导入的默认样式。
*/

/* 1. 修改顶部区域背景 */
.notice {
    background: linear-gradient(135deg, #6dd5ed, #2193b0); /* 使用蓝绿色渐变背景 */
    color: #fff; /* 将文字颜色改为白色以保证可读性 */
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

/* 2. 修改主按钮样式 */
.in-but {
    background: linear-gradient(135deg, #ff9a9e, #fecfef); /* 使用粉色渐变背景 */
    border: none; /* 移除边框 */
    color: white; /* 按钮文字颜色 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: all 0.3s ease; /* 平滑过渡效果 */
}

.in-but:hover {
    transform: translateY(-3px); /* 鼠标悬停时轻微上移 */
    box-shadow: 0 7px 20px rgba(0,0,0,0.25); /* 增强阴影效果 */
}

/* 3. 针对文章卡片的悬停效果修改 (此部分建议放在 big.css 中，但放在此处也能生效) */
.list-card:hover {
    transform: scale(1.05) rotate(3deg); /* 放大并轻微旋转 */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* 增加更明显的阴影 */
    z-index: 10;
}

/* 让卡片看起来错落有致 */
.list-card:nth-child(odd):hover {
    transform: scale(1.05) rotate(-3deg); /* 奇数卡片向另一个方向旋转 */
}