:root {
	--lu-blue: #356DF1; /* Primary LearnUpon Blue */
	--lu-green: #2FCF7E; /* BotUpon "Upon" Green */
	--lu-light-blue: #88CCF1; /* Accent Light Blue */
	--background-color: #f7f9fc;
	--text-color: #333;
	--header-bg: #1c273b; /* Darker tone for contrast */
}

/* Base Reset and Poppins Font */
body {
	font-family: 'Poppins', sans-serif;
	line-height: 1.6;
	margin: 0;
	padding: 0;
	background-color: var(--background-color);
	color: var(--text-color);
}

h1, h2, h3 {
	font-weight: 600;
	color: var(--lu-blue);
}

header {
	background-color: var(--header-bg);
	color: #fff;
	padding: 40px 20px;
	text-align: center;
	border-bottom: 8px solid var(--lu-blue);
}

.logo-container {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.logo {
	/* Use a fixed size for the logo icon/image */
	width: 60px;
	height: 60px;
	margin-right: 15px;
	/* Placeholder style if you don't use the image */
}

header h1 {
	font-size: 3em;
	color: #fff; /* Title text is white on dark background */
	margin: 0;
}

.upon-text {
	color: var(--lu-green);
}

header h2 {
	font-size: 1.2em;
	font-weight: 400;
	margin: 5px 0 10px 0;
	color: var(--lu-light-blue);
}

.tagline-sub {
	font-weight: 400;
	color: #ddd;
	font-size: 0.9em;
}

/* Main Content Styling */
main {
	max-width: 1000px;
	margin: 40px auto;
	padding: 0 20px;
}

section {
	background: #fff;
	padding: 30px;
	margin-bottom: 30px;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Command List Section */
.command-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 20px;
}

.command-item {
	padding: 15px;
	border-left: 5px solid var(--lu-green);
	background-color: #f9fff8; /* Very light green background */
	border-radius: 4px;
}

.command-title {
	font-weight: 700;
	font-size: 1.1em;
	color: var(--lu-blue);
	display: block;
	margin-bottom: 5px;
}

.command-description {
	font-size: 0.95em;
	color: #555;
	display: block;
	margin-bottom: 8px;
}

.command-example {
	font-family: monospace;
	background-color: #eee;
	padding: 3px 8px;
	border-radius: 3px;
	color: #1c273b;
	font-size: 0.9em;
}

.cta {
	text-align: center;
	margin-top: 30px;
	font-style: italic;
	color: var(--lu-blue);
}

/* Footer Styling */
footer {
	text-align: center;
	padding: 20px;
	margin-top: 30px;
	font-size: 0.8em;
	color: #999;
	border-top: 1px solid #eee;
}

/* Responsive adjustments */
@media (min-width: 768px) {
	.command-list {
		grid-template-columns: 1fr 1fr; /* Two columns on larger screens */
	}
}