#book{perspective:75vw;width:50vw;height:70vh}#book:before{content:"";width:1%;height:100%;position:absolute;top:0;left:49%}.page{transform-origin:0%;z-index:5;cursor:pointer;text-align:center;background:radial-gradient(circle at 0 100%,#777,#ddd 70%);width:50%;height:100%;font-family:monospace;line-height:50vh;transition:z-index 10ms linear 1s,transform 2s linear;position:absolute;top:0;left:50%}.front,.back{text-align:center;opacity:0;width:100%;height:100%;font-family:monospace;line-height:50vh;transition:opacity .1s linear 1s;position:absolute;top:0;left:0}.front{opacity:1}.back{transform:scaleX(-1)}input{visibility:hidden}label{z-index:99;width:100%;height:100%;margin:0;padding:0;position:absolute;top:0;left:0}input:checked+.page{transform:rotateY(-180deg)}input:checked+.page .front{opacity:0}input:checked+.page .back{opacity:1}#five:checked+.page{z-index:5}#four:checked+.page{z-index:4}#three:checked+.page{z-index:3}#two:checked+.page{z-index:2}#one:checked+.page{z-index:1}#page1 .front{letter-spacing:2vh;text-align:right;color:#f0f;background:radial-gradient(circle at 70%,#000 50%,#222 40%);font-size:2vh;font-weight:900;line-height:50vh;animation:10s linear infinite cover}@keyframes cover{20%{color:#0f0}40%{color:#1e90ff}60%{color:gold}80%{color:#0ff}}#page1 .back{color:#fff;text-shadow:-10px 0 #f0f,10px 0 #0ff;background:#222;font-size:25vh;animation:3s linear infinite a}@keyframes a{45%{color:#fff}50%{color:#222}55%{color:#fff}}#page2 .front{background:#1e90ff;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite L}@keyframes L{50%{color:#1e90ff;background:#fff}}#page2 .back{text-shadow:5px 5px #fff,7px 7px;color:tomato;background:#fff;font-family:sans-serif;font-size:25vh;font-weight:100;animation:5s linear infinite p}@keyframes p{50%{text-shadow:13px 13px #fff,16px 16px}}#page3 .front{background:#1e90ff;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite L}#page3 .back{text-shadow:5px 5px #fff,7px 7px;color:tomato;background:#fff;font-family:sans-serif;font-size:25vh;font-weight:100;animation:5s linear infinite p}#page4 .front{background:#1e90ff;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite L}#page4 .back{text-shadow:5px 5px #fff,7px 7px;color:tomato;background:#fff;font-family:sans-serif;font-size:25vh;font-weight:100;animation:5s linear infinite p}#page5 .front{color:gold;text-shadow:24px 24px purple;background:#222;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite slide}@keyframes slide{25%{text-shadow:-24px 24px purple}50%{text-shadow:-24px -24px purple}75%{text-shadow:24px -24px purple}to{text-shadow:24px 24px purple}}#page5 .back{letter-spacing:2vh;text-align:left;color:#f0f;background:radial-gradient(circle at 30%,#000 50%,#222 40%);padding-left:2vh;font-size:2vh;font-weight:900;line-height:50vh;animation:10s linear infinite cover}#page6 .front{color:gold;text-shadow:24px 24px purple;background:#222;font-family:serif;font-size:25vh;font-weight:900;animation:10s linear infinite slide}#page6 .back{letter-spacing:2vh;text-align:left;color:#f0f;background:radial-gradient(circle at 30%,#000 50%,#222 40%);padding-left:2vh;font-size:2vh;font-weight:900;line-height:50vh;animation:10s linear infinite cover}@media (max-width:768px){#book{perspective:100vw;width:85vw;height:65vh}.page{width:50%;height:100%;font-size:1.5vh;line-height:30vh}.front,.back{font-size:1.5vh;line-height:30vh}#page1 .front,#page1 .back,#page2 .front,#page2 .back,#page3 .front,#page3 .back,#page4 .front,#page4 .back,#page5 .front,#page5 .back,#page6 .front,#page6 .back{font-size:2vh;line-height:40vh}label{pointer-events:auto}}@media (max-width:480px){#book{perspective:120vw;width:95vw;height:60vh}.page{width:50%;height:100%;font-size:1vh;line-height:25vh}.front,.back{font-size:1vh;line-height:25vh}#page1 .front,#page1 .back,#page2 .front,#page2 .back,#page3 .front,#page3 .back,#page4 .front,#page4 .back,#page5 .front,#page5 .back,#page6 .front,#page6 .back{font-size:1.5vh;line-height:30vh}}.spiral-binding{z-index:20;pointer-events:none;flex-direction:column;justify-content:space-between;width:20px;height:100%;display:flex;position:absolute;top:0;left:50%;transform:translate(-50%)}.spiral-hole{background:#999;border:1px solid #777;border-radius:50%;width:14px;height:14px;margin:3px 0;box-shadow:0 2px 4px #0000004d}.hand-animation{z-index:30;pointer-events:none;animation:2s ease-in-out infinite handMove;position:absolute;bottom:-40px;left:20px}@keyframes handMove{0%{opacity:.5;transform:translate(0)rotate(0)}50%{opacity:1;transform:translate(20px)rotate(5deg)}to{opacity:.5;transform:translate(0)rotate(0)}}@media (max-width:768px){.spiral-binding{width:18px}.spiral-hole{width:12px;height:12px;margin:2px 0}}@media (max-width:480px){.spiral-binding{width:16px}.spiral-hole{width:8px;height:8px;margin:1px 0}}.viewer-container{background:#e5e7eb;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;display:flex;position:relative;overflow:hidden}#book{aspect-ratio:2/1.4;background:0 0;justify-content:center;align-items:center;width:98vw;max-width:600px;height:auto;margin:0 auto;display:flex;position:relative}.page-img{object-fit:contain;width:100%;height:100%;display:block}@media (max-width:768px){#book{aspect-ratio:2/1.4;width:99vw;max-width:99vw}}