body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
}

.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around; /* 宫格之间的水平间距 */
    padding: 10px;
}

.grid-item {
    flex: 0 0 calc(50% - 20px); /* 宽度为容器宽度的一半减去间距，以适应手机屏幕 */
    max-width: 200px; /* 设置最大宽度以适应不同屏幕 */
    margin: 10px;
    text-align: center; /* 文本居中 */
    border: 1px solid #ddd; /* 可选：添加边框 */
    border-radius: 5px; /* 可选：添加圆角 */
    overflow: hidden; /* 防止内容溢出 */
}

.category-image {
    width: 80px;
    height: 80px;
    object-fit: cover; /* 保持图片比例并填充整个区域 */
    margin: 0 auto 10px; /* 上下间距和水平居中 */
}

.category-name {
    margin: 0;
    padding: 5px;
    color: #333;
}

/* 可选：添加媒体查询以适应不同屏幕大小 */
@media screen and (max-width: 600px) {
    .grid-item {
        flex: 0 0 calc(100% - 20px); /* 在小屏幕上每个宫格占满一行 */
    }
}


/* 确保链接没有下划线 */
.grid-item-link {
    text-decoration: none;
    color: inherit; /* 继承父元素的颜色，或者指定一个颜色 */
}

/* 当链接被点击时，不显示默认的轮廓 */
.grid-item-link:focus {
    outline: none;
}

/* 当链接被访问过时，不显示特殊的颜色 */
.grid-item-link:visited {
    color: inherit; /* 继承父元素的颜色，或者指定一个颜色 */
}

/* 可以添加过渡效果，使链接在鼠标悬停时更有趣 */
.grid-item-link:hover {
    /* 例如，改变背景色或阴影 */
    background-color: #f5f5f5; /* 浅灰色背景 */
    transition: background-color 0.3s ease; /* 平滑的过渡效果 */
}

/* 如果需要，你还可以为活动状态的链接添加样式 */
.grid-item-link:active {
    /* 例如，改变边框或颜色 */
    border-color: #ddd;
}


footer{
    margin-top: 150px;
    width: 100%;
    display: flex;
    justify-content: center; /* 水平居中 */
    -webkit-justify-content: center;
}


.wedox-centered-ad {
    margin-top: 40px;
    display: flex;
    justify-content: center; /* 水平居中 */
    -webkit-justify-content: center;
    height: 50px;          /* 如果希望按钮在页面中央，可以设置父容器高度为视口高度 */
    text-align: center;     /* 备用，确保文本也居中 */
}

.wedox-ad-button {
    display: inline-block;
    padding: 0px 20px;     /* 内边距，使按钮看起来更饱满 */
    color: #fff;           /* 文本颜色 */
    background-color: #007BFF; /* 按钮背景颜色 */
    text-decoration: none; /* 去掉链接下划线 */
    border-radius: 5px;    /* 圆角边框 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: background-color 0.3s ease; /* 背景颜色过渡效果 */
    width: 200px;          /* 固定宽度 */
    height: auto;          /* 高度自适应 */
    text-align: center;    /* 按钮内文本居中 */
    line-height: 50px;      /* 行高，使文本垂直居中 */
}

.wedox-ad-button:hover {
    background-color: #0056b3; /* 鼠标悬停时改变背景颜色 */
}