body{margin:0;padding:0;height:100vh;font-family:Roboto,sans-serif;background:linear-gradient(90deg,aqua,purple)}input{display:none}.navbar ul li:hover:after{width:100%}img{width:100%;height:100%}.book{margin-left:50%;display:flex;width:40%}#cover{width:250px;height:400px}.flip-book{width:250px;height:400px;position:relative;perspective:1500px;margin:3% auto}.flip{width:100%;height:100%;position:absolute;top:0;left:0;transform-origin:left;transform-style:preserve-3d;transform:rotateY(0);transition:.5s;color:#000}p{font-size:14px;line-height:24px}.front{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;box-sizing:border-box;padding:0 13px;box-shadow:inset 20px 0 50px #00000080 0 2px 5px #00000080}.back{position:absolute;width:100%;height:100%;top:0;left:0;z-index:99;transform:rotateY(180deg);backface-visibility:hidden;background:#000}.next-btn,.back-btn{position:absolute;bottom:13px;right:13px;cursor:pointer;color:#000}#p1{z-index:10}#p2{z-index:9}#p3{z-index:8}#p4{z-index:7}#p5{z-index:6}#p6{z-index:5}#p7{z-index:4}#p8{z-index:3}#p9{z-index:2}#p10{z-index:1}#c1:checked~.flip-book #p1{transform:rotateY(-180deg);z-index:1}#c2:checked~.flip-book #p2{transform:rotateY(-180deg);z-index:2}#c3:checked~.flip-book #p3{transform:rotateY(-180deg);z-index:3}#c4:checked~.flip-book #p4{transform:rotateY(-180deg);z-index:4}#c5:checked~.flip-book #p5{transform:rotateY(-180deg);z-index:5}#c6:checked~.flip-book #p6{transform:rotateY(-180deg);z-index:6}#c7:checked~.flip-book #p7{transform:rotateY(-180deg);z-index:7}#c8:checked~.flip-book #p8{transform:rotateY(-180deg);z-index:8}#c9:checked~.flip-book #p9{transform:rotateY(-180deg);z-index:9}#c10:checked~.flip-book #p10{transform:rotateY(-180deg);z-index:10}.back{background-color:#fff}input[type=checkbox]{position:absolute;top:-9999px;left:-9999px;visibility:hidden}@media (min-width: 768px){.book{margin-left:35%;display:flex;width:50%}}