:root{--dark-color: gray;--subtle-color: rgb(208, 213, 213);--main-color: rgb(249, 255, 255)}.book img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:right top;object-position:right top}button:hover{cursor:pointer}.book{position:relative;width:150px;height:222px;transform-style:preserve-3d}.book-shadow{position:absolute;bottom:0;width:160px;box-shadow:0 8px 16px 8px var(--dark-color);transform:rotateY(-10deg)}[dir=rtl] .book-shadow{transform:rotateY(10deg)}.book>div{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:left;transition:transform 2s}[dir=rtl] .book>div{transform-origin:right}.book-cover{transform:scaleY(1.05) rotateY(-10deg);border:1px solid var(--dark-color)}[dir=rtl] .book-cover{transform:scaleY(1.05) rotateY(10deg)}.book-cover-end{transform:translate(10px) rotateY(-10deg);border:1px solid var(--dark-color)}[dir=rtl] .book-cover-end{transform:translate(-10px) rotateY(10deg)}.book-back{height:222px;width:10px;background-color:var(--subtle-color)}.book-page{background:linear-gradient(to right,var(--subtle-color),20%,var(--main-color));border:1px solid var(--subtle-color)}[dir=rtl] .book-page{background:linear-gradient(to left,var(--subtle-color),20%,var(--main-color))}.book-page.first{transform:translate(2px) rotateY(-10deg)}[dir=rtl] .book-page.first{transform:translate(-2px) rotateY(10deg)}.book-page.second{transform:translate(4px) rotateY(-10deg)}[dir=rtl] .book-page.second{transform:translate(-4px) rotateY(10deg)}.book-page.third{transform:translate(6px) rotateY(-10deg)}[dir=rtl] .book-page.third{transform:translate(-6px) rotateY(10deg)}.book-page.last{transform:translate(8px) rotateY(-10deg)}[dir=rtl] .book-page.last{transform:translate(-8px) rotateY(10deg)}.book:hover .book-cover{transform:rotateY(-150deg)}[dir=rtl] .book:hover .book-cover{transform:rotateY(150deg)}.book:hover .book-page.first{transform:translate(2px) rotateY(-150deg)}[dir=rtl] .book:hover .book-page.first{transform:translate(-2px) rotateY(150deg)}.book:hover .book-page.second{transform:translate(4px) rotateY(-130deg)}[dir=rtl] .book:hover .book-page.second{transform:translate(-4px) rotateY(130deg)}.book:hover .book-page.third{transform:translate(6px) rotateY(-110deg)}[dir=rtl] .book:hover .book-page.third{transform:translate(-6px) rotateY(110deg)}