body{background-color:#666}#inputform{display:flex;flex-direction:column;width:50%;gap:12px}#inputform input,#inputform button{padding:12px 16px;border:1px solid #eaeaed;border-radius:8px;font-size:14px;font-family:inherit;background-color:#f6f6f6;color:#333;transition:all .3s}#inputform input:focus{outline:none;border-color:#4b5269;background-color:#fff;box-shadow:0 2px 10px #ff17cd33}#inputform button{background-color:#8b8b8b;color:#fff;border:none;font-weight:700;cursor:pointer}#inputform button:hover{background-color:#4b4b4b;transform:translateY(-2px);box-shadow:0 4px 12px #ff17cd33;color:#ff17cd}#inputform button:active{transform:translateY(0)}#inputwrapper,#sort-filter{display:flex;justify-content:center;margin:1%}.book{display:inline-flex;flex-direction:column;margin:1%;padding:1%;max-width:200px;max-height:300px}#books{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}.favoritebtn{background:none;border:none;position:absolute;top:12px;right:12px;font-size:24px;cursor:pointer;z-index:10}.favoritebtn:hover{transform:scale(1.2)}.favoritebtn:active{transform:scale(.95)}.delButton{position:absolute;bottom:12px;right:12px;padding:8px 12px;background-color:#ff6b6b;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:12px;z-index:10;transition:background-color .3s}.delButton:hover{background-color:#ff5252}.delButton:active{transform:scale(.95)}.delButton:hover{cursor:pointer}.bookPerspective{perspective:500px}.bookThreeD{transform-style:preserve-3d;transform-origin:center}.bookThreeD:before{background-image:linear-gradient(90deg,#fff 40%,#f6f6f6 0,#f6f6f6 50%,#fff 0,#fff 90%,#f6f6f6 0,#f6f6f6);background-size:3px 3px;transform:translateY(0) translate(0) translateZ(0) rotateY(-90deg);transform-origin:right;width:var(--book-height, 30px)}.bookThreeD:after{background-image:linear-gradient(0deg,#f6f6f6 40%,#eaeaed 0,#eaeaed 50%,#f6f6f6 0,#f6f6f6 90%,#eaeaed 0,#eaeaed);background-size:4px 4px;transform:translateY(0) translate(0) translateZ(0) rotateX(-90deg);transform-origin:top;height:var(--book-height, 30px)}.bookPerspectiveContainer:hover .bookThreeD{transform:rotateX(80deg) rotate(45deg) scale(.75)}.bookPerspectiveContainer:hover .bookMetaText{opacity:100;transform:translateY(0)}.bookPerspectiveContainerStyles{display:block;cursor:grab;border-radius:16px;background-color:#f6f6f6;border:1px solid #eaeaed;padding:48px;transition:background-color .5s;width:25%;min-height:400px;position:relative;min-width:250px}.bookPerspectiveContainerStyles:hover{background-color:#bebebe;transform:scale(.99);box-shadow:10px 10px 20px #ff17cd7d}.bookPerspectiveStyles{display:flex;height:100%;justify-content:center;align-items:center;gap:0;margin:0}.bookThreeDStyles{margin:25px;position:relative;transition:transform .5s ease-in-out;flex:auto 0;width:100%;max-width:180px;height:250px}.bookThreeDStyles:after{display:block;content:"";background-color:#f6f6f6;width:calc(100% + .5px);position:absolute;left:0;border-radius:8px 0 0 8px;border-color:#333;border-bottom:3px solid;border-top:3px solid;border-left:4px solid;border-right:0}.bookThreeDStyles:before{display:block;content:"";background-color:#fff;height:calc(100% + .5px);position:absolute;right:0;top:0;border-color:#333;border-left:3px solid;border-right:3px solid;border-top:3px solid #eaeaed;border-bottom:0}.bookMetaTextStyles{text-align:left;position:absolute;top:-24px;left:-24px;right:-24px;opacity:0;transform:translateY(-16px);transition:all .5s ease-in-out;margin:0}.bookMetaTextStylesTitle{font-size:18px!important;font-weight:700;line-height:1.2em;margin:0!important}.bookMetaTextStylesAuthor{font-size:16px;color:#666!important;margin:4px 0 0!important}.bookPerspectiveContainer:hover .bookImage{border-radius:6px 0 0 6px}.bookImage{width:100%;height:100%;display:block;object-fit:cover;border-radius:3px 0 0 3px;transition:border-radius .3s ease-in-out}