:root {

	/* Typography */
	--font-main: 'Inter', sans-serif;

	/* Dark theme (default) */
	--color-bg-start: #0f172a;
	--color-bg-end: #1e293b;

	--color-text-main: #ffffff;
	--color-text-muted: #94a3b8;
	--color-text-secondary: #cbd5e1;

	--color-accent-1: #38bdf8;
	--color-accent-2: #6366f1;

	--button-bg: rgba(255, 255, 255, 0.08);
	--button-border: rgba(255, 255, 255, 0.1);

	--profile-border: rgba(255, 255, 255, 0.15);

	--shadow-profile: 0 10px 30px rgba(0, 0, 0, 0.5);

}

/* Light mode override */

@media (prefers-color-scheme: light) {

	:root {

		--color-bg-start: #f8fafc;
		--color-bg-end: #e2e8f0;

		--color-text-main: #0f172a;
		--color-text-muted: #475569;
		--color-text-secondary: #334155;

		--button-bg: rgba(0, 0, 0, 0.05);
		--button-border: rgba(0, 0, 0, 0.08);

		--profile-border: rgba(0, 0, 0, 0.08);

		--shadow-profile: 0 10px 30px rgba(0, 0, 0, 0.15);

	}

}

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

body {

	font-family: var(--font-main);

	background: linear-gradient(135deg,
			var(--color-bg-start),
			var(--color-bg-end));

	color: var(--color-text-main);

	height: 100vh;

	display: flex;
	align-items: center;
	justify-content: center;

	text-align: center;

	transition: background 0.3s ease, color 0.3s ease;

}

.container {

	max-width: 700px;
	padding: 40px;

}

.hero {

	margin-bottom: 30px;

}

.profile-image {

	width: 140px;
	height: 140px;

	border-radius: 50%;

	object-fit: cover;

	border: 4px solid var(--profile-border);

	margin-bottom: 25px;

	box-shadow: var(--shadow-profile);

}

h1 {

	font-size: 3.5rem;
	font-weight: 800;
	font-family: "Goldman", sans-serif;

	background: linear-gradient(90deg,
			var(--color-accent-1),
			var(--color-accent-2));

	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	margin-bottom: 10px;

}

h2 {

	font-size: 1.3rem;
	font-weight: 300;

	color: var(--color-text-secondary);

	margin-bottom: 20px;

}

p {

	color: var(--color-text-muted);

	line-height: 1.6;

	margin-bottom: 40px;

}

.socials {

	display: flex;
	justify-content: center;
	gap: 20px;

	flex-wrap: wrap;

}

.socials a {

	text-decoration: none;

	color: var(--color-text-main);

	padding: 12px 24px;

	border-radius: 50px;

	background: var(--button-bg);

	border: 1px solid var(--button-border);

	transition: all .3s ease;

}

.socials a:hover {

	background: linear-gradient(90deg,
			var(--color-accent-1),
			var(--color-accent-2));

	transform: translateY(-4px);

	color: white;

}

footer {

	position: absolute;
	bottom: 20px;

	font-size: 0.8rem;

	color: var(--color-text-muted);

}

@media (max-width:768px) {

	h1 {
		font-size: 2.4rem;
	}

	.profile-image {
		width: 110px;
		height: 110px;
	}

}