body {  
    margin: 0; /* 消除浏览器默认边距 */  
    padding: 0; /* 消除内边距 */  
    height: 100vh; /* 设置高度为视口高度的100% */  
    background: linear-gradient(to top, #230023, #6c006c); /* 背景渐变 */  
    background-attachment: fixed; 
    display: flex; /* 使用Flexbox布局 */  
    flex-direction: column; /* 设置子元素垂直堆叠 */ 
    justify-content: center; /* 水平居中 */  
    align-items: center; /* 垂直居中 */  
    text-align: center; /* 文本居中 */  
    }
.book-container {  
    display: flex ;  
    flex-wrap: wrap ;  
    justify-content: center; /* 控制子元素在主轴上的对齐方式 */  
    overflow-y: auto; /* 当内容超出时显示滚动条 */  
    position: relative;
} 

.text{
    font-size: 16px;
    text-align: center;
    color: #d500d5;
}

.custom-box {  
    border: 1px solid #d500d5;  
    border-radius: 10px;  
    padding: 20px;  
    margin-bottom: 20px;  
    display: flex;
}  
.custom-box img {  
    max-height: 280px; /* 调整图片大小 */  
    margin-right: 20px; /* 图片与竖线之间的间距 */  
}  
.custom-box hr {  
    border: none;  
    height: 280px;  
    color: #d500d5; /* 竖线颜色 */  
    background-color: #d500d5;  
    margin: 0;  
    width: 2px;  
    float: left;  
    margin-right: 20px; /* 竖线与文字之间的间距 */  
}
.title{
    font-size: 18px;
    text-align: center;
    color: #ffffff;
}  
.subtitle{
    font-size: 12px;
    text-align: center;
    color: #ffffff;
}
.describtion-box{
    padding: 3px;  
    margin-bottom: 5px;  
    display: flex;
    flex-direction: column;


}
.describtion-box hr{
    border: none;  
    height: 2px;  
    color: #d500d5; /* 横线颜色 */  
    background-color: #d500d5;  
    margin: 0;  
    width: 100%;  
    float: left;  
    margin-top: 5px;
}
.tag{
    font-size: 16px;
    text-align: left;
    color: #ffffff;
    margin-top: 30px;
}
.links{
    margin-bottom: auto;
    display: flex;
    justify-content: center;
}
.links a{
    font-size: 10px;
    text-align: left;
    color: #ffffff;
    margin-top: 30px;
}