:root {
	color-scheme: dark;
	--bg: radial-gradient(circle at 20% 20%, #0d1117, #080b0e 80%);
	--fg: #e6edf3;
	--accent: #00ffaa;
	--font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font);
	background: var(--bg);
	color: var(--fg);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	opacity: 0;
	animation: fadeIn 0.8s ease forwards;
}
			
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 1rem;
	
	flex: 1;
	justify-content: center;
}

h1 {
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--accent);
	margin-bottom: 0.3rem;
}

p {
	color: var(--fg);
	opacity: 0.8;
	font-size: 1rem;
}

.links {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: min(90%, 320px);
}

a.link {
	text-decoration: none;
	color: var(--fg);
	border: 1px solid var(--accent);
	border-radius: 8px;
	padding: 0.75rem 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: 1rem;
	transition: all 0.2s ease;
}

a.link:hover {
	background: var(--accent);
	color: #000;
	box-shadow: 0 0 16px var(--accent);
	transform: translateY(-2px);
}

.link i.fa-github    { color: #c3c3c3; }
.link i.fa-steam     { color: #00adee; }
.link i.fa-trophy    { color: #ffd700; }
.link i.fa-instagram { color: #e1306c; }
.link i.fa-envelope  { color: #00ffaa; }

.link:hover i {
	color: #000;
}

footer {
	margin-top: 3rem;
	font-size: 0.9rem;
	opacity: 0.6;
	transition: opacity 0.2s ease;
}

footer:hover {
	opacity: 1;
	color: var(--accent);
}

@keyframes fadeIn {
	to { opacity: 1; }
}