body{margin:0;background-color:#ffecc6}*{box-sizing:border-box}.book-section{height:100vh;width:100%;padding:15px 0;text-align:center}.book-section>.container{width:clamp(280px,90vw,700px);height:clamp(260px,80vh,600px);position:relative;left:50%;transform:translateX(-50%);border-radius:2%;margin-bottom:30px;perspective:1200px}.container>.right{position:absolute;height:100%;width:50%;transition:.7s ease-in-out;transform-style:preserve-3d}.book-section>.container>.right{right:0;transform-origin:left;border-radius:10px 0 0 10px}.right>figure.front,.right>figure.back{margin:0;height:100%;width:100%;position:absolute;left:0;top:0;background-size:contain;background-position:center center;background-repeat:no-repeat;backface-visibility:hidden;background-color:white;overflow:hidden}.right>figure.front{background-position:center center;background-size:100% auto;border-radius:0 10px 10px 0;box-shadow:2px 2px 15px -2px rgba(0,0,0,.2)}.right>figure.back{background-position:center center;border-radius:10px 0 0 10px;box-shadow:-2px 2px 15px -2px rgba(0,0,0,.2);transform:rotateY(180deg)}.flip{transform:rotateY(-180deg)}.flip::before{content:"";position:absolute;top:0;left:0;z-index:10;width:100%;height:100%;border-radius:0 10px 10px 0;background-color:rgba(0,0,0,.1)}.book-section>button{border:2px solid #282c02;background-color:transparent;color:#282c02;padding:10px 20px;border-radius:5px;cursor:pointer;margin:10px;transition:.3s ease-in-out}.book-section>button:focus,.book-section>button:active{outline:none}.book-section>p{color:rgba(0,0,0,.7);font-family:calibri;font-size:24px;margin:15px 0}.book-section>p>a{text-decoration:none;color:#d8cdb6;}.book-section>button:hover{background-color:#282c02;color:#fff}.front#cover,.back#back-cover{background-color:#ffcb63;font-family:calibri;text-align:left;padding:0 30px}.front#cover h1{color:#fff}.front#cover p{color:rgba(0,0,0,.8);font-size:14px}@media only screen and (max-width:1366px) and (min-width:1024px) and (max-height:900px){.book-section>.container{height:550px;width:640px}.book-section>p{font-size:19px}.book-section>button{padding:9px 18px;font-size:15px}.front#cover,.back#back-cover{padding:0 25px}.front#cover h1{font-size:22px}.front#cover p{font-size:13px}}@media only screen and (max-width:1366px) and (min-width:768px){.book-section>.container{height:500px;width:580px}.book-section>p{font-size:18px}.book-section>button{padding:8px 16px;font-size:14px}.front#cover,.back#back-cover{padding:0 20px}.front#cover h1{font-size:20px}.front#cover p{font-size:12px}}@media only screen and (max-width:768px) and (min-width:600px){.book-section>.container{height:420px;width:480px}.book-section>p{font-size:16px}.book-section>button{padding:8px 14px;font-size:13px}.front#cover,.back#back-cover{padding:0 15px}.front#cover h1{font-size:18px}.front#cover p{font-size:11px}}@media only screen and (max-width:600px){.book-section>.container{height:350px;width:340px}.book-section>p{font-size:14px}.book-section>button{padding:8px 12px;font-size:12px}}@media only screen and (max-width:415px){.book-section>.container{height:280px;width:320px}.book-section>p{font-size:12px}.book-section>button{padding:6px 10px;font-size:11px;margin:5px}}@media only screen and (max-height:500px) and (orientation:landscape){.book-section{height:auto;padding:3px 0}.book-section>.container{height:auto;min-height:200px;width:320px;margin-bottom:5px}.right>figure.front,.right>figure.back{background-size:cover;background-position:center center}.book-section>p{font-size:11px;margin:3px 0}.book-section>button{padding:5px 8px;font-size:10px;margin:3px}}@media only screen and (max-height:799px) and (min-width:768px) and (orientation:landscape){.book-section{height:auto;padding:5px 0}.book-section>.container{height:350px;width:350px;margin-bottom:10px}.book-section>p{font-size:14px;margin:5px 0}.book-section>button{padding:6px 10px;font-size:12px}}@media only screen and (max-height:700px){body{overflow-y:auto}.header{height:50px}.title{font-size:16px;padding-top:6px}.buttons{top:6px;right:6px}.book-section{height:auto;padding:8px 0 12px}.book-section>.container{width:clamp(260px,92vw,340px);height:auto;min-height:250px;max-height:70vh}.book-section>button{padding:2px 5px;font-size:11px;margin:5px}.header{height:20px}}