html{font-family:sans-serif;background-color:wheat}: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)}.bookcase{display:flex;flex-direction:column;justify-content:center;align-items:center;max-width:650px;margin-left:auto;margin-right:auto;padding:20px;border:5px solid #000;background-color:#deb887}.bookshelf{width:100%;padding-top:32px;justify-content:center;align-items:center;display:flex;flex-wrap:wrap;background-color:#000}.bookcase>h2{display:flex;justify-content:center;align-items:center;text-align:center;width:200px;height:40px;position:relative;background:#fff}.bookcase>h2:after{content:"";position:absolute;left:0;bottom:0;width:0;height:0;border-left:20px solid #deb887;border-top:20px solid transparent;border-bottom:20px solid transparent}.bookcase>h2:before{content:"";position:absolute;right:0;bottom:0;width:0;height:0;border-right:20px solid #deb887;border-top:20px solid transparent;border-bottom:20px solid transparent}.book{width:50px;height:280px;position:relative;margin-left:1px;transform-style:preserve-3d;transform:translateZ(0) rotateY(0);transition:transform 1s}.book .side{position:absolute;border:2px solid #000;border-radius:3px;font-weight:700;color:#000;text-align:center;transform-origin:center left}.spine{position:relative;width:50px;height:280px;background-image:var(--tartan);background-color:#8b4513;transform:rotateY(0) translateZ(0)}.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:#daa520;bottom:0;left:20%}.book .top{width:50px;height:190px;top:-2px;background-image:linear-gradient(90deg,#fff 90%,gray 10%);background-size:5px 5px;transform:rotateX(90deg) translateZ(95px) translateY(-95px)}.cover{width:190px;height:280px;top:0;background-image:url("https://picsum.photos/190/280");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)}