@keyframes rotation{0%{transform:rotateY(0)rotateX(0)}25%{transform:rotateY(-45deg)rotateX(-15deg)}50%{transform:rotateY(0)rotateX(0)}75%{transform:rotateY(45deg)rotateX(15deg)}to{transform:rotateY(0)rotateX(0)}}.tag{box-shadow:inset -1px -1px 1px 0 #000, inset 1px 1px 1px 0 var(--frame-color), inset 0 0 10px 0 var(--frame-color)}.book{will-change:transform;transform-style:preserve-3d;backface-visibility:hidden;animation:10s linear infinite rotation;top:50%;left:75%;transform:rotateY(0)}div.face-cover{width:25vw;height:var(--height);transform:translate(-50%)translateY(-50%)translateZ(20px)}div.face-spine{width:40px;height:var(--height);background-color:#000;transform:translate(-50%)translateY(-50%)rotateY(-90deg)translateZ(12.5vw)}div.face-back{width:25vw;height:var(--height);background-color:#000;transform:translate(-50%)translateY(-50%)rotateY(-180deg)translateZ(20px)}div.face-top{width:25vw;height:40px;transform:translateX(-50%) translateY(-50%) rotateX(90deg) translateZ(calc(var(--height) * .5));background:#ffffeb}div.face-side{width:40px;height:var(--height);background:#ffffeb linear-gradient(90deg,#d3d3d3 1px,#0000 1px) 0 0/6px;transform:translate(-50%)translateY(-50%)rotateY(90deg)translateZ(12.5vw)}div.face-bottom{width:25vw;height:40px;transform:translateX(-50%) translateY(-50%) rotateX(-90deg) translateZ(calc(var(--height) * .5));background:#ffffeb}@media screen and (width<64rem){.book{top:30dvh;left:50%}div.face-cover{width:calc(50dvh / var(--aspect-ratio));height:50dvh;transform:translate(-50%)translateY(-50%)translateZ(20px)}div.face-spine{width:40px;height:50dvh;transform:translateX(-50%) translateY(-50%) rotateY(-90deg) translateZ(calc((50dvh / var(--aspect-ratio)) * .5))}div.face-back{width:calc(50dvh / var(--aspect-ratio));height:50dvh;transform:translate(-50%)translateY(-50%)rotateY(-180deg)translateZ(20px)}div.face-top{width:calc(50dvh / var(--aspect-ratio));height:40px;transform:translate(-50%)translateY(-50%)rotateX(90deg)translateZ(25dvh)}div.face-side{width:40px;height:50dvh;transform:translateX(-50%) translateY(-50%) rotateY(90deg) translateZ(calc((50dvh / var(--aspect-ratio)) * .5))}div.face-bottom{width:calc(50dvh / var(--aspect-ratio));height:40px;transform:translate(-50%)translateY(-50%)rotateX(-90deg)translateZ(25dvh)}}