html,
body {
	/*https://www.bram.us/2016/05/02/prevent-overscroll-bounce-in-ios-mobilesafari-pure-css/*/
	height: 100vh;
	width: 100vw;
	position: fixed;
	overflow: hidden;
	/*overscroll-behavior-y: none;*/
}
body {
	font-size: 1em;
	box-sizing: content-box;
	margin: 0;
	font-family: Simple Console;
	color: rgb(200,200,200);
	font-weight: 400;
	line-height: var(--line-height);
	background-color: black;
	--line-height: 19px;
	--display-mode: cols;   /* -- Internal use */
	--font-size-change: 1;  /* -- Internal use */
}
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;
	width: 100vw;
	height: 100vh;
	cursor: default !important;
}
hr {
	display: block;
	height: var(--line-height);
	margin: 0;
	padding: 0;
	border: none;
}
a {
	text-decoration: none;
	color: rgb(240,240,240);
	display: inline-block;
	touch-action: manipulation;
}
/* -- full width ------------------------------------------------ */
main {
	display: grid;
	max-width: calc(calc(15ch * 8) + calc(2ch * 6));
	grid-template-columns: 1fr 1fr 2fr 1fr 1fr 1fr 1fr;
	grid-gap: 2ch;
	position: absolute;
	left:2ch;
	margin-right: 2ch;
	top: 0;
}
main div {
	background-color: blue;
	box-sizing: border-box;
}
/* -- 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;
}