:root{--body-bg:#fafafa;--page-bg:#f5f5f5;--dark-text:#020c1b;--baseline:12px;--book-title:"Tulpen One", sans-serif;--title:"Cormorant Garamond", serif;--body:"Cormorant Garamond", serif;--base-size:calc(var(--baseline) * 1.2)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100svh;color:var(--dark-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}img{width:100%}
.App{background-color:var(--body-bg);flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:16px;display:flex;overflow:hidden}.cover{width:calc(var(--baseline) * 60);height:calc(var(--baseline) * 47);aspect-ratio:60/47;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);box-shadow:0 0 100px #0000004d}@supports (height:100svh) and (aspect-ratio:1 / 1){.cover{width:min(calc(var(--baseline) * 60), calc(100vw - 32px), calc((100svh - 32px) * 60 / 47));height:auto}}.book{perspective:1200px;width:100%;height:100%;display:flex;transform:translateZ(0)}.mobile__app{background-color:var(--body-bg);flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:16px 0;display:none;overflow-x:hidden}@media only screen and (max-width:767px),only screen and (max-height:620px){.App{display:none}.mobile__app{display:flex}}
.back{backface-visibility:hidden;width:100%;height:100%;padding:60px 10px;transition:opacity .5s cubic-bezier(.645,.045,.355,1);position:absolute;transform:rotateY(180deg)translateZ(1px)}.back>div{flex-direction:column;align-items:center;max-height:100%;display:flex;overflow:auto}.back__conclusion{flex-direction:column;justify-content:center;align-items:center;display:flex}.back>div::-webkit-scrollbar{display:none}.back h1{font-family:var(--title);font-size:calc(var(--base-size) * 1.2);text-transform:uppercase;color:var(--dark-text);border-top:2px solid var(--dark-text);border-bottom:2px solid var(--dark-text);padding:calc(var(--baseline) / 2) calc(var(--baseline) / 5);margin-bottom:20px;font-weight:600;display:inline-block}.back p{font-family:var(--title);text-align:justify;width:100%;padding:10px 20px;font-size:12px;font-style:italic;font-weight:600}.back__checks{width:100%;padding:10px 20px}.back__checks h2{font-family:var(--title);text-transform:uppercase;letter-spacing:3px;color:var(--dark-text);font-size:14px;font-style:italic;font-weight:600}.back__checks ol{font-family:var(--title);text-align:justify;padding:0 0 10px 10px;font-size:12px;font-style:italic;font-weight:600}.back__checks li{padding:5px 0}.back__conclusion p{width:max-content;font-size:24px;font-weight:900}
.card{width:100%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transition:all .5s cubic-bezier(.645,.045,.355,1);position:absolute;transform:rotateY(0)}.card__flip{cursor:pointer;z-index:3;height:20px;position:absolute;bottom:20px;right:20px}.card__front{backface-visibility:hidden;background-color:var(--page-bg);color:#333;border-radius:5px;width:100%;height:100%;position:absolute}.card__front .back{transform:translateZ(1px)}.card__back{backface-visibility:hidden;color:#333;background-color:#071e3d;border-radius:5px;width:100%;height:100%;position:absolute;transform:rotateY(180deg)}.card__code .code__wrapper pre{height:505px;max-height:100%;background-image:linear-gradient(#071e3d 80%,#041327 100%)!important}.card__code .code__lang{background-image:linear-gradient(90deg,#1f4287 0% 8%)}@media only screen and (max-width:360px){.card__code .code__wrapper pre{height:575px}}
.book__cover{width:50%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;backface-visibility:hidden;transform-origin:0 0;background-color:var(--page-bg);cursor:pointer;background-image:linear-gradient(90deg,#e3e3e3 0%,#f7f7f700 18%);flex-direction:column;justify-content:center;align-items:center;transition:transform .9s cubic-bezier(.645,.045,.355,1);display:flex;position:relative;transform:rotateY(0)}.book__cover:first-of-type{background-image:linear-gradient(-90deg,#272727ee 0%,#0a192f 18%)}.book__cover img{width:70%}
.front{backface-visibility:hidden;width:100%;height:100%;padding:var(--baseline);flex-direction:column;justify-content:space-between;align-items:center;transition:opacity .4s cubic-bezier(.645,.045,.355,1);display:flex;position:absolute;transform:rotateY(0)translateZ(1px)}.front>div{flex-direction:column;align-items:center;display:flex}.front h1{font-family:var(--book-title);font-size:calc(var(--base-size) * 3);text-transform:uppercase;letter-spacing:3px;color:var(--dark-text);margin-top:calc(var(--baseline) * 5);margin-bottom:calc(var(--baseline) * 2);text-align:center;font-weight:700}.front h2{font-family:var(--title);font-size:calc(var(--base-size) * 1.2);text-transform:uppercase;color:var(--dark-text);border-top:1px solid var(--dark-text);border-bottom:1px solid var(--dark-text);padding:calc(var(--baseline) / 2) calc(var(--baseline) / 5);font-weight:100;display:inline-block}.front p{font-family:var(--title);text-transform:uppercase;font-size:calc(var(--base-size) * .8);margin-bottom:calc(var(--baseline) * 2);letter-spacing:1px;text-align:center}.front p span{font-size:calc(var(--base-size) * 1.2);letter-spacing:0;display:block}.front div:last-child{width:calc(100% - (var(--baseline) * 2));bottom:calc(var(--baseline) * 2);font-family:var(--title);font-size:calc(var(--base-size) * .8);text-transform:uppercase;text-align:center}.front div:last-child span{text-transform:lowercase;letter-spacing:1.4px;padding:0;display:block}.front__code{backface-visibility:hidden;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:10px 10px 10px 10%;transition:opacity .5s cubic-bezier(.645,.045,.355,1);display:flex;position:absolute;transform:rotateY(0)translateZ(1px)}.code{width:100%;transition:opacity 40s cubic-bezier(.645,.045,.355,1)}.code__lang{color:#fff;text-align:right;background-image:linear-gradient(90deg,#152c5a 0%,#1f4287 8%);border-radius:5px 5px 0 0;padding:12px 16px}.code__wrapper{position:relative}.code__wrapper pre{color:#fff;border-radius:0 0 5px 5px;height:400px;padding:10px;font-size:12px;line-height:1.5;overflow:auto;background-color:#071e3d!important;background-image:linear-gradient(90deg,#041327 0%,#071e3d 8%)!important}.code__wrapper pre::-webkit-scrollbar{display:none}.code__wrapper button{color:#fff;cursor:pointer;opacity:0;background-color:#1f428790;border:none;border-radius:5px;outline:none;padding:5px 10px;transition:all .3s ease-in;position:absolute;top:10px;right:10px}.code__wrapper:hover button{opacity:1}
.mobile{width:500px;max-width:95vw;min-height:550px;position:relative;box-shadow:0 0 100px #0000004d}.mobile__top{flex-direction:column;justify-content:center;align-items:center;display:flex}.mobile__top h1{font-family:var(--book-title);font-size:calc(var(--base-size) * 3);text-transform:uppercase;letter-spacing:3px;color:var(--dark-text);text-align:center;margin-top:40px;margin-bottom:20px;font-weight:700}.mobile__top h2{font-family:var(--title);font-size:calc(var(--base-size) * 1.5);text-transform:uppercase;color:var(--dark-text);border-top:1px solid var(--dark-text);border-bottom:1px solid var(--dark-text);padding:calc(var(--baseline) / 2) calc(var(--baseline) / 5);margin-bottom:40px;font-weight:500;display:inline-block}.mobile__bottom{flex-direction:column;justify-content:center;align-items:center;margin:40px 0;display:flex}.mobile__bottom p{font-family:var(--title);text-transform:uppercase;font-size:calc(var(--base-size) * .8);margin-bottom:calc(var(--baseline) * 2);letter-spacing:1px;text-align:center}.mobile__bottom p span{font-size:calc(var(--base-size) * 1.2);letter-spacing:0;display:block}@media only screen and (max-width:360px){.mobile{min-height:620px}}
.book__page{width:50%;height:100%;transform-style:preserve-3d;-webkit-transform-style:preserve-3d;transform-origin:0 0;background-color:var(--page-bg);cursor:pointer;background-image:linear-gradient(90deg,#e3e3e3 0%,#f7f7f700 18%);flex-direction:column;justify-content:center;align-items:center;transition:transform .4s cubic-bezier(.645,.045,.355,1),z-index .4s cubic-bezier(.645,.045,.355,1);display:flex;position:absolute;left:50%;transform:rotateY(0)}