.shelves{display:flex;flex-direction:column;gap:1.5rem}.section-title,.shelf-title{text-align:center}.section-title{border-bottom:2px dotted #ff0;width:auto;margin-bottom:1rem}.shelf{align-items:stretch;display:flex;flex-wrap:wrap;justify-content:space-around;row-gap:1rem}.shelf-description{text-align:center}.item-container{align-items:center;display:flex;flex-direction:column;justify-content:center;max-width:min-content}.item-title{font-size:.95rem;padding:0 .25rem}.item-subtitle,.item-title{align-items:center;display:flex;text-align:center}.item-subtitle{font-size:.85rem}.book-container{display:flex;align-items:center;justify-content:center;perspective:600px;padding:.75rem}.book-container:focus,.book-container:hover{background-color:rgba(0,0,0,0)}.book{position:relative;transform-style:preserve-3d;transform:rotateY(0deg);transition:1s ease}.book,.book>.cover-text{width:150px;height:225px}.book>.cover-text{position:absolute;background:var(--cover-color);transform:translateZ(calc(var(--thickness) / 2 * 1px));border-radius:0 2px 2px 0;text-shadow:-1px -1px 5px #000,1px -1px 5px #000,-1px 1px 5px #000,1px 1px 5px #000;text-align:center;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:200;padding:.25rem;overflow:hidden;line-height:1.5rem;color:#fff}.book>.cover-text:hover{color:#fff}.book>img{top:0;width:150px;height:225px;transform:translateZ(calc(var(--thickness) / 2 * 1px));border-radius:0 2px 2px 0;box-shadow:5px 5px 20px rgba(0,0,0,.5)}.book:before,.book>img{position:absolute;left:0}.book:before{content:" ";top:calc(var(--pages-offset)*1px);width:calc(var(--thickness)*1px - 2px);height:calc(225px - 2*var(--pages-offset)*1px);transform:translateX(calc((150 - var(--thickness) / 2 - var(--pages-offset)) * 1px)) rotateY(90deg);background:linear-gradient(90deg,#fff,#f9f9f9 5%,#fff 10%,#f9f9f9 15%,#fff 20%,#f9f9f9 25%,#fff 30%,#f9f9f9 35%,#fff 40%,#f9f9f9 45%,#fff 50%,#f9f9f9 55%,#fff 60%,#f9f9f9 65%,#fff 70%,#f9f9f9 75%,#fff 80%,#f9f9f9 85%,#fff 90%,#f9f9f9 95%,#fff)}.book:after{position:absolute;top:0;left:0;content:" ";width:150px;height:225px;transform:translateZ(calc(var(--thickness) / 2 * -1px));background:var(--cover-color);border-radius:0 2px 2px 0;box-shadow:-10px 0 50px 10px rgba(0,0,0,.5)}.book:hover{transform:rotateY(-30deg)}.dvd{position:relative;transform-style:preserve-3d;transform:rotateY(0deg);transition:1s ease}.dvd,.dvd>.cover-text{width:169px;height:225px}.dvd>.cover-text{position:absolute;background:var(--cover-color);transform:translateZ(5px);border-radius:0 10px 10px 0;text-shadow:-1px -1px 5px #000,1px -1px 5px #000,-1px 1px 5px #000,1px 1px 5px #000;text-align:center;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:200;padding:.25rem;overflow:hidden;line-height:1.5rem;color:#fff}.dvd>.cover-text:hover{color:#fff}.dvd>img{top:0;width:169px;height:225px;transform:translateZ(5px);border-radius:0 10px 10px 0;box-shadow:5px 5px 20px rgba(0,0,0,.5)}.dvd:before,.dvd>img{position:absolute;left:0}.dvd:before{content:" ";top:5px;width:8px;height:215px;transform:translateX(159px) rotateY(90deg);background:linear-gradient(90deg,#fff,#f9f9f9 5%,#fff 10%,#f9f9f9 15%,#fff 20%,#f9f9f9 25%,#fff 30%,#f9f9f9 35%,#fff 40%,#f9f9f9 45%,#fff 50%,#f9f9f9 55%,#fff 60%,#f9f9f9 65%,#fff 70%,#f9f9f9 75%,#fff 80%,#f9f9f9 85%,#fff 90%,#f9f9f9 95%,#fff)}.dvd:after{position:absolute;top:0;left:0;content:" ";width:169px;height:225px;transform:translateZ(-5px);background:var(--cover-color);border-radius:0 10px 10px 0;box-shadow:-10px 0 50px 10px rgba(0,0,0,.5)}.dvd:hover{transform:rotateY(-30deg)}.dvd:after,.dvd>:first-child{border-radius:10px}.vhs{position:relative;transform-style:preserve-3d;transform:rotateY(0deg);transition:1s ease}.vhs,.vhs>.cover-text{width:150px;height:225px}.vhs>.cover-text{position:absolute;background:var(--cover-color);transform:translateZ(25px);border-radius:0 0 0 0;text-shadow:-1px -1px 5px #000,1px -1px 5px #000,-1px 1px 5px #000,1px 1px 5px #000;text-align:center;display:flex;align-items:center;justify-content:center;font-size:1.25rem;font-weight:200;padding:.25rem;overflow:hidden;line-height:1.5rem;color:#fff}.vhs>.cover-text:hover{color:#fff}.vhs>img{width:150px;transform:translateZ(25px);border-radius:0 0 0 0;box-shadow:5px 5px 20px rgba(0,0,0,.5)}.vhs:before,.vhs>img{position:absolute;top:0;left:0;height:225px}.vhs:before{content:" ";width:48px;transform:translateX(125px) rotateY(90deg);background:linear-gradient(90deg,#fff,#f9f9f9 5%,#fff 10%,#f9f9f9 15%,#fff 20%,#f9f9f9 25%,#fff 30%,#f9f9f9 35%,#fff 40%,#f9f9f9 45%,#fff 50%,#f9f9f9 55%,#fff 60%,#f9f9f9 65%,#fff 70%,#f9f9f9 75%,#fff 80%,#f9f9f9 85%,#fff 90%,#f9f9f9 95%,#fff)}.vhs:after{position:absolute;top:0;left:0;content:" ";width:150px;height:225px;transform:translateZ(-25px);background:var(--cover-color);border-radius:0 0 0 0;box-shadow:-10px 0 50px 10px rgba(0,0,0,.5)}.vhs:hover{transform:rotateY(-30deg)}.vhs:before{background:radial-gradient(circle at bottom,rgb(35,35,35) 0,rgb(35,35,35) 7%,black 8%,transparent 8%,transparent 100%),var(--cover-color)}