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