@import url('https://fonts.googleapis.com/css2?family=Gveret+Levin');
@import url('https://fonts.googleapis.com/css2?family=Playpen+Sans+Hebrew');
@import url('https://fonts.googleapis.com/css2?family=Alef');

body {
	font-family:"Alef";
}

:root {
	--bg-color: #fff;
	--text-color: #113;
	--link-color: hsl(236, 68%, 52%);
	--h2-color: #38761d;
}

.dark {
	body.pub {
		--bg-color: #1a1a1a;
		--text-color: #f0f0f0;
		--link-color: hsl(204 86% 53%);
		--h2-color: hsl(102 61% 45%);
	}
}

#top-controls {
	position: fixed;
	z-index: 10;
	top: 10px;
	left: 10px;
	display: flex;
	gap: 6px;
	direction: ltr;
}
#toggle-dark::before {
	content: "☀️";
}
.dark #toggle-dark::before {
	content: "🌙";
}
#top-controls > button {
	cursor: pointer;
	font-size: 18pt;
	border: 0;
	background: transparent;
	line-height: 1;
	padding: 0;
	min-width: 28px;
	height: 28px;
}
#top-controls > button.fontSize {
	border: 1px solid currentColor;
	border-radius: 999px;
	background: var(--bg-color);
	color: var(--text-color);
	font: bold 16px/1 "Alef", sans-serif;
}
#top-controls button:hover {
	background: var(--text-color);
	color: var(--bg-color);
}

body,body p
{
	background: transparent;
	color: var(--text-color);
}

body.pub {
	direction: rtl;
	padding: 10px;
	background-color: var(--bg-color);
}

html, html #contents {
	margin: 0 !important;
	padding: 0 !important;
}

body.pub .doc-content {
	max-width: 777px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}

html .doc-content,
html [class^="c0"],html [class^="c1"],html [class^="c2"],html [class^="c3"],html [class^="c4"],html [class^="c5"], html [class^="c6"],html [class^="c7"],html [class^="c8"],html [class^="c9"] {
	background-color: inherit;
	color: inherit;
	height: auto;
	orphans: inherit;
	widows: inherit;
}

body h6,body h6[class] {
    margin: 1vh 2vw 0;
	padding: 0;
	font-weight: normal;
}

body h1[class],body h1,
body.turn h2[class],body.turn h2,
body.turn h3[class],body.turn h3{
	color:inherit;
}

body.pub h2[class],body.pub h2,
body.pub h3[class],body.pub h3{
	color: var(--h2-color);
}

body a[class],body a,
body a[class]>span,body a>span{
	color: var(--link-color);
}

html.turn {
	overflow: hidden;
}

body.turn {
    background-color: #5e3030; /* This helps see the "back" of the page during the fold */
	width: 100vw;
	height: 100vh;
	font-size: 1rem;
}
body.turn p {
	margin:2vh 0 !important;
	padding:0 !important;
}
body.smallfont,body.smallfont span {
	font-size: .8em;
}

#flipbook {
}

.page:not(.cover):not(.backcover):not(.insidecover):not(.insidebackcover) {
	direction: rtl; 
	background-color: #fdfcef;
}

.page.odd .pageinside {
	box-shadow: inset 12px -2px 18px rgba(0,0,0,0.3),inset 2px 0px 8px rgba(0,0,0,.7);
}
.page.even .pageinside {
	box-shadow: inset -12px -2px 18px rgba(0,0,0,0.3),inset -2px 0px 8px rgba(0,0,0,.7);
}
.pageinside {
	padding: 20px;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
    transform: rotate3d(0, 0, 1, 0.06deg);
}

.cover,.backcover {
	background-color: #8b0000; /* Deep red base */
	/* Layered gradients for a texture and aged lighting */
	background-image: 
		radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 60%),
		repeating-radial-gradient(circle at 0 0, rgba(0,0,0,0.1) 0px, rgba(0,0,0,0.1) 1px, transparent 1px, transparent 10px),
		linear-gradient(to right, rgba(0,0,0,0.4) 0%, transparent 5%, transparent 95%, rgba(0,0,0,0.4) 100%);		
	box-sizing: border-box;
	background-size: cover;
	cancel-box-shadow: 10px 10px 30px rgba(0,0,0,0.5),
		inset -2px -2px 10px rgba(0,0,0,0.3);
}

.insidecover,.insidebackcover {
	background-color: #c2c1a7; /* Light beige for inside covers */
}

html ul,html ul[class] {
	margin-block-start: 1em !important;
}
html li,html li[class] {
	margin-inline-start: 0 !important;
	padding: 0.5em;
}
html li::before, li[class]::before {
	margin:0;
}