:root{--argyle:repeating-linear-gradient(120deg,rgba(255,255,255,0.1),rgba(255,255,255,0.1) 1px,transparent 1px,transparent 60px),repeating-linear-gradient(60deg,rgba(255,255,255,0.1),rgba(255,255,255,0.1) 1px,transparent 1px,transparent 60px),linear-gradient(60deg,rgba(0,0,0,0.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0.1)),linear-gradient(120deg,rgba(0,0,0,0.1) 25%,transparent 25%,transparent 75%,rgba(0,0,0,0.1) 75%,rgba(0,0,0,0.1));background-size:70px 120px;--tartan:repeating-linear-gradient(transparent,transparent 50px,rgba(0,0,0,0.4) 50px,rgba(0,0,0,0.4) 53px,transparent 53px,transparent 63px,rgba(0,0,0,0.4) 63px,rgba(0,0,0,0.4) 66px,transparent 66px,transparent 116px,rgba(0,0,0,0.5) 116px,rgba(0,0,0,0.5) 166px,rgba(255,255,255,0.2) 166px,rgba(255,255,255,0.2) 169px,rgba(0,0,0,0.5) 169px,rgba(0,0,0,0.5) 179px,rgba(255,255,255,0.2) 179px,rgba(255,255,255,0.2) 182px,rgba(0,0,0,0.5) 182px,rgba(0,0,0,0.5) 232px,transparent 232px),repeating-linear-gradient(270deg,transparent,transparent 50px,rgba(0,0,0,0.4) 50px,rgba(0,0,0,0.4) 53px,transparent 53px,transparent 63px,rgba(0,0,0,0.4) 63px,rgba(0,0,0,0.4) 66px,transparent 66px,transparent 116px,rgba(0,0,0,0.5) 116px,rgba(0,0,0,0.5) 166px,rgba(255,255,255,0.2) 166px,rgba(255,255,255,0.2) 169px,rgba(0,0,0,0.5) 169px,rgba(0,0,0,0.5) 179px,rgba(255,255,255,0.2) 179px,rgba(255,255,255,0.2) 182px,rgba(0,0,0,0.5) 182px,rgba(0,0,0,0.5) 232px,transparent 232px),repeating-linear-gradient(125deg,transparent,transparent 2px,rgba(0,0,0,0.2) 2px,rgba(0,0,0,0.2) 3px,transparent 3px,transparent 5px,rgba(0,0,0,0.2) 5px)}.bookshelf{width:100%;margin-top:32px;display:flex;flex-wrap:wrap}.book{width:50px;height:280px;position:relative;margin-left:1px;transform-style:preserve-3d;transform:translateZ(0) rotateY(0);transition:transform 1s}.side{position:absolute;border:2px solid black;border-radius:3px;font-weight:bold;color:black;text-align:center;transform-origin:center left}.spine{position:relative;width:50px;height:280px;background-image:var(--tartan);transform:rotateY(0deg) translateZ(0px)}.spine-title{margin:2px;position:absolute;top:0;left:0;font-size:12px;color:gold;writing-mode:vertical-rl;text-orientation:mixed}.spine-author{position:absolute;color:goldenrod;bottom:0;left:20%}.top{width:50px;height:190px;top:-2px;background-image:linear-gradient(90deg,white 90%,gray 10%);background-size:5px 5px;transform:rotateX(90deg) translateZ(95px) translateY(-95px)}.cover{width:190px;height:280px;top:0;background-image:url("//repo.bfw.wiki/bfwrepo/image/5e9cee0993c79.png");background-size:contain;background-repeat:round;left:50px;transform:rotateY(90deg) translateZ(0);transition:transform 1s}.book:hover{z-index:1;transform:rotateX(-25deg) rotateY(-40deg) rotateZ(-15deg) translateY(50px) translateX(-30px)}