.book{perspective:2000px;width:100vw;height:100vh;aspect-ratio:4/2.5;position:absolute}.book .page{transform-style:preserve-3d;transform-origin:left;width:50%;height:100%;position:absolute;right:0;background-image:url(/imgs/lore.png);background-size:cover;border-radius:8px}.book .page.flipped{rotate:0 0 180deg}.book .page .page-front,.book .page .page-back{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;backface-visibility:hidden;border-radius:8px}.book .page .page-front.cover,.book .page .page-back.cover{background-image:url(/imgs/svgs/book-cover.svg);background-size:cover;background-color:#120e2e;border:2px solid #45f3ff;font-size:8vh;font-family:letter;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.0666666667) 0px,rgba(255,255,255,.0666666667) 1px,transparent 1px,transparent 12px),repeating-linear-gradient(45deg,rgba(255,255,255,.0666666667) 0px,rgba(255,255,255,.0666666667) 1px,transparent 1px,transparent 12px),repeating-linear-gradient(67.5deg,rgba(255,255,255,.0666666667) 0px,rgba(255,255,255,.0666666667) 1px,transparent 1px,transparent 12px),repeating-linear-gradient(112.5deg,rgba(255,255,255,.0666666667) 0px,rgba(255,255,255,.0666666667) 1px,transparent 1px,transparent 12px)}.book .page .page-back{transform:rotateY(180deg)}.book .page:last-child{rotate:-180deg 0 1 0}@keyframes flip{0%,to{rotate:0}50%{rotate:-180deg 0 1 0}}