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

#share-link {
	position:absolute;
	bottom:10px;
	right:10px;
	& img {
		user-select:none;
		cursor:pointer;
		opacity:0.5;
		&:hover {opacity:1}
	}
	&:active img {opacity:0.5}
	&::before {
		content:'Page link copied to clipboard';
		vertical-align:60%;
		opacity:0;
		font-family:CourierPrime,monospace;
		text-shadow:0 0 4px #000, 0 0 8px #000;
		margin-right:1em;
		transition:opacity 0.3s linear
	}
	&.active::before {opacity:0.9}
}

.port-notif {
	font-family:CourierPrime,monospace;
	color: #fff !important;
	border-bottom:3px solid #a7a7a759;
	padding: 10px;
}

#screen-left {
	display:grid;
	grid-template-rows:150px auto 1fr;
	border-right:5px solid #a7a7a759;
	border-left: 5px double #a7a7a759;
	height:100%
}
	#page-title {
		margin:0;
		padding:1em;
		border-bottom:5px solid #a7a7a759;
		font-family:DINish,sans-serif;
		color:#d1e6ef;
		& span {
			display:block;
			font-size:0.8rem;
			font-family:CourierPrime,monospace
		}
	}
	#page-description {
		font-family:DINish,sans-serif;
		padding:1em;
		font-size:1.1em;
		color:#d1e6ef;
		height:0;
		min-height:100%;
		overflow:hidden scroll
	}

#screen-right {
	border-left: 5px solid #a7a7a759;
	border-right:5px double #a7a7a759;
	height:100%;
	overflow:scroll;
	scrollbar-width:none;
}
	#page-images {
		& img {display:block;width:100%}
	}
	#page-nav {
		display:grid;
		grid-template-columns:repeat(4,1fr);
		height:100px;
		padding:0 10%;
		border-top:5px solid #a7a7a759;
		& > span {
			background-size:100% 100%;
			cursor:pointer;
			user-select:none;
			&.disabled{opacity:0;pointer-events:none}}
	}
		#page-first {
			background-image:url("/img/comicnav/nav_first.gif");
			&:hover {
				background-image:url("/img/comicnav/nav_firstinv.gif")
			}
		}
		#page-prev {
			background-image:url("/img/comicnav/nav_previous.gif");
			&:hover {
				background-image:url("/img/comicnav/nav_previousinv.gif")
			}
		}
		#page-next {
			background-image:url("/img/comicnav/nav_next.gif");
			&:hover {
				background-image:url("/img/comicnav/nav_nextinv.gif")
			}
		}
		#page-last {
			background-image:url("/img/comicnav/nav_last.gif");
			&:hover {
				background-image:url("/img/comicnav/nav_lastinv.gif")
			}
		}

/*
███    ███  ██████  ██████  ██ ██      ███████     ██       █████  ██    ██  ██████  ██    ██ ████████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██  ██  ██  ██    ██ ██    ██    ██    
██ ████ ██ ██    ██ ██████  ██ ██      █████       ██      ███████   ████   ██    ██ ██    ██    ██    
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██    ██    ██    ██ ██    ██    ██    
██      ██  ██████  ██████  ██ ███████ ███████     ███████ ██   ██    ██     ██████   ██████     ██    
*/
@media only screen and (width <= 960px) {
	#container {
		grid-template-columns:1fr;
		gap:0;
		padding-bottom:0;
		height:auto
	}
	#screen-left {
		grid-template-rows:repeat(3,auto);
		height:auto;
		border-style:none solid;
		&.filter {grid-template-rows:repeat(4,auto)}
	}
	#screen-right {
		height:auto;
		border-style:none solid;
		min-height:max-content
	}
	#page-description {
		height:auto;
		min-height:initial;
		border-bottom:5px solid #a7a7a759
	}
	#page-nav {
		height:auto;
		aspect-ratio:6/1
	}
	#share-link {display:none}
}