:root {
	color-scheme: dark;
	--font-main: 'FiraCode NF', monospace;
	--font-accent: 'MapleMono NF', monospace;
	--font-icons: 'FiraCode NF', 'MapleMono NF', monospace;
	--bg: #181825;
	--surface: #585b70;
	--surface2: #45475a;
	--overlay: #9399b2;
	--overlay2: #cdd6f4;
	--text: #cdd6f4;
	--muted: #a6adc8;
	--accent: #f38ba8;
	--border: #b4befe;

	--radius: 8px;
	--gap: 15px;
	--maxw: 520px;
}

:root[data-theme='light'] {
	color-scheme: light;
	--bg: #bcc0cc;
	--surface: #ccd0da;
	--surface2: #4c4f69;
	--muted: #5c5f72;
	--overlay2: #eff1f5;
	--text: #4c4f69;
	--accent: #7287fd;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

html {
	scrollbar-gutter: stable;
}

body {
	font-family: var(--font-main);
	font-variant-ligatures: contextual common-ligatures;
	font-feature-settings: 'liga' 1, 'calt' 1;
	background-color: var(--bg);
	color: var(--text);
}

.app {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

.content {
	flex: 1;
}

.icon {
	font-family: var(--font-icons);
}

.footer {
	margin-top: auto;
	padding: 24px 12px;
	text-align: center;
	font-size: 0.9rem;
}

.footer-quote,
#footer-quote {
	margin-bottom: 6px;
	opacity: 0.9;
	text-align: center;
}

.footer-contact {
	font-size: 0.85rem;
}

.footer a {
	color: var(--accent);
	text-decoration: none;
}

.footer a:hover {
	text-decoration: underline;
}