* {
	--line-height: 19px;
	--display-mode: cols;   /* -- Internal use */
	--font-size-change: 1;  /* -- Internal use */
	--c1: 18ch;
	--c2: 36ch;
}

html,
body {
	min-width: 100%;
	min-height: 100vh;
	overscroll-behavior-y: none;
}
body {
	font-size: 1em;
	box-sizing: content-box;
	margin: 0;
	font-family: Simple Console;
	color: rgb(190,190,190);
	font-weight: 400;
	line-height: var(--line-height);
	background-color: black;
}
pre {
	background-color: inherit; /* Safari fullscreen needs a BG color*/
	line-height: inherit;
	font-family: inherit;
	font-size: inherit;
	position: absolute;
	margin: 0;
	padding: 0;
	left: 0;
	top: 0;
	/* The size is set by js.js: max(window, content) */
	min-width: 100%;
	min-height: 100vh;
	cursor: default !important;
}
hr {
	display: block;
	height: var(--line-height);
	margin: 0;
	padding: 0;
	border: none;
}
a {
	text-decoration: none;
	color: rgb(250,250,250);
	display: inline-block;
	touch-action: manipulation;
}
pre strong {font-family:inherit;font-weight:700;}
pre code {font-family:inherit;font-size:inherit;}
/* -- full width ------------------------------------------------ */
main {
	display: grid;
	grid-template-columns: var(--c1) var(--c2) var(--c1) var(--c1) var(--c1) var(--c1) var(--c1) var(--c1);
	grid-gap: 2ch;
	position: absolute;
	left:2ch;
	margin-right: 2ch;
	top: 0;
}
main div {
	background-color: blue;
	box-sizing: border-box;
}
/* Swap visual slots only: old 7 -> 3, old 3 -> 5, old 5 -> 7. */
main > div:nth-child(1) { order: 1; }
main > div:nth-child(2) { order: 2; }
main > div:nth-child(3) { order: 5; }
main > div:nth-child(4) { order: 4; }
main > div:nth-child(5) { order: 7; }
main > div:nth-child(6) { order: 6; }
main > div:nth-child(7) { order: 3; }
/* -- smaller screens ------------------------------------------- */
@media only screen and (max-width: 120ch){
	body {
		--display-mode: rows;  /* -- Internal use */
		--font-size-change: 1; /* -- Internal use */
	}
	main {
		grid-template-columns: 1fr 1fr;
		left: 1ch;
		top: var(--line-height);
		max-width: 60ch;
		/*grid-gap: calc(var(--line-height) * 1) 1ch;*/
		grid-gap: calc(var(--line-height) * 1) 2ch;
	}
	main div {
		min-height: calc(var(--line-height) * 3);
		margin-bottom: var(--line-height);
	}

	.span {
		grid-column: span 2;
		grid-column: 2;
	}
}

/* -- tiny screens ---------------------------------------------- */
@media only screen and (max-width: 400px){
	body {
		--display-mode: rows;  /* -- Internal use */
		--font-size-change: 2; /* -- Internal use */
		--line-height: 16px;
		font-size: 0.8em;
	}
}

/* -- helpers --------------------------------------------------- */
.disable-scroll {
	bottom:0;
	overflow: hidden;
	position: fixed;
}
.disable-pointer {
	pointer-events: none;
}
.invisible {
	visibility: hidden;
}