body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
}
.navbar {
   background-color: rgb(245, 243, 243);
   overflow: hidden;
   top: 0;
   width: 100%;
}
.navbar a {
   float: left;
   display: block;
   color: rgb(0, 0, 0);
   text-align: center;
   padding: 14px 16px;
   text-decoration: none;
}
.navbar a:hover {
   background-color: #ddd;
   color: rgb(41, 77, 238);
}
h1 {
   text-align: center;
}
.filterButtons {
   text-align: center;
   margin: 20px 0;
   font-size: 60px;
}
.filterButton {
   padding: 5px 10px;
   margin: 5px;
   cursor: pointer;
   border: none;
   background-color: #007BFF;
   color: white;
}
.bookshelf {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
}
.filterButton.selected {  
   background-color: #4CAF50; /* 或者您希望的任何颜色 */  
   color: white; /* 根据底色调整文字颜色以保证可读性 */  
}
.book {
   width: 200px;
   margin: 10px;
   padding: 10px;
   border: 1px solid #ccc;
   text-align: center;
}
.book img {
   width: 100%;
   max-width: 150px;
   height: auto;
}
.book-title, .book-author {
   margin-top: 5px;
}
  /* 新增的媒体查询 */  
@media screen and (max-width: 600px) {
   .navbar a {
       float: none;
       display: block;
       text-align: left;
   }
   .bookshelf {
       flex-direction: column;
       align-items: center;
   }
   .book {
       width: 90%;
   }
}

@media screen and (max-width: 1200px) {  
            /* 当屏幕宽度小于1200px时，调整导航栏和搜索框的样式 */  
            .navbar {  
                flex-direction: column;  
            }  
            .navbar a, .navbar form {  
                width: 100%;
                text-align: center;  
                float: none;
                font-size: 60px;
            }  
           .navbar form input[type="text"] {  
                width: 50%;
                height: 100px;/* 或者使用 calc(100% - 20px) 等方式调整宽度 */  
                margin: 0 auto; /* 居中显示 */  
                display: block;
                font-size: 60px;
            }  
            .navbar form input[type="submit"] {  
                width: 50%;
                height: 100px;/* 提交按钮占满全屏 */  
                margin-top: 10px;
                font-size: 60px;/* 与搜索框保持一定距离 */  
            }  
            /* 修改按钮 */
            .filterButton {
                 padding: 10px 20px;
                 margin: 5px;
                 cursor: pointer;
                 border: none;
                 background-color: #007BFF;
                 color: white;
                 font-size: 28px; 
            }
        }  

        @media screen and (max-width: 768px) {  
            /* 当屏幕宽度小于768px时，调整导航栏和搜索框的样式 */  
            .navbar {  
                flex-direction: column;  
            }  
            .navbar a, .navbar form {  
                width: 100%;  
                text-align: center;  
                float: none;  
            }  
            .navbar form input[type="text"] {  
                width: 80%; /* 或者使用 calc(100% - 20px) 等方式调整宽度 */  
                margin: 0 auto; /* 居中显示 */  
                display: block;  
            }  
            .navbar form input[type="submit"] {  
                width: 100%; /* 提交按钮占满全屏 */  
                margin-top: 10px; /* 与搜索框保持一定距离 */  
            }  
        }  
  
        @media screen and (max-width: 480px) {  
            /* 当屏幕宽度小于480px时，进一步调整样式以适应更小的屏幕 */  
            .filterButton {  
                width: 100%; /* 按钮占满全屏 */  
                margin-bottom: 5px; /* 按钮之间保持一定距离 */  
            }  
            .bookshelf {  
                justify-content: center; /* 在更小的屏幕上居中显示书籍 */  
            }  
        }  

.enlarged {  
transform: scale(3); /* 放大到三倍 */  
transition: transform 0.3s ease-in-out; /* 平滑过渡效果 */  
position: fixed; /* 固定定位，使图片始终位于屏幕中心 */  
top: 50%;  
left: 50%;  
transform: translate(-50%, -50%) scale(3); /* 居中并放大 */  
z-index: 9999; /* 确保图片在最上层 */  
}


 .search-box {  
            width: 200px;  
            height: 28px;  
            padding: 5px;  
            font-size: 16px;  
          
        } 
        .search-input{
            width: 80px;
            height: 40px;
            padding: auto;
            font-size: 16px;
        }