.flip-book { box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5); display: none; background-size: cover; } .page { padding: 20px; background-color: hsl(35, 55, 98); color: hsl(35, 35, 35); border: solid 1px hsl(35, 20, 70); overflow: hidden; .page-content { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; .page-header { height: 30px; font-size: 100%; text-transform: uppercase; text-align: center; } .page-image { height: 100%; background-size: contain; background-position: center center; background-repeat: no-repeat; } .page-text { height: 100%; flex-grow: 1; font-size: 80%; text-align: justify; margin-top: 10px; padding-top: 10px; box-sizing: border-box; border-top: solid 1px hsl(35, 55, 90); } .page-footer { height: 30px; border-top: solid 1px hsl(35, 55, 90); font-size: 80%; color: hsl(35, 20, 50); } } &.--left { // for left page (property will be added automatically) border-right: 0; box-shadow: inset -7px 0 30px -7px rgba(0, 0, 0, 0.4); } &.--right { // for right page (property will be added automatically) border-left: 0; box-shadow: inset 7px 0 30px -7px rgba(0, 0, 0, 0.4); .page-footer { text-align: right; } } &.hard { // for hard page background-color: hsl(35, 50, 90); border: solid 1px hsl(35, 20, 50); } &.page-cover { background-color: hsl(35, 45, 80); color: hsl(35, 35, 35); border: solid 1px hsl(35, 20, 50); h2 { text-align: center; padding-top: 50%; font-size: 210%; } &.page-cover-top { box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), -2px 0 5px 2px rgba(0, 0, 0, 0.4); } &.page-cover-bottom { box-shadow: inset 0px 0 30px 0px rgba(36, 10, 3, 0.5), 10px 0 8px 0px rgba(0, 0, 0, 0.4); } } }