/*修改背景的颜色*/
:root {
    --global-bg: #89ac9b;/* 全局背景色 */
    --light-blue: #39a088;/* Butterfly 的主色变量名比较特殊，叫 light-blue */
    --text-selection: #521779;/* 文字选中颜色 */
    --bnt-bg: #b0cabd; /* 按钮颜色 */
    --bnt-hover-color: #f1f159;/* 按钮悬停颜色 */

}

.card-widget {
    border-radius: 10px !important;
    box-shadow: 0 4px 8px rgba(179, 215, 52, 0.80);
}

/* 使得侧栏从右边转为左边 ,并向左对齐*/
#content-inner {
    display: flex ;
    flex-direction: row-reverse; /* reverse axis*/
    justify-content: flex-end; /* 将元素推到当前的方向，到头为止*/
}
/* 调整card-widget 的左边距*/
#aside-content {
    width: 20% !important;
    margin-right: 20px !important;
    margin-left: 20px !important;
}

.recent-post-item:hover, .card-widget:hover {
    /* recent-post-item 是post的博客文章 card-widget 是侧边栏的工具卡片
hover 表示当悬浮时 属性成立*/
    box-shadow: 0 8px 20px rgba(0 , 0 , 0 , 0.15) !important;
    /* px arguments : arg[0]表示四周发散 arg[1] 表示向下投影 arg[2]表示模糊半径 
    ！important 表示强制覆盖*/
    transform: translateY(-5px); /* transform 变换属性 translateY纵向移动，在屏幕坐标系中，向上是负方向）
    */
    transition: all 0.3s;
    /*所有的属性变化持续0.3s，形成动画效果*/

}
/*磨砂效果*/ /*强制*/
#aside-content .card-widget, /* aside-content 是侧边栏的大类（仅一个） 而.card.wdget则是小卡片，可以有多个*/
#recent-posts > .recent-post-item, /*定位recent-post-item*/
.layout_page >div:first-child:not(.recent-posts),
.layout_post > #post,/* 定位具体文章的正文的volume*/
#page, 
.category-lists, 
.tag-cloud-list, 
.archive-list {
    background: rgba(255 , 255 , 255 , 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important ; /* blur 高斯模糊 saturate 饱和度提升*/
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;/* -webkit时浏览器的前缀，为了兼容safari */
    border-radius: 12px !important;
    border: 2px solid rgba(255 , 255 , 255 , 0.3) !important;
    /* border 格式： border: [width] [snytax] [color(即rgba(,,,))] solid样式表示实线 */
    box-shadow: 0 8px 20px 0 rgba(31 , 38 , 135 , 0.07) !important;
}
#post,
.layout_post > #post,
#article-container {
    background: rgba(255 , 255 , 255 , 0.7) !important;
    backdrop-filter: blur(10px) saturate(180%) !important ; /* blur 高斯模糊 saturate 饱和度提升*/
    -webkit-backdrop-filter: blur(10px) saturate(180%) !important;/* -webkit时浏览器的前缀，为了兼容safari */
    border-radius: 12px !important;
    border: 2px solid rgba(255 , 255 , 255 , 0.3) !important;
    /* border 格式： border: [width] [snytax] [color(即rgba(,,,))] solid样式表示实线 */
    box-shadow: 0 8px 20px 0 rgba(31 , 38 , 135 , 0.07) !important;
}