.social-links {
    display: flex; /* 让链接在一行内排列 */
    gap: 1rem; /* 设置图标之间的间距 */
}

.social-link {
    display: flex; /* 使用 flexbox 使 SVG 和 sr-only 文本垂直居中 */
    align-items: center;
    justify-content: center;
    width: 2.5rem; /* 设置链接的宽度和高度 */
    height: 2.5rem;
    color: #333; /* 设置默认颜色 */
    text-decoration: none;
    border-radius: 50%; /* 可选：让背景变成圆形 */
    transition: all 0.3s ease; /* 添加平滑的过渡效果 */
}

.social-link:hover {
    color: #007bff; /* 鼠标悬停时的颜色 */
    background-color: #f0f0f0; /* 可选：鼠标悬停时的背景色 */
}

.social-link svg {
    width: 1.5rem; /* 设置 SVG 图标的大小 */
    height: 1.5rem;
    /* 如果你的 SVG 使用了 stroke（描边），可以设置描边宽度 */
    /* stroke-width: 2; */
}

/* 隐藏屏幕阅读器专用文本 */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}











/* 为侧边栏菜单添加基本样式 */
.sidebar-menu {
    list-style: none; /* 移除列表项前的点 */
    padding: 0;
    margin: 0;
}

.sidebar-menu li a {
    display: flex; /* 使用 flexbox 布局 */
    align-items: center; /* 垂直居中对齐 */
    padding: 12px 16px;
    text-decoration: none;

    color: var(--text-color);/* 文字颜色 */
    transition: background-color 0.2s ease-in-out; /* 背景色过渡效果 */
}

.sidebar-menu li a:hover {
    background-color: #f0f0f0; /* 鼠标悬停时的背景色 */
}

/* 为 SVG 图标添加样式 */
.sidebar-menu li a svg {
    margin-right: 10px; /* 图标与文字之间的间距 */
    flex-shrink: 0; /* 防止图标被压缩 */
}




.sidebar-menu li a {
  display: block;
  padding: 12px 16px;
  text-decoration: none;
    color: var(--text-color);/* 文字颜色 */
  display: flex; /* 使用 flex 布局来对齐文字和图标 */
  justify-content: space-between; /* 让文字靠左，图标靠右 */
  align-items: center;
  transition: background-color 0.2s;
}

.sidebar-menu li a:hover {
  background-color: #f0f0f0;
}

/* 新增的样式 */
/* 1. 默认隐藏子菜单 */
.submenu {
  list-style: none;
  padding-left: 25px; /* 子菜单缩进，看起来更清晰 */
  margin: 0;
  max-height: 0; /* 关键：将高度设为0 */
  overflow: hidden; /* 关键：隐藏超出部分 */
  transition: max-height 0.3s ease-in-out; /* 关键：添加高度过渡动画 */
}

/* 2. 当父级 li 添加了 'active' 类时，展开子菜单 */
.menu-item.active .submenu {
  max-height: 300px; /* 设置一个足够大的值以容纳所有子项 */
}

/* 3. 箭头图标的样式 */
.arrow-icon {
  transition: transform 0.3s ease-in-out; /* 关键：添加旋转过渡动画 */
}

/* 4. 当父级 li 添加了 'active' 类时，旋转箭头 */
.menu-item.active .arrow-icon {
  transform: rotate(180deg); /* 旋转180度 */
}



/* 分页按钮容器样式 */
.pagination-container {
 
  justify-content: space-between;
  margin: 20px 0;
}

/* 上一页按钮样式 */
.prev {
  display: inline-block;
 
   color: var(--text-color);
  text-decoration: none;
  transition: background-color 0.3s ease;
    border: 2px solid #4d4343;
    position: relative;
    overflow: auto;
    padding: 8px 16px;
}

.prev:hover {
  background-color: #d0d0d0;
}

/* 下一页按钮样式 */
.next {
  display: inline-block;
 color: var(--text-color);
text-decoration: none;
  transition: background-color 0.3s ease;
     border: 2px solid #4d4343;
    position: relative;
    overflow: auto;
    padding: 8px 16px;
}

.next:hover {
  background-color: #d0d0d0;
}









/* 主页文章样式 */
 .gk-gk-post {
            display: flex;
            width: 100%;
            height: 85px; /* 固定高度 */
            margin-bottom: 10px;
            border-radius: 5px;
            box-shadow: var(--shadow2);
            overflow: hidden;
            background: #fff0;
            background: var(--content-bg66);
            position: relative; /* 为图片定位 */
            flex-direction: row-reverse;
            background: radial-gradient(100% 225% at 100% 0%, #ff4141 0%, #ffffff 100%),linear-gradient(35deg, #003105 0%, #17001F 75%),linear-gradient(55deg, #ffffff 0%, #000000 100%),linear-gradient(314deg, #FFE037 0%, #FFE037 40%, #f8f9f9 40%, #f8f9f9 50%, #f8f9f9 50%, #d70114 70%, #23033C 70%, #23033C 100%),linear-gradient(180deg, #a70080 0%, #FF8FE5 45%, #FBFF64 45%, #ffffff 60%, #4ea8ff 60%, #ecf1ff 80%, #ffffff 80%, #e7e4ca 100%);
            background-blend-mode: screen,overlay,overlay,darken,normal;
            
        }
        
        .gk-gk-post a{
        text-decoration: none;
        color: var(--text-color);
        }
        .gk-gk-post img {
            position: relative; /* 为图片定位 */
            max-width: 100%; /* 根据图片实际大小调整 */
            max-height: 100%; /* 使图片高度与卡片高度一致 */
            object-fit: cover; /* 保持图片比例 */
           -webkit-transform: skew(359deg);
           background: linear-gradient(180deg, transparent, #f0f0f0);
           box-shadow: inset 2px 2px 5px #a3b1c6, inset -5px -5px 15px #ffffff;
           box-shadow: inset 2px 2px 5px #a3b1c6, inset -5px -5px 15px #ffffff;
    text-shadow: 1px 1px 8px #504b4b;
        }
        

        .gk-gk-post-info {
            border-radius: 5px;
           -webkit-transform: skew(328deg);
            padding: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex-grow: 1; /* 使信息部分填充剩余空间 */
           background: linear-gradient(to right, var(--sss1-bg), var(--sss2-bg),var(--sss3-bg));
           box-shadow: -4px -20px 10px #ffffff00, 30px 0px 30px #ffffff;
        }
        

        
        .gk-gk-post-title {
            
            font-size: 16px;
            font-weight: bold;
            margin: 0 0 5px;
            -webkit-transform: skew(1deg);
            

        }
        
        
        .gk-gk-post-date {
            font-size: 12px;
            color: #888;
            margin: 0 0 5px;
        }
        .gk-gk-post-route {
            font-size: 14px;
            margin: 0 0 5px;
        }
      .gk-gk-post-zt {
            -webkit-transform: skew(32deg);
            
        }
        
        
        .gk-gk-post-gkzt {
            width: 85px;
            height: 85px;
            
            background: var(--content-bg2);
            box-shadow: var(--shadow);
            background: radial-gradient(100% 225% at 100% 0%, #ffffff 0%, #000000 100%),linear-gradient(35deg, #003105 0%, #17001F 75%),linear-gradient(55deg, #ffffff 0%, #000000 100%),linear-gradient(314deg, #FFE037 0%, #FFE037 40%, #f8f9f9 40%, #f8f9f9 50%, #f8f9f9 50%, #d70114 70%, #23033C 70%, #23033C 100%),linear-gradient(180deg, #a70080 0%, #FF8FE5 45%, #FBFF64 45%, #ffffff 60%, #4ea8ff 60%, #ecf1ff 80%, #ffffff 80%, #e7e4ca 100%);
    background-blend-mode: screen,overlay,overlay,darken,normal;
        }


             .gk-gk-post-gkzt img {
           -webkit-transform: skew(359deg);
           background: linear-gradient(180deg, transparent, #f0f0f0);
           box-shadow: inset 2px 2px 5px #a3b1c6, inset -5px -5px 15px #ffffff;
           box-shadow: inset 2px 2px 5px #a3b1c6, inset -5px -5px 15px #ffffff;
    text-shadow: 1px 1px 8px #504b4b;
   
        }


.middle-column  {
    max-width: 100%;
    font-size: 19px;
    font-weight: 300;
}


.middle-column img {
    max-width: 100%;
    height: auto;
    transition: all 0.2s;
    transition: background-color 0.3s ease;
    padding: 10px;
}




/* 美化的代码 */
.b, strong {
    margin-bottom: 10px;
    border-bottom: 2px dashed #000;
}


.middle-column h1, .middle-column h2, .middle-column h3, .middle-column h4, .middle-column h5, .middle-column h6 {
    padding-left: 1px;
    margin: 10px 0;
    border-left: 10px solid rgba(0,0,0,.2);
    border-bottom: 0.1rem solid rgba(0,0,0,.2);
}

.middle-column h1:before {
    content: '';
    color: #000000;
    font-family: 'remixicon';
    margin-right: 5px;
    font-weight: bold;
}

.middle-column h2:before {
    content: '';
    color: #000000;
    font-family: 'remixicon';
    margin-right: 5px;
    font-weight: bold;
}

.middle-column h3:before {
    content: '';
    color: #000000;
    font-family: 'remixicon';
    margin-right: 5px;
    font-weight: bold;
}

.middle-column h4:before {
    content: '';
    color: #000000;
    font-family: 'remixicon';
    margin-right: 5px;
    font-weight: bold;
}

.middle-column h5:before {
    content: '';
    color: #000000;
    font-family: 'remixicon';
    margin-right: 5px;
    font-weight: bold;
}

.middle-column h6:before {
    content: '';
    color: #000000;
    font-family: 'remixicon';
    margin-right: 5px;
    font-weight: bold;
}