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

#screen-left {
	display:grid;
	grid-template-rows:auto 1fr auto;
	height:100%;
	border-style:none solid none double;
	border-color:#a7a7a759;
	border-width:5px;
	overflow:hidden}
	#navigation {height:150px}
	#noise {
		display:grid;
		grid-template-rows:1fr;
		height:100%;
		background-image:url("/img/mat/black.gif");
		overflow:scroll;
		scrollbar-width:none;
		& > p {
			padding:0 30px;
			margin-top:50px;
			color:#d1e6ef;
			font-family:CourierPrime,monospace
		}
		& > span {
			opacity:0;
			display:block;
			width:100%;
			height:100%;
			background-image:url("/img/mat/nightmare.gif");
			color:#d1e6ef;
			font-family:BP_squares;
			font-size:4em;
			text-align:right;
			user-select:none;
			cursor:default;
			transition:opacity 30s ease-in-out
		}
		&:hover > span {opacity:0.3}
	}
	#filter {
		display:grid;
		grid-template-columns:1fr;
		align-items:center;
		height:75px;
		border-top:5px solid #a7a7a759;
		font-size:1.2em;
		font-family:CourierPrime,monospace;
		user-select:none
	}

#screen-right {
	position:relative;
	height:100%;
	border-style:none double none solid;
	border-color:#a7a7a759;
	border-width:5px;
	overflow:hidden;
	image-rendering:pixelated;
}
#rec-up,#rec-down {
	z-index:16;
	position:absolute;
	left:50%;
	transform:translateX(-50%);
	color:#aaa;
	font-size:40px;
	cursor:pointer;
	user-select:none;
	&:hover {color:#fff}
	&:active {color:rgb(255, 0, 0)}
}
	#rec-down {bottom:0}

#records {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	overflow:scroll;
	scroll-snap-type:y mandatory;
	& > p { /* Fallback message */
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%,-50%);
		font-family:CourierPrime,monospace;
	}
	& .record {
		display:grid;
		width:100%;
		height:100%;
		scroll-snap-align:start;
		/* Non-filter records */
		&.decor .record-item {
			filter:grayscale(20%);
			cursor:default;
			&:hover {border-color:#000;}
			&:active {opacity:1}
		}
		/* Toggled records */
		&.active .record-item {
			border-color:#fff!important;
			filter:none!important
		}
		/* Force-toggled records (can't switch off) */
		&.force-active .record-item {
			border-color:#ffffff!important;
			filter:none!important;
			pointer-events:none!important
		}
		/* Record cards */
		& .cardmark {grid-area: 1 / 2 / 3 / 3; max-height:100%; background-color: #ffffff; font-family:BP_Typ,monospace; font-weight:bold; font-size: 1.8em; color: #fff;  padding-top: 25px;}
		& .title {grid-area: 1 / 1 / 3 / 2; max-height:20%;}
		& .barcode {  grid-area: 2 / 3 / 3 / 4;  width: 100%;}
		& .record-item {
			display: grid;
			grid-template-columns: 2fr 1fr repeat(2, 6fr);
			grid-template-rows: 3fr 1fr;
			grid-column-gap: 0px;
			grid-row-gap: 0px;
			margin:auto;
			width:90%;
			border:10px solid #000000;
			border-style: solid none solid solid;
			cursor:pointer;
			user-select:none;
			filter:grayscale(90%);
			&:hover {border-color:#393939}
			&:active {opacity:0.75}
			& img {max-width:100%; max-height: 100%;}
			& img:last-of-type {grid-area: 1 / 4 / 3 / 5;}
			& p {
				grid-area: 1 / 3 / 2 / 4;
				height:fit-content;
				padding:1em;
				color:#ffffff;
				font-family:BP_Typ,monospace;
				font-size:1em;
				letter-spacing:2px;
				text-align: left;
			}
		}
		/* Record card colors */
		&.osix .record-item {background:linear-gradient(to right, #0000, #0000),url("/img/mat/red.gif")} .cardmark{background-color: rgb(0, 0, 0);}
		&.six .record-item {background:linear-gradient(to left, #0000, #000, #000, #000),url("/img/mat/blue.gif")}
		&.othirtyone .record-item {background:linear-gradient(to right, #0000, #0000),url("/img/mat/orange.gif");}
		&.thirtyone .record-item {background:linear-gradient(to left, #0000, #000, #000, #000),url("/img/mat/gray.gif")}
		&.ozero .record-item {background:linear-gradient(to left, #0000, #000, #000, #000),url("/img/mat/magenta.gif")}
		&.zero .record-item {background:linear-gradient(to right, #0000, #000, #000, #000),url("/img/mat/static.gif")}
		&.ten .record-item {background:linear-gradient(to left, #0000, #000, #000, #000),url("/img/mat/gray.gif")}
		&.admin .record-item {background:linear-gradient(to right, #0000, #000, #000, #000),url("/img/mat/static.gif")}
		&.fourtytwo .record-item {background:linear-gradient(to left, #0000, #000, #000, #000),url("/img/mat/gray.gif")}
		&.eightynine .record-item {background:linear-gradient(to left, #0000, #000, #000, #000),url("/img/mat/gray.gif")}
	}
}

/*
███    ███  ██████  ██████  ██ ██      ███████     ██       █████  ██    ██  ██████  ██    ██ ████████ 
████  ████ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██  ██  ██  ██    ██ ██    ██    ██    
██ ████ ██ ██    ██ ██████  ██ ██      █████       ██      ███████   ████   ██    ██ ██    ██    ██    
██  ██  ██ ██    ██ ██   ██ ██ ██      ██          ██      ██   ██    ██    ██    ██ ██    ██    ██    
██      ██  ██████  ██████  ██ ███████ ███████     ███████ ██   ██    ██     ██████   ██████     ██    
*/
@media only screen and (width <= 1280px) {
	#container {
		grid-template-columns:1fr;
		grid-template-rows:auto 1fr;
		gap:0
	}
	#screen-left, #screen-right {height:auto;border-style:none solid}
	#screen-left {grid-template-rows:1fr auto}
	#SIXTEEN {display:none!important}
	#noise {
		border-bottom:5px solid #a7a7a759;
		& > p {margin:1em 0}
	}
	.record-item {
		width:95%!important;
		& p {display:none}
	}
}