body {
	--bookShadow : 12px 12px 12px 0px rgba(142, 132, 113,0.79); 
}

.bookSystem {
	position : relative ;
	width : 100% ;
	height : 99vh;
	overflow-x:hidden;
	overflow-y: auto;
	background:rgba(142, 132, 113,0.3) ;
}

.bookSystem > header {
	position : absolute ;
	width : 100% ;
	top:0;
}

.bookSystem > header .pageNumber {
	position: absolute;
	top: 0.7em;
	right: 1em;
	color: #0090C0;
}

.bookSystem > header .showTranscription {
	position: absolute;
	top: 2em;
	right: 2%;
	z-index: 500;
	color: #0090C0;
	/* display : none ; */
}

.book {
	width : 100% ;
	/* position : absolute ;
	top : 0; 
	left : 0 ; */
	z-index : 100 ;
	overflow-x:hidden;
	overflow-y: auto;
}

.page {
	max-width : 60% !important ;
	max-height : none !important ;
	position : absolute ;
	top : 1em ;
	left : 50% ;
	transform : translate(-50%, 0) ;
	z-index : 1 ;
	-webkit-box-shadow: var(--bookShadow) ;
	box-shadow: var(--bookShadow) ;
	margin-bottom : 3em ;
}

.page.next {
	z-index : 50 ;
}

.page.current {
	z-index : 100 ;
}

.bookSystem footer {
	position : absolute ;
	top : 220vh ;
}

.moveLeft, .moveRight {
	position : absolute ;
	top : 0 ;
	width : 49.5% ;
	height : 99.9% ;
	z-index : 200 ;
	/* background-color:rgba(255,0,0,0.4) ; */
}

.moveLeft {
	left : 0 ;
}
.moveRight {
	left : 50.5% ;
}

.bookSystem .transcription {
    position: absolute;
    top: 0;
    left: 0;
    box-sizing: border-box;
    width: 99.9vw;
	height:230%;
    z-index: 150;
    padding: 2em 21vw;
    font-size: 200%;
    text-align: justify;
    background: rgba(255,255,255,0.45);
    color: #07789D;
	line-height: 150%;
	word-spacing: 120%;
	letter-spacing: 120%;
	display : none ;
}