@import"https://fonts.googleapis.com/css?family=Cormorant+Garamond:300,400,600|Tulpen+One&display=swap";:root{--body-bg: #fafafa;--page-bg: #f5f5f5;--dark-text: #2a2935;--baseline: 12px;--book-title: "Tulpen One", sans-serif;--title: "Cormorant Garamond", serif;--body: "Cormorant Garamond", serif;--base-size: var(--baseline) * 1.2}*{box-sizing:border-box}body{background-color:var(--body-bg);height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}.cover{width:calc(var(--baseline) * 60);height:calc(var(--baseline) * 42.6);box-shadow:0 0 100px #0000004d}.book{width:100%;height:100%;display:flex;perspective:1200px}.book__page{position:relative;width:50%;height:100%;display:grid;transform:rotateY(0);transition:transform .9s cubic-bezier(.645,.045,.355,1);transform-origin:0% 0%;background-color:var(--page-bg);background-image:linear-gradient(90deg,#e3e3e3 0%,rgba(247,247,247,0) 18%)}.book__page:nth-of-type(1){background-image:linear-gradient(-90deg,#e3e3e3 0%,rgba(247,247,247,0) 18%)}.book__page--1{cursor:pointer;overflow:hidden}.book__page--1 img{width:100%;max-width:100%;height:auto}.book__page--2{position:absolute;right:0;pointer-events:none;transform-style:preserve-3d;background-color:var(--page-bg);background-image:linear-gradient(90deg,#e3e3e3 0%,rgba(247,247,247,0) 18%)}.book__page--4{cursor:pointer;padding:0 calc(var(--baseline) * 3)}.book__page-front{position:absolute;width:100%;height:100%;transform:rotateY(0) translateZ(1px)}.book__page-back{position:absolute;width:100%;height:100%;padding:0 calc(var(--baseline) * 1.8);transform:rotateY(180deg) translateZ(1px)}.book__page .page__content{padding:var(--baseline);height:100%;position:relative;text-align:center}.book__page .page__content-book-title{font-family:var(--book-title);font-size:calc(var(--base-size) * 3);font-weight:700;text-transform:uppercase;letter-spacing:3px;color:var(--dark-text);margin-top:calc(var(--baseline) * 5);margin-bottom:calc(var(--baseline) * 2)}.book__page .page__content-author{font-family:var(--title);font-size:calc(var(--base-size) * 1.2);font-weight:100;text-transform:uppercase;color:var(--dark-text);border-top:1px solid var(--dark-text);border-bottom:1px solid var(--dark-text);display:inline-block;padding:calc(var(--baseline) / 2) calc(var(--baseline) / 5);margin-bottom:calc(var(--baseline) * 6)}.book__page .page__content-credits{font-family:var(--title);text-transform:uppercase;font-size:calc(var(--base-size) * .8);margin-bottom:calc(var(--baseline) * 2);letter-spacing:1px}.book__page .page__content-credits span{display:block;font-size:calc(var(--base-size) * 1.2);letter-spacing:0}.book__page .page__content-copyright{position:absolute;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}.book__page .page__content-title{font-family:var(--title);font-size:calc(var(--base-size) * 1);text-transform:uppercase;letter-spacing:1px;margin-top:calc(var(--baseline) * 5);margin-bottom:calc(var(--baseline) * 3)}.book__page .page__content-table{width:100%;margin-top:calc(var(--baseline) * 2)}.book__page .page__content-table td{font-family:var(--title);font-size:calc(var(--base-size) * 1);padding-bottom:calc(var(--baseline) * 1.5);text-transform:uppercase}.book__page .page__content-blockquote{margin-bottom:calc(var(--baseline) * 2)}.book__page .page__content-blockquote-text{font-family:var(--title);font-size:calc(var(--base-size) * .67);font-style:italic;text-align:justify}.book__page .page__content-blockquote-reference{font-family:var(--title);font-size:calc(var(--base-size) * .7);margin-top:calc(var(--baseline) * .3);float:right;text-transform:uppercase}.book__page .page__content-text{font-family:var(--title);font-size:calc(var(--base-size) * .67);text-align:justify;text-indent:var(--baseline)}.book__page .page__number{position:absolute;bottom:var(--baseline);width:calc(100% - (var(--baseline) * 2));font-family:var(--title);font-size:calc(var(--base-size) * .67);text-align:center}.book input[type=radio]{display:none}.book input[type=radio]:checked+.book__page{transition:transform .9s cubic-bezier(.645,.045,.355,1);transform:rotateY(-180deg)}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}