@import url('https://fonts.googleapis.com/css2?family=Kanit&family=Noto+Serif+SC&display=swap');

*{
    margin:0; 
    padding: 0;
    box-sizing: border-box;
}
html,body {
    height: 100vh;
    width: 100vw;
    font-family: "Noto Serif SC", serif;
    background-color: #c7ccca;
}
body {
    /*width: 1280px;
    height: 700px;*/
    width: 106rem;
    height: 58rem;
    background-color: #CCCBC7;
    display: flex;
    justify-content: center;
    align-items: center;
}

#bookcase {
    display: block;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: #CCCBC7;
    flex-direction: column;
    align-items: flex-end;
}

.caserow{
    display: flex;
    width: 100%;
    height: 65%;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 10%;
    margin-left: 30%;
}

.books {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: row;
    align-items: flex-end;
}

.casebottom {
    width: 100%;
    height: 5%;
    background-color: #BEA695;
    box-shadow:  3px 3px 6px #907e71;
}

.tab {
    /*width: 3%;
    height: 60%;*/
    margin-right: 50px;
}

.tabtitle {
    padding: 10px 5px 10px 5px;
    writing-mode: vertical-lr;
    overflow: hidden; /* 防止文字溢出 */
    text-overflow: ellipsis; /* 如果文字溢出，显示省略号 */
    user-select: none;
    letter-spacing: 5px;
    font-size: 25px;
    box-shadow: inset 3px 3px 5px #8b8b8b,
            inset -3px -3px 5px #ffffff;
}

.book {
    display: grid;
    align-items: start;
    justify-content: center;
    width: 2%;
    height: 50%;
    background-color: rgb(223, 223, 223);
    box-shadow: inset -1px -0.5px 0px 0px rgb(48, 48, 48);
    background: linear-gradient(to right, #e8e8e8, #ececec,#e8e8e8);
    transition: transform 0.2s ease-in-out;
    color: #000; /* 设置链接的颜色，可以根据需要调整 */
    text-decoration: none; /* 去除链接的下划线 */
}

.title {
    margin-top: calc(30% * 4);
    writing-mode: vertical-lr; /* 竖排文字，lr表示从左到右排列，rl表示从右到左排列 */
    white-space: nowrap; /* 防止文字换行 */
    overflow: hidden; /* 防止文字溢出 */
    text-overflow: ellipsis; /* 如果文字溢出，显示省略号 */
    user-select: none;
    letter-spacing: 4px;
}

.book:hover{
    transform: translateY(-20px);
    cursor: pointer;
}

.book:active, .book:active::after {
    transform: translate3d(0px,-20px,200px);
}