.book-container-page{display:flex;align-items:center;justify-content:center;perspective:1000px}@keyframes initAnimation-page{0%{transform:rotateY(0deg)}to{transform:rotateY(-20deg)}}.book-page{width:300px;height:450px;position:relative;transform-style:preserve-3d;transform:rotateY(-20deg);transition:1s ease;animation:initAnimation-page 1s ease 0s 1}.book-container-page:focus .book-page,.book-container-page:hover .book-page{transform:rotateY(0deg)}.book-page>:first-child{position:absolute;top:0;left:0;width:300px;height:450px;transform:translateZ(35px);animation:placeholder 1.5s ease-in-out infinite;border-radius:0 3px 3px 0;box-shadow:5px 5px 20px #666}.book-page:before{top:3px;width:53px;height:444px;transform:translateX(269.5px) rotateY(90deg);background:blue linear-gradient(90deg,#fff,#f9f9f9 5%,#fff 10%,#f9f9f9 15%,#fff 20%,#f9f9f9 25%,#fff 30%,#f9f9f9 35%,#fff 40%,#f9f9f9 45%,#fff 50%,#f9f9f9 55%,#fff 60%,#f9f9f9 65%,#fff 70%,#f9f9f9 75%,#fff 80%,#f9f9f9 85%,#fff 90%,#f9f9f9 95%,#fff)}.book-page:after,.book-page:before{position:absolute;content:" ";left:0}.book-page:after{top:0;width:300px;height:450px;transform:translateZ(-27.5px);border-radius:0 3px 3px 0;background:#000;box-shadow:-10px 0 50px 10px #666}@media (max-width:768px){.book-page:after{width:225px;height:337.5px;transform:translateZ(-22px);box-shadow:-5px 0 25px 5px #666}.book-page:before{top:3px;width:40px;height:330px;transform:translateX(201px) rotateY(90deg)}.book-page>:first-child{transform:translateZ(20px);box-shadow:3.75px 3.75px 15px #666}.book-page,.book-page>:first-child{width:225px;height:337.5px}}