:root{font-family:Roboto,Helvetica,Arial,sans-serif}html{overflow-y:scroll}body{margin:0;padding:0}main{padding:1rem}.image-full div{max-width:800px;height:100%}.image-full img{border:1px solid #ccc}.image-full img,.image-full-width{width:100%;height:100%}@media (min-width:1300px){.image-full{display:flex;justify-content:center;width:100%}}input{font-size:1rem;padding:.5rem;border:1px solid #ccc;box-sizing:border-box}a{color:#0070f3;text-decoration:none}nav{background-color:#333;padding:10px}nav,nav ul{display:flex;justify-content:space-between}nav ul{list-style-type:none;margin:0;padding:0;align-items:center}nav ul li{margin-right:20px}nav ul li a{color:white;text-decoration:none;font-weight:700}nav ul li a:hover{text-decoration:underline}.login-container{align-items:center;justify-content:center}.login-container,.login-form{display:flex;flex-direction:column}.login-form{width:300px;padding:20px;border:1px solid #ccc;background-color:#fff}.login-label{margin-bottom:15px;font-size:16px;color:#333}.login-input{width:100%;padding:10px;margin-top:5px;border:1px solid #ccc}.login-button{padding:10px;border:none;background-color:#333;color:#fff;font-size:16px;cursor:pointer}.login-button:hover{background-color:#000}.login-error{color:red;margin-top:10px;text-align:center}.books-available{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));grid-gap:10px;gap:10px}.book-cell{display:flex;flex-direction:column;border:1px solid #ccc;padding:5px;justify-content:center;align-items:center;font-size:small}.page-heading{text-align:left}.search-results{margin-top:.5rem}.page-navigation{float:right;margin-bottom:.5rem}.page-navigation .page-number{margin:0 .5rem}.flex{display:flex;justify-content:space-between}