#container {
	display:grid;
	grid-template-columns:1fr 2fr;
	gap:20px;
	height:calc(100vh - 56px);
	width:90vw;
	margin:0 5vw;
	image-rendering:pixelated
}

#screen-left {
	display:grid;
	grid-template-rows:auto 1fr auto;
	height:100%;
	border-style:none solid none double;
	border-color:#a7a7a759;
	border-width:5px
}

	#chapter-select {
		height:0;
		min-height:100%;
		overflow:hidden scroll;
		& > div {
			display:block;
			height:100px;
			width:100%;
			margin-bottom:10px;
			background:url("/img/mat/chapterbutton.gif");
			cursor:pointer;
			&:hover, &.active {
				background:var(--ch),var(--color);
				background-size:100% 100%
			}
		}
	}

	#filter {
		display:grid;
		grid-template-columns:1fr;
		align-items:center;
		height:75px;
		border-top:5px solid #a7a7a759;
		& > p {
			font-size:1.2em;
			font-family:CourierPrime,monospace;
			user-select:none
		}
	}

#screen-right {
	height:100%;
	overflow:hidden scroll;
	border-style:none double none solid;
	border-color:#a7a7a759;
	border-width:5px;
	& .chapter-title {
		display:grid;
		grid-template-columns:1fr;
		align-content:center;
		justify-content:center;
		width:100%;
		height:72px;
		background:url("/img/mat/black.gif");
		border-style:solid none;
		border-color:#8ea4d0;
		border-width:3px;
		color:#8ea4d0;
		font-family:BP_typ,monospace;
		font-size:0.85em;
		font-weight:bold;
		letter-spacing:2px
	}
	& .pages {
		display:grid;
		grid-template-columns:repeat(6,1fr);
		grid-row-gap:20px;
		align-items:center;
		justify-content:center;
		padding:20px;
		& > a {
			display:inline-block;
			width:max-content;
			height:max-content;
			margin:auto;
			&.disabled {
				cursor:default;
				pointer-events:none;
				box-shadow:0 0 1px #888;
				& > img {
					filter:brightness(0);
					box-shadow:none
				}
			}
			& > img {
				height:91px;
				width:96px;
				border:5px solid #000;
				box-shadow:0 0 4px #eee;
				filter:grayscale(90%);
				&:hover {
					filter:brightness(150%);
					border:5px double #8ea4d0;
					box-shadow:0 0 12px #eee;
					transition:all .5s ease-in-out;
				}
			}
		}
	}
}

/*
███    ███  ██████  ██████  ██ ██      ███████     ██       █████  ██    ██  ██████  ██    ██ ████████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██  ██  ██  ██    ██ ██    ██    ██    
██ ████ ██ ██    ██ ██████  ██ ██      █████       ██      ███████   ████   ██    ██ ██    ██    ██    
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██    ██    ██    ██ ██    ██    ██    
██      ██  ██████  ██████  ██ ███████ ███████     ███████ ██   ██    ██     ██████   ██████     ██    
*/
/* Transitional adjustments */
@media only screen and (width <= 1280px) {
	#screen-right .pages {
		grid-template-columns:repeat(auto-fit,minmax(120px,1fr))
	}
}
/* Proper mobile layout */
@media only screen and (width <= 960px) {
	#container {
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr;
		gap:0
	}
	#screen-left {
		grid-template-rows:repeat(3,auto);
		height:auto
	}
	#chapter-select {
		height:300px
	}
	#filter {
		border-bottom:5px solid #a7a7a759
	}
	#screen-right {
		height:50%;
	}
	#screen-right .pages {
		row-gap:30px;
		& a {
			position:relative;
			&::before {
				content:var(--number); /* --number is set by archive.js */
				position:absolute;
				left:50%;
				bottom:-1.2em;
				transform:translateX(-50%);
				pointer-events:none;
				color:#d1e6ef;
				font-family:CourierPrime,monospace;
				font-size:0.8em;
				font-weight:normal;
				text-decoration:none;
			}
		}
	}
}