body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* 至少占据整个视口高度 */
    margin: 0;
    background-image: url('https://master.2015888.xyz/sq/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.5s ease-in-out;
    font-family: Arial, sans-serif;
}

.container {
    flex: 1; /* 让内容区域占据剩余空间 */
    position: relative; /* 添加此行 */
    display: flex;
    flex-direction: column; /* 根据需要调整为 row */
    align-items: center; /* 根据需要调整 */
    justify-content: center; /* 根据需要调整 */
    padding: 20px; /* 根据需要添加内边距 */
}


.content {
    flex-grow: 1;
    /* 内容区域自适应填充剩余空间 */
}


.content1 {
    position: absolute; /* 现在相对于 .container */
    /* 或者使用 'relative'，具体取决于您的布局需求 */
    top: 10px;
    left: 50%;
    font-size: 36px;
    transform: translateX(-50%);
    text-align: center;
    /* 使文本居中 */
}

h1 {
    color: #FF0000;
    /* 保持您指定的颜色 */
}

.bookmark-container {
    max-width: 1200px;
    /* 最大宽度 */
    padding-top: 300px; /* 距离父元素距离 */
    /* 或者使用 flex/grid 来控制位置 */
    width: 100%;
    /* 自适应宽度 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 每行3列 */
    gap: 45px; /* 跳转水平和垂直间隔 */
    /* 按钮之间的间距,如果需要垂直居中，可以将其放在一个 flex 容器中  */
}

@media (max-width: 480px) {
    .bookmark-container {
        grid-template-columns: repeat(2, 1fr); /* 中等屏幕减少列数 */
    }
}


.button {
    border: 1px solid #ccc;
    /*实心边框 */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* 阴影效果 */
    border-radius: 10px;
    /* 更圆润的边角 */
    text-align: center;
    padding: 7px 12px; /* 减少内边距，水平和垂直方向都调整 */
    min-height: 120px; /* 适当降低按钮高度 */
    min-width: 230px; /* 设置最小宽度为120px，内容较多时会自动变宽 */
    /*min-width: calc((100vw / 3) - 80px); /* 100vw 表示视口宽度，这里以宽度为例，高度等属性也类似*/
    /*根据gap: 30px值得4倍，设置最小宽度为 */
    text-decoration: none;
    color: white;
    font-size: 24px; /* 适当减小字体大小 */
    font-weight: bold;
    position: relative; /* 为图标定位做准备 */
    transition: transform 0.3s; /* 动画过渡 */
}



.button::before {
    content: "";
    /* 伪元素用于添加图标背景 */
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);/* 使图标居中 */
    width: 48px;
    height: 48px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
     /* 如果需要图标在按钮上方，可以调整 top 和 transform */    
     /* top: -10px; /* 根据需要调整 */
     /* transform: translateX(-50%); */    
     /* pointer-events: none; /* 确保图标不影响鼠标事件 */
}

.button:hover {
    transform: translateY(-3px) scale(1.05);
    /* 悬停时的3D抬起效果 */
    box-shadow: 0 7px 10px rgba(0, 0, 0, 0.2);
    /* 增强阴影 */
}

/* 为每个按钮添加颜色 */
.button1 {
    background-color: #DA70D6;
}

.button2 {
    background-color: #FF6A6A;
}

.button3 {
    background-color: #4caf50;
}

.button4 {
    background-color: #2196f3;
}

.button5 {
    background-color: #006400;
}

.button6 {
    background-color: #008B8B;
}

.button7 {
    background-color: #9370DB;
}

.button8 {
    background-color: #8B0000;
}

.button9 {
    background-color: #9c27b0;
}

.button10 {
    background-color: #2F4F4F;
}

.button11 {
    background-color: #00BFFF;
}

.button12 {
    background-color: #32CD32;
}

.button13 {
    background-color: #40E0D0;
}

.button14 {
    background-color: #4682B4;
}

.button15 {
    background-color: #FF7F50;
}

.button16 {
    background-color: #009999;
}

.button17 {
    background-color: #FF1493;
}

.button18 {
    background-color: #FF0000;
}

.button19 {
    background-color: #cc3399;
}

.button20 {
    background-color: #66CDAA;
}

.button21 {
    background-color: #4169E1;
}

/* 为每个按钮添加图标*/

.button1::before {
    background-image: url('https://master.2015888.xyz/sq/01.png');
}

.button2::before {
    background-image: url('https://master.2015888.xyz/sq/01.png');
}

.button3::before {
    background-image: url('https://master.2015888.xyz/sq/02.svg');
}

.button4::before {
    background-image: url('https://master.2015888.xyz/sq/03.svg');
}

.button5::before {
    background-image: url('https://master.2015888.xyz/sq/04.png');
}

.button6::before {
    background-image: url('https://master.2015888.xyz/sq/04.png');
}

.button7::before {
    background-image: url('https://master.2015888.xyz/sq/05.svg');
}

.button8::before {
    background-image: url('https://master.2015888.xyz/sq/06.png');
}

.button9::before {
    background-image: url('https://master.2015888.xyz/sq/07.svg');
}

.button10::before {
    background-image: url('https://master.2015888.xyz/sq/08.svg');
}

.button11::before {
    background-image: url('https://master.2015888.xyz/sq/09.png');
}

.button12::before {
    background-image: url('https://master.2015888.xyz/sq/04.png');
}

.button13::before {
    background-image: url('https://master.2015888.xyz/sq/10.svg');
}

.button14::before {
    background-image: url('https://master.2015888.xyz/sq/11.svg');
}

.button15::before {
    background-image: url('https://master.2015888.xyz/sq/12.png');
}

.button16::before {
    background-image: url('https://master.2015888.xyz/sq/13.png');
}

.button17::before {
    background-image: url('https://master.2015888.xyz/sq/14.svg');
}

.button18::before {
    background-image: url('https://master.2015888.xyz/sq/15.png');
}

.button19::before {
    background-image: url('https://master.2015888.xyz/sq/29.svg');
}

.button20::before {
    background-image: url('https://master.2015888.xyz/sq/10.svg');
}

.button21::before {
    background-image: url('https://master.2015888.xyz/sq/17.png');
}