:root {
	--slate-950: oklch(12.9% 0.042 264.695);
	--neutral-300: oklch(87% 0 0);
	--amber-500: oklch(76.9% 0.188 70.08);
	--emerald-500: oklch(69.6% 0.17 162.48);
}

* {
	padding: 0;
	margin: 0;
	font-family: "Fira Code", monospace;
	background-color: var(--slate-950);
}

.main-container {
	font-size: clamp(0.85rem, 1vw + 0.5rem, 1rem);
	color: var(--neutral-300);
	height: 100vh;
	max-width: 1200px;
	margin: 1rem auto;
	padding: 1rem 2rem;
}

/*########################
*
*  INTRODUCTION AND HELP
*
* ########################
*/

.introduction-container {
	padding-bottom: 1.5rem;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto;
	grid-template-areas:
		"name art"
		"text art";
	column-gap: 3rem;
}

.ascii-name,
.ascii-art {
	font-size: clamp(0.5rem, 0.9vw, 1rem);
}

.ascii-name {
	grid-area: name;
	padding: 1rem 0;
}

.ascii-art {
	grid-area: art;
}

.introduction-text__container {
	grid-area: text;
}

.introduction-text {
	padding: 0.25rem 0;
}

.help-text {
	color: var(--emerald-500);
}

.terminal-link {
	font-weight: 700;
	color: var(--amber-500);
}


/*########################
*
*	   PROMPT & INPUT
*
* ########################
*/

.input-container,
.output-container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	padding: 1rem 0;
	gap: .5rem;
}

.prompt {
	font-weight: 700;
	flex-shrink: 0;
	white-space: nowrap;
	/* padding-right: 1rem; */
}

.username {
	color: var(--amber-500);
}

.hostname {
	color: var(--emerald-500);
}

input {
	all: unset;
}

.prompt-text {
	flex: 1 1 0;
	min-width: 360px;
	white-space: pre-wrap;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/*########################
*
*	   COMMAND OUTPUTS
*
* ########################
*/

/*########################
*
*	   MEDIA QUERIES
*
* ########################
*/

@media (max-width: 768px) {
	.introduction-container {
		grid-template-columns: 1fr;
		grid-template-areas:
			"name"
			"text";
	}

	.ascii-art {
		display: none;
	}

	.main-container {
		padding: 1rem;
	}

	.prompt-command,
	.prompt-text {
		padding-left: 0.25rem;
	}
}


.help-dt {
	color: var(--emerald-500);
	font-weight: 700;
}