body {
    font-family: "Roboto", sans-serif;
     background: #f3f3f3;
     margin: 0;
     padding: 0;
 }
 
 /* Search Form */
 .search_form {
     text-align: center;
     padding: 20px;
     margin: 0px 0 10px 0;
     background: #2464ae;
     padding-bottom:40px;
 }
 header {
     padding: 20px;
     background: #2464ae;
     text-align: center;
 }
 .site-header{
     display:flex;justify-content: center;align-items: center;padding-bottom:0;
 }
 .site-header h1{
     color:#ffffff;text-align:left;margin:0;
 }
 @media only screen and (max-width: 767px) {
     .site-header{    flex-direction: column;}
     .site-header h1{text-align:center; font-size:28px;}
 }
 header a{
     display: block;
 }
 header a img{
     max-width: 225px;
     height: auto;
 }
 
 .search_form input[type="text"] {
     width:100%;
     padding: 16px;
     /*border-radius: 6px;*/
     border: none;
     font-size: 16px;
     box-shadow: 0 0px 1px 1px #2464ae4f;
         max-width: 1035px;
 }
 
 .search_form button {
     padding: 10px 26px;
     background: #ffcc00;
     border: none;
     /*border-radius: 6px;*/
     cursor: pointer;
     font-weight: bold;
     letter-spacing: .8px;
     font-size: 17px;  
 }
 
 .search_form form{
     display: flex;
     justify-content: center;
 }
 .search_form button:hover {
     background: #ffaa00;
 }
 
 /* Records Grid */
 .records {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     padding: 30px;
     gap: 20px;
 }
 
 .book_record {
     background: white;
     width: 250px;
     /*border-radius: 10px;*/
     box-shadow: 0 0 4px rgba(0,0,0,0.1);
     overflow: hidden;
     padding: 15px;
     text-align: center;
     transition: transform 0.2s;
     padding-top: 22px;
 }
 
 /* .book_record:hover {
     transform: translateY(-4px);
 } */
 
 .book_record .image img {
     /* width: 100%; */
     height: 280px;
     object-fit: contain;
     /*border-radius: 6px;*/
     transition: transform .8s,opacity .8s;
     position: relative;
     box-shadow: 1px 1px 2px 0 #adaba2;
 }
 
 .book_record .image img:hover {
     transform: perspective(465px) rotateX(0) rotateY(-10deg);
      opacity: .8;
      box-shadow: 2px 1px 2px 0 #52514f;
 }
 
 .book_record .image .imagecover {
     transition: transform .8s,opacity .8s;
     position: relative;
     box-shadow: 1px 1px 2px 0 #adaba2;
 }
 
 .book_record .image .imagecover:hover {
     transform: perspective(465px) rotateX(0) rotateY(-10deg);
      opacity: .8;
      box-shadow: 2px 1px 2px 0 #52514f;
 }
 
 .book_record .title {
     color: #333;
     font-size: 20px;
     margin-top: 22px;
 }
 
 .book_record .title::first-letter {
   text-transform: uppercase;
 }
 
 .book_record .subtitle {
     color: #444;
     font-size: 15px;
     font-style: italic;
     margin: 4px 0;
 }
 
 .book_record .author {
     color: #666;
     font-size: 15px;
     font-style: italic;
 }
 
 .book_record .isbn {
     color: #0073e6;
     font-size: 14px;
     margin-top: 5px;
 }
 
 .no-record {
     text-align: center;
     color: #666;
     margin-top: 40px;
     font-size: 18px;
 }
 
 /* Pagination */
 .pagination {
     text-align: center;
     margin: 30px 0;
 }
 
 .page-btn, .current-page {
     display: inline-block;
     margin: 5px;
     padding: 12px 16px;
     /*border-radius: 5px;*/
     text-decoration: none;
     color: white;
     background-color: #004d99;
     font-weight: bold;
 }
 
 .page-btn:hover {
     background-color: #0073e6;
 }
 
 .current-page {
     background-color: #ffcc00;
     color: #333;
 }
 
 /* Footer */
 footer {
     text-align: center;
     background: #004d99;
     color: white;
     padding: 15px;
     margin-top: 30px;
     font-size: 14px;
 }
 
 .back-to-homepage {
     text-align: center;
     margin-top: 20px;
 }
 .image{
     display: flex;
     justify-content: center;
 }
 .image .imagecover {
     position: relative;
     width: 148px;
     height: 225px;
     min-width: 175px;
     min-height: 250px;
     padding: 15px;
     text-align: center;
     background: #ddd;
     font-size: 1em;
     display: none;
 }
 .image .imagecover .innerBorder {
     border: 2px solid #fff;
     width: 144px;
     height: 245px;
     margin: 0 auto;
     position:relative;
 }
 .image .BookTitle {
     position: absolute;
     top: 50%;
     left: 50%;
     width: 108px;
    /* margin-left: -54px;*/
     /*height: 100px;*/
     /*margin-top: -50px;*/
     color: #333;
     overflow-wrap: break-word;
     transform: translate(-50%, -50%);
     font-size:14px;
 }
 .image .Author {
     color: #666;
     font-style: italic;
     padding: 4px 4px 0;
     font-size: 11px;
 }