/* =================================================
   AI 技术博客 · 卡片式主题
   ================================================= */


/* ===== 整体页面背景 ===== */

body {

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(120, 180, 255, .25),
            transparent 32%
        ),

        radial-gradient(
            circle at 85% 75%,
            rgba(150, 120, 255, .20),
            transparent 30%
        ),

        linear-gradient(
            135deg,
            #edf5ff 0%,
            #f7f9ff 45%,
            #eef1ff 100%
        ) !important;

    background-attachment: fixed;

    animation: backgroundMove 15s ease-in-out infinite alternate;

}


/* ===== 背景缓慢动画 ===== */

@keyframes backgroundMove {

    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 100% 100%;
    }

}


/* =================================================
   博客主体
   ================================================= */

#main {

    background: rgba(255,255,255,.93) !important;

    border-radius: 20px !important;

    padding: 30px !important;

    box-shadow:
        0 15px 50px rgba(60,90,150,.15) !important;

    animation: mainEnter 1s ease-out;

}


/* ===== 页面进入动画 ===== */

@keyframes mainEnter {

    from {

        opacity: 0;

        transform: translateY(30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* =================================================
   博客标题
   ================================================= */

#blogTitle {

    border: none !important;

}


#blogTitle h1 {

    font-size: 32px !important;

    font-weight: 700;

}


/* =================================================
   文章标题
   ================================================= */

.postTitle {

    border: none !important;

}


.postTitle a {

    color: #315f9c !important;

    font-weight: 650;

    transition: all .3s ease;

}


.postTitle a:hover {

    color: #735fd1 !important;

}


/* =================================================
   正文
   ================================================= */

.postBody {

    font-size: 16px !important;

    line-height: 1.9 !important;

    color: #374151 !important;

}


/* =================================================
   H1 / H2
   ================================================= */

.postBody h1,
.postBody h2 {

    color: #315f9c !important;

    border-left: 5px solid #6fa8e6;

    padding-left: 14px;

    transition: all .3s ease;

}


.postBody h1:hover,
.postBody h2:hover {

    padding-left: 22px;

    border-left-color: #806fd4;

}


/* =================================================
   图片
   ================================================= */

.postBody img {

    border-radius: 14px !important;

    box-shadow:
        0 8px 25px rgba(40,80,130,.14);

    transition:
        transform .4s ease,
        box-shadow .4s ease;

}


/* 图片悬浮 */

.postBody img:hover {

    transform:
        translateY(-6px)
        scale(1.015);

    box-shadow:
        0 18px 40px rgba(40,80,130,.25);

}


/* =================================================
   引用块
   ================================================= */

.postBody blockquote {

    background:
        linear-gradient(
            135deg,
            #f1f7ff,
            #f6f4ff
        ) !important;

    border-left:
        5px solid #709fe0 !important;

    border-radius: 10px;

    padding: 12px 18px;

    transition: all .3s ease;

}


.postBody blockquote:hover {

    transform: translateX(6px);

    box-shadow:
        0 8px 20px rgba(80,110,170,.12);

}


/* =================================================
   代码块
   ================================================= */

.postBody pre {

    border-radius: 12px !important;

    box-shadow:
        0 5px 20px rgba(0,0,0,.08);

    transition: all .3s ease;

}


.postBody pre:hover {

    transform: translateY(-3px);

    box-shadow:
        0 10px 30px rgba(50,90,140,.15);

}


/* =================================================
   表格
   ================================================= */

.postBody table {

    border-radius: 10px;

    overflow: hidden;

    box-shadow:
        0 4px 15px rgba(60,100,140,.08);

}


/* =================================================
   链接
   ================================================= */

a {

    transition:
        color .25s ease;

}


a:hover {

    color: #735fd1 !important;

}


/* =================================================
   滚动条
   ================================================= */

::-webkit-scrollbar {

    width: 8px;

}


::-webkit-scrollbar-thumb {

    background: #9dbce0;

    border-radius: 10px;

}


::-webkit-scrollbar-thumb:hover {

    background: #718fc0;

}