@font-face {
	font-family: "Px437 IBM VGA8";
	src: url("../fonts/web_ibm_vga_8x16.woff") format('woff');
	font-display: block;
}
* {
	font-family: "Px437 IBM VGA8", monospace;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	font-weight: normal;
	box-sizing: border-box;
}

html, body {
	background: #000;
	color: #fff;
	margin: 0;
	padding: 0;
}

#terminal {
	padding: 2ch;
	width: 100%;
}

.line {
    white-space: pre-wrap;
	display: block;
	min-height: 1lh;
}

.pre {
    white-space: pre;
	display: inline-block;
	height: 1lh;
}

/*
padding: 2 x 2ch  =  32px
columns: 2 x 20ch = 320px
gap:     1 x 1ch  =   8px
total:              360px
*/
@media (min-width: 360px) {
	.directory-grid {
		display: grid;
		grid-template-columns: repeat(2, 20ch);
		column-gap: 1ch;
	}
}
@media (max-width: 359px) {
	.directory-grid {
		grid-template-columns: repeat(1, 20ch);
	}
}

.directory-item {
	white-space: nowrap;
}

.list-grid {
    display: grid;
    grid-template-columns: 16ch 1fr;
	column-gap: 1ch;
}

.list-grid .items {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1ch;
    row-gap: 0;
    min-width: 0;
}

.list-grid .items > *:not(:last-child)::after {
    content: ",";
}

.list-grid > .label {
    display: grid;
    grid-template-columns: 1fr auto;
}

.list-grid.colon > .label::after {
    content: ":";
}

.list-grid.dash > .label::after {
    content: "-";
}

#input-line {
	display: flex;
	align-items: center;
}

#prompt {
	white-space: nowrap;
}

#prompt.hidden {
    display: none;
}

#command {
	width: 100%;
	flex: 1;
	background: transparent;
	border: 0;
	outline: none;
	color: #fff;
	padding: 0;
	margin: 0;
	caret-color: #fff;
}