@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
:root{
	--bg: #2d3441;
	--font: #c5c8c6;
	--fontFamily: 'JetBrains Mono', monospace;
	--fontSize: 14px;
	--lineStartUser: #e89996;
	--lineStartUrl: #f4bf76;
	--lineStartPath: #8fbcc6;
}
.material-symbols-outlined {
	font-variation-settings:
		'FILL' 0,
		'wght' 400,
		'GRAD' 200,
		'opsz' 24;
	font-size: var(--fontSize);
}
body{
	background-color: var(--bg);
	color: var(--font);
	margin: 0;
	padding: 0;
	font-family: var(--fontFamily);
	font-size: var(--fontSize);
	font-weight: 400;
	width: 100%;
	height: 100%;
	overflow: auto;
	margin: 0;
}
.container{
	display: flex;
	height: 100%;
	min-height: 100vh;
	min-height: 100dvh;
	width: 100%;
}
.sh{
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	padding: 10px;
}
p{
	margin: 0;
	padding: 0;
}
.head{
	margin-bottom: 25px;
}

code{
	background-color: rgba(255, 255, 255, 0.1);
	padding: 2px 4px;
	border-radius: 4px;
}

.line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    word-break: break-word;
	line-height: 1.4;
}
.linestart {
    flex-shrink: 0;
}
.linestart .user{
	color: var(--lineStartUser);
}
.linestart .url{
	color: var(--lineStartUrl);
}
.linestart .path{
	color: var(--lineStartPath);
}
.line.output{
	flex-direction: column;
}

.command-input, .password-input {
    flex: 1; /* take remaining width */
    white-space: pre-wrap; /* allow wrapping */
    word-wrap: break-word;
    outline: none;
    font-family: var(--fontFamily);
    font-size: var(--fontSize);
    color: var(--font);
    min-height: 1em; /* at least one line */
	outline: none; /* removes focus outline */
    -webkit-user-modify: read-write-plaintext-only; /* tweak for Chrome */
    text-decoration: none;
}

.password-input {
    color: transparent;
	caret-color: var(--font);
}

.command-help-list{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
}

a{
	color: var(--lineStartPath);
	text-decoration: none;
}

/* Weather card */
.weather-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}
.weather-emoji {
	font-size: 3rem;
	line-height: 1;
}
.weather-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.weather-location {
	font-weight: 600;
	color: var(--lineStartUrl);
}

@media screen and (max-width: 875px) {
	.command-help-list{
		grid-template-columns: 1fr;
	}
}