body{
	margin:0;
	font-size:14px;
	}
* {
	position:relative;
	box-sizing:border-box;
	}
.reader{
	font-family:sans-serif;
	margin:0 auto;
	width:100%;
	height:100vh;
	text-align:center;
	background-color:#444;
	color:#fff;
	}
	.navig{
		position: absolute;
		top:0;
		left:0;
		width:100%;
		background-color:rgba(0,0,0,0.8);
		opacity:0;
		padding:8px;
		z-index:2;
		}
		.navig:hover{
			opacity:1;
			}
		.navig a{
			display:inline-block;
			padding:6px 10px;
			text-decoration:none;
			color:#fff;
			font-weight:bold;
			}
		.navig a:hover{
			color:#ff0;
			background-color:rgba(255,255,0,0.1);
			}
		.navig .numbers{
			display:contents;
			}
		/* Highlight selected page number. You could generate this list on server-side for each gallery, or just make it long enough to serve all galleries. */
		#page_1:target  ~ .navig .numbers a:nth-child(1),
		#page_2:target  ~ .navig .numbers a:nth-child(2),
		#page_3:target  ~ .navig .numbers a:nth-child(3),
		#page_4:target  ~ .navig .numbers a:nth-child(4),
		#page_5:target  ~ .navig .numbers a:nth-child(5),
		#page_6:target  ~ .navig .numbers a:nth-child(6),
		#page_7:target  ~ .navig .numbers a:nth-child(7),
		#page_8:target  ~ .navig .numbers a:nth-child(8),
		#page_9:target  ~ .navig .numbers a:nth-child(9),
		#page_10:target ~ .navig .numbers a:nth-child(10),
		#page_11:target ~ .navig .numbers a:nth-child(11),
		#page_12:target ~ .navig .numbers a:nth-child(12),
		#page_13:target ~ .navig .numbers a:nth-child(13),
		#page_14:target ~ .navig .numbers a:nth-child(14),
		#page_15:target ~ .navig .numbers a:nth-child(15),
		#page_16:target ~ .navig .numbers a:nth-child(16),
		#page_17:target ~ .navig .numbers a:nth-child(17),
		#page_18:target ~ .navig .numbers a:nth-child(18),
		#page_19:target ~ .navig .numbers a:nth-child(19),
		#page_20:target ~ .navig .numbers a:nth-child(20)
		{ background-color:rgba(255,255,0,0.2); }
.page {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#444;
	padding:12px;
	justify-content:center;
	align-items:center;
	flex-wrap:wrap;
	display:none;
	
	/*display:flex;
	pointer-events:none;
	opacity:0;
	transition:opacity 0.2s;*/
	}
	.page#page_1,
	.page:target {
		display:flex;
		z-index:2;
		
		/*opacity:1;
		pointer-events:all;*/
		}
.pagecontent {
	width:100%;
	height:calc(100% - 24px);
	justify-content:center;
	align-items:center;
	display:flex;
	justify-content:center;
	align-items:center;
	}
	.pagecontent img{
		max-width:100%;
		max-height:100%;
		object-fit:contain;
		}
.textcontent{
	padding: 0 10%;
	max-height: 100%;
	overflow:hidden;
	}
.pageinfo {
	width:100%;
	height:24px;
	}
	.pageinfo:hover {
		}
	.pageinfo a {
		display:inline-block;
		text-decoration:none;
		color:#fff;
		font-weight:bold;
		padding:8px 12px 0;
		height:100%;
		margin:0 auto;
		}
		.pageinfo a:hover {
			text-decoration:underline;
			color:#ff0;
			}
	.moreinfo {
		position:absolute;
		left:0;
		bottom:100%;
		padding:8px;
		overflow-wrap:break-word;
		color:#fff;
		background-color:#555;
		display:none;
		}
		.pageinfo:hover .moreinfo {
			display:block;
			width:100%;
			}
.prev,
.next{
	display:block;
	position:absolute;
	top:0;
	width:50%;
	height:100%;
	}
	.prev{
		left:0;
		}
	.next{
		right:0;
		}
	.prev:hover{
		border-left:8px solid rgba(0,0,0,0.5);
		}
	.next:hover{
		border-right:8px solid rgba(0,0,0,0.5);
		}