:root {
	--catppuccin-mocha-peach: #fab387;
	--catppuccin-mocha-text: #cdd6f4;
	--catppuccin-mocha-subtext0: #a6adc8;
	--catppuccin-mocha-mantle: #181825;
	--catppuccin-mocha-crust: #11111b;

	--color-accent: var(--catppuccin-mocha-peach);
	--color-text: var(--catppuccin-mocha-text);
	--color-subtext0: var(--catppuccin-mocha-subtext0);
	--color-mantle: var(--catppuccin-mocha-mantle);
	--color-crust: var(--catppuccin-mocha-crust);
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--color-crust);
	color: var(--color-text);
	font-family:
		"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
		monospace;
}

body {
	min-height: 100vh;
	margin: 0;
	background: linear-gradient(180deg, var(--color-mantle), var(--color-crust));
}

.terminal-line {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	height: 4rem;
	padding: 1.1rem clamp(1rem, 4vw, 3rem);
	color: var(--color-accent);
	font-size: clamp(1rem, 2vw, 1.25rem);
}

.prompt {
	color: var(--color-subtext0);
}

.cursor {
	display: inline-block;
	width: 0.65rem;
	height: 1.2rem;
	background: var(--color-accent);
	animation: blink 1s steps(2, start) infinite;
	box-shadow: 0 0 1.4rem rgb(250 179 135 / 0.45);
}

@keyframes blink {
	50% {
		opacity: 0;
	}
}