body{height:100vh;background-color:#f1f1f1;overflow:hidden}.book{position:relative;width:500px;height:200px;perspective:1000px;transform-style:preserve-3d;cursor:pointer;margin:5% auto 0}.page{position:absolute;width:50%;height:100%;background-color:#fff;box-shadow:0 0 10px #0000004d;transform-origin:right center;transform:translate(25%) rotateY(0);backface-visibility:hidden;transition:transform .5s;padding:10px}.page:nth-child(1){background-color:#fcc}.page:nth-child(2){background-color:#cfc}.page:nth-child(3){background-color:#ccf}.page:nth-child(4){background-color:#fdd}.page:nth-child(5){background-color:#dfd}.page:nth-child(6){background-color:#ddf}.page:nth-child(7){background-color:#fee}.page:nth-child(8){background-color:#efe}.page:nth-child(9){background-color:#eef}.page:nth-child(10){background-color:#fbf6be}.page:nth-child(11){background-color:#fff}.page.left{transform:translate(-25%) rotateY(-180deg)}.page.right{transform:translate(25%) rotateY(0);z-index:2}input[type=checkbox]{display:none}.navigation-buttons{position:absolute;bottom:10px;width:100%;display:flex;justify-content:center}.navigation-button{padding:5px 10px;margin:0 5px;cursor:pointer;background-color:#007bff;color:#fff}.obj{color:pink;font-size:1.5em;position:fixed;top:-10%;z-index:999;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:default;animation-name:drop,range;animation-duration:12s,3.5s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}@keyframes drop{0%{top:-10%}to{top:100%}}@keyframes range{0%{transform:translate(0)}50%{transform:translate(70px)}to{transform:translate(0)}}.obj:nth-of-type(1){left:10%;animation-delay:1s,1s}.obj:nth-of-type(2){left:20%;animation-delay:2s,.5s}.obj:nth-of-type(3){left:30%;animation-delay:7s,2s}.obj:nth-of-type(4){left:40%;animation-delay:5s,2s}.obj:nth-of-type(5){left:50%;animation-delay:8.5s,3s}.obj:nth-of-type(6){left:60%;animation-delay:3s,2s}.obj:nth-of-type(7){left:70%;animation-delay:6s,1s}.obj:nth-of-type(8){left:80%;animation-delay:1s,0s}.obj:nth-of-type(9){left:90%;animation-delay:4s,1.5s}.obj:nth-of-type(10){left:1%;animation-delay:8s,0s}.obj:nth-of-type(11){left:5%;animation-delay:6.5s,1s}.obj:nth-of-type(12){left:15%;animation-delay:4.5s,0s}.obj:nth-of-type(13){left:25%;animation-delay:10s,2s}.obj:nth-of-type(14){left:35%;animation-delay:9s,2.5s}.obj:nth-of-type(15){left:45%;animation-delay:11s,3s}.obj:nth-of-type(16){left:55%;animation-delay:3.5s,1s}.obj:nth-of-type(17){left:65%;animation-delay:9.5s,0s}.obj:nth-of-type(18){left:75%;animation-delay:5.5s,2s}.obj:nth-of-type(19){left:85%;animation-delay:7.5s,2.5s}.obj:nth-of-type(20){left:95%;animation-delay:2.5s,3s}