:root {
	--primary-color: oklch(14.077% 0.0044 285.776);
	--primary-color-90: oklch(14.077% 0.0044 285.776 / 0.9);
	--primary-color-80: oklch(14.077% 0.0044 285.776 / 0.8);
	--primary-color-70: oklch(14.077% 0.0044 285.776 / 0.7);
	--primary-color-60: oklch(14.077% 0.0044 285.776 / 0.6);
	--primary-color-50: oklch(14.077% 0.0044 285.776 / 0.5);
	--primary-color-40: oklch(14.077% 0.0044 285.776 / 0.4);
	--primary-color-30: oklch(14.077% 0.0044 285.776 / 0.3);
	--primary-color-20: oklch(14.077% 0.0044 285.776 / 0.2);
	--primary-color-10: oklch(14.077% 0.0044 285.776 / 0.1);
	--primary-color-0: oklch(14.077% 0.0044 285.776 / 0);
	--secondary-color: oklch(55.167% 0.01387 285.878);
	--secondary-color-90: oklch(55.167% 0.01387 285.878 / 0.9);
	--secondary-color-80: oklch(55.167% 0.01387 285.878 / 0.8);
	--secondary-color-70: lch(47.91% 5.31 290.9 / 0.7);
	--secondary-color-60: oklch(55.167% 0.01387 285.878 / 0.6);
	--secondary-color-50: oklch(55.167% 0.01387 285.878 / 0.5);
	--secondary-color-40: oklch(55.167% 0.01387 285.878 / 0.4);
	--secondary-color-30: oklch(55.167% 0.01387 285.878 / 0.3);
	--secondary-color-20: oklch(55.167% 0.01387 285.878 / 0.2);
	--secondary-color-10: oklch(55.167% 0.01387 285.878 / 0.1);
	--primary-bg-color: oklch(100% 0.00011 271.152);
	--secondary-bg-color: oklch(97.343% 0.00143 285.217);
	--input-shadow: 0 1px 2px 0 oklch(0% 0 0 / 0.05);
	--btn-shadow: 0 1px 3px 0 oklch(0% 0 0 / 0.1), 0 1px 2px -1px oklch(0% 0 0 / 0.1);
	--btn-primary-hover-bg: oklch(21.033% 0.00588 285.832);
	--btn-primary-hover-border: oklch(21.033% 0.00588 285.832);
	--btn-secondary-hover-bg: oklch(96.744% 0.00143 285.225);
	--btn-secondary-hover-border: oklch(96.744% 0.00143 285.225);
	--success-color: oklch(73.157% 0.1782 152.847);
	--success-color-rgb: 40, 199, 111;
	--error-color: oklch(57.707% 0.21516 27.312);
	--error-color-90: oklch(57.707% 0.21516 27.312 / 0.9);
	--error-color-80: oklch(57.707% 0.21516 27.312 / 0.8);
	--error-color-70: oklch(57.707% 0.21516 27.312 / 0.7);
	--error-color-60: oklch(57.707% 0.21516 27.312 / 0.6);
	--error-color-50: oklch(57.707% 0.21516 27.312 / 0.5);
	--error-color-40: oklch(57.707% 0.21516 27.312 / 0.4);
	--error-color-30: oklch(57.707% 0.21516 27.312 / 0.3);
	--error-color-20: oklch(57.707% 0.21516 27.312 / 0.2);
	--error-color-10: oklch(57.707% 0.21516 27.312 / 0.1);
	--warning-color: oklch(78.506% 0.15394 60.676);
	--warning-color-90: oklch(78.506% 0.15394 60.676 / 0.9);
	--warning-color-80: oklch(78.506% 0.15394 60.676 / 0.8);
	--warning-color-70: oklch(78.506% 0.15394 60.676 / 0.7);
	--warning-color-60: oklch(78.506% 0.15394 60.676 / 0.6);
	--warning-color-50: oklch(78.506% 0.15394 60.676 / 0.5);
	--warning-color-40: oklch(78.506% 0.15394 60.676 / 0.4);
	--warning-color-30: oklch(78.506% 0.15394 60.676 / 0.3);
	--warning-color-20: oklch(78.506% 0.15394 60.676 / 0.2);
	--warning-color-10: oklch(78.506% 0.15394 60.676 / 0.1);
}

/* Dark mode colors */
body.dark-mode {
	--primary-color: oklch(95% 0.0044 285.776);
	--primary-color-90: oklch(95% 0.0044 285.776 / 0.9);
	--primary-color-80: oklch(95% 0.0044 285.776 / 0.8);
	--primary-color-70: oklch(95% 0.0044 285.776 / 0.7);
	--primary-color-60: oklch(95% 0.0044 285.776 / 0.6);
	--primary-color-50: oklch(95% 0.0044 285.776 / 0.5);
	--primary-color-40: oklch(95% 0.0044 285.776 / 0.4);
	--primary-color-30: oklch(95% 0.0044 285.776 / 0.3);
	--primary-color-20: oklch(95% 0.0044 285.776 / 0.2);
	--primary-color-10: oklch(95% 0.0044 285.776 / 0.1);
	--primary-color-0: oklch(95% 0.0044 285.776 / 0);
	--secondary-color: oklch(70% 0.01387 285.878);
	--secondary-color-90: oklch(70% 0.01387 285.878 / 0.9);
	--secondary-color-80: oklch(70% 0.01387 285.878 / 0.8);
	--secondary-color-70: oklch(70% 0.01387 285.878 / 0.7);
	--secondary-color-60: oklch(70% 0.01387 285.878 / 0.6);
	--secondary-color-50: oklch(70% 0.01387 285.878 / 0.5);
	--secondary-color-40: oklch(70% 0.01387 285.878 / 0.4);
	--secondary-color-30: oklch(70% 0.01387 285.878 / 0.3);
	--secondary-color-20: oklch(70% 0.01387 285.878 / 0.2);
	--secondary-color-10: oklch(70% 0.01387 285.878 / 0.1);
	--primary-bg-color: oklch(15.155% 0.00853 285.317);
	--secondary-bg-color: oklch(20% 0.015 285.217);
	--input-shadow: 0 1px 2px 0 oklch(0% 0 0 / 0.3);
	--btn-shadow: 0 1px 3px 0 oklch(0% 0 0 / 0.5), 0 1px 2px -1px oklch(0% 0 0 / 0.5);
	--success-color-bg: oklch(25% 0.08 152.961);
	--success-color-border: oklch(35% 0.12 152.18);
	--success-color-text: oklch(75% 0.15 147.275);
	--btn-primary-hover-bg: oklch(79.837% 0.00009 271.152);
	--btn-primary-hover-border: oklch(79.837% 0.00009 271.152);
	--btn-secondary-hover-bg: oklch(25% 0.00143 285.225);
	--btn-secondary-hover-border: oklch(25% 0.00143 285.225);
}

body {
	background-color: var(--primary-bg-color);
	color: var(--primary-color);
}

@font-face {
	font-family: __Inter_a64ecd;
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://ui.shadcn.com/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2) format('woff2');
	unicode-range:
		U+00??, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+0304, U+0308, U+0329, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+feff,
		U+fffd;
}

@font-face {
	font-family: Geist;
	src: url(../fonts/Geist.woff2) format('woff2');
	font-display: swap;
	font-weight: 100 900;
}

@font-face {
	font-family: GeistMono;
	src: url(../fonts/GeistMono[wght].woff2) format('woff2');
	font-display: swap;
	font-weight: 100 900;
}

@font-face {
	font-family: 'LucideIcons';
	src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
}

* {
	font-family:
		'Geist',
		'Inter',
		ui-sans-serif,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		Segoe UI,
		Roboto,
		Helvetica Neue,
		Arial,
		Noto Sans,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji',
		Segoe UI Symbol,
		'Noto Color Emoji';
	font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--primary-color);
	font-weight: 600;
}

.text-inline {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	min-width: 0;
	width: 100%;
	justify-content: space-between;
}

.text-inline .label {
	color: var(--secondary-color);
}

.text-sm {
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.text-md {
	font-size: 1rem;
	line-height: 1.5rem;
}

.text-lg {
	font-size: 1.125rem;
	line-height: 1.75rem;
}

.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.text-capitalize {
	text-transform: capitalize;
}

.text-center {
	text-align: center;
}

.text-regular {
	font-weight: 400;
}

.text-semibold {
	font-weight: 500;
}

.text-bold {
	font-weight: 600;
}

.text-primary {
	color: var(--primary-color);
}

.text-secondary,
.text-muted {
	color: var(--secondary-color);
}

header {
	position: fixed;
	top: 1rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 80rem;
	width: 90%;
	margin-block: 0.5rem 0;
	padding: 1rem 1.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--primary-color-10);
	background: oklch(100% 0.00011 271.152 / 0.2);
	box-shadow: 0 4px 30px oklch(0% 0 0 / 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	z-index: 1000;
}

body.dark-mode header {
	background: oklch(15% 0.01 285.776 / 0.8);
	border: 1px solid var(--primary-color-20);
}

header span {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--primary-color);
	text-shadow: 1px 1px 2px oklch(0% 0 0 / 0.1);
}

header nav ul {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	list-style: none;
}

header nav ul li a {
	text-decoration: none;
	color: var(--primary-color);
	font-weight: 500;
	border-radius: 0.375rem;
	padding: 0.5rem 0.75rem;
	transition: all 0.2s ease-in-out;
}

header nav ul li a.active {
	background-color: var(--primary-color);
	color: var(--primary-bg-color);
}

header nav ul li a:not(.active):hover {
	background-color: var(--secondary-bg-color);
}

/* Dark mode toggle button */
.dark-mode-toggle {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	border-radius: 0.375rem;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s ease-in-out;
	position: relative;
	width: 2.5rem;
	height: 2.5rem;
}

.dark-mode-toggle:hover {
	background-color: var(--secondary-bg-color);
}

.dark-mode-toggle i {
	font-size: 1.25rem;
	color: var(--primary-color);
	position: absolute;
	transition:
		opacity 0.3s ease,
		transform 0.3s ease;
}

.dark-mode-toggle .fa-moon {
	opacity: 1;
	transform: rotate(0deg);
}

.dark-mode-toggle .fa-sun {
	opacity: 0;
	transform: rotate(180deg);
}

body.dark-mode .dark-mode-toggle .fa-moon {
	opacity: 0;
	transform: rotate(180deg);
}

body.dark-mode .dark-mode-toggle .fa-sun {
	opacity: 1;
	transform: rotate(0deg);
}

#hamburger-toggle {
	display: none;
}

.hamburger {
	width: 30px;
	height: 30px;
	display: none;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	position: absolute;
	right: 25px;
}

.hamburger .bar {
	display: inline-block;
	width: 30px;
	height: 2px;
	background-color: var(--primary-color);
	position: relative;
	transition: all 0.3s;
}

.hamburger .bar::before,
.hamburger .bar::after {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: var(--primary-color);
	transition: all 0.3s;
}

.hamburger .bar::before {
	transform: translateY(-10px);
}

.hamburger .bar::after {
	transform: translateY(10px);
}

.nav-toggle {
	display: none;
}

.nav-toggle-label {
	display: none;
}

.mobile-menu {
	display: none;
}

.mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0.5rem 1.5rem 1rem;
}

@media screen and (max-width: 850px) {
	header {
		max-width: 95vw;
		background: var(--primary-bg-color);
	}

	header h1 {
		font-size: 1.5rem;
	}

	header nav ul {
		display: none;
	}

	.mobile-menu {
		display: block;
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		max-width: 90vw;
		border-radius: 0.5rem;
		border: 1px solid var(--primary-color-10);
		background: var(--primary-bg-color);
		box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		z-index: 1000;
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease;
		z-index: 999;
	}

	.mobile-menu ul {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.mobile-menu li {
		text-decoration: none;
		color: var(--primary-color);
		font-weight: 500;
		border-radius: 0.375rem;
		text-align: center;
		width: 100%;
		transition: all 0.2s ease-in-out;
	}

	.mobile-menu ul li a {
		display: block;
		width: 100%;
		text-decoration: none;
		color: var(--primary-color);
		font-weight: 500;
		border-radius: 0.375rem;
		padding: 0.5rem 1rem;
		transition: all 0.2s ease-in-out;
	}

	.mobile-menu li a.active {
		background-color: var(--primary-color);
		color: var(--primary-bg-color);
	}

	.mobile-menu li a:not(.active):hover {
		background-color: var(--secondary-bg-color);
	}

	body:has(#nav-toggle:checked) .mobile-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(5%);
	}

	.hamburger {
		display: flex;
		z-index: 999;
	}

	.dark-mode-toggle {
		margin-right: 3rem;
	}

	#nav-toggle:checked ~ .mobile-menu {
		transform: none;
	}

	#nav-toggle:checked ~ .hamburger .bar::before {
		transform: rotate(45deg);
	}

	#nav-toggle:checked ~ .hamburger .bar {
		background-color: transparent;
	}

	#nav-toggle:checked ~ .hamburger .bar::after {
		transform: rotate(-45deg);
	}

	body:has(#nav-toggle:checked) {
		overflow: hidden;
	}
}

main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin-top: 6rem;
}

.container {
	max-width: 80rem;
	margin: 5rem auto;
	padding: 2rem 1.5rem;
}

#glow {
	position: fixed;
	top: -100px;
	left: -100px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, oklch(73.157% 0.1782 152.847 / 0.15), transparent 70%);
	pointer-events: none;
	z-index: -1;
	transition: all 0.125s ease-out;
}

.page-header {
	margin-block: 4rem;
	text-align: center;

	h1 {
		position: relative;
		font-size: 2rem;
		font-weight: 600;
		color: var(--primary-color);

		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 300px;
			height: 300px;
			background: radial-gradient(circle, oklch(73.157% 0.1782 152.847 / 0.3), transparent 70%);
			pointer-events: none;
			transform: translate(-50%, 40%);
			z-index: -1;
		}
	}

	p {
		font-size: 1.125rem;
		color: var(--secondary-color);
	}
}

/* Button */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: calc(0.5rem - 2px);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
	height: 2.25rem;
	box-shadow: var(--btn-shadow);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.15s ease-in-out;
}

.btn-primary {
	color: var(--primary-bg-color);
	background-color: var(--primary-color);
	border: 1px solid var(--primary-color);
}

.btn-primary:hover {
	background-color: var(--btn-primary-hover-bg);
	border: 1px solid var(--btn-primary-hover-border);
}

.btn-secondary {
	color: var(--primary-color);
	background-color: var(--primary-bg-color);
	border: 1px solid var(--btn-secondary-hover-border);
}

.btn-secondary:hover {
	background-color: var(--btn-secondary-hover-bg);
}

.btn-icon,
.btn-small-icon {
	padding-left: 0.75rem;
}

.input-group {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	font-weight: 500;
	color: var(--primary-color);
}

.input-group input,
.input-group textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border-radius: 0.5rem;
	border: 1px solid var(--primary-color-10);
	background: var(--secondary-bg-color);
	color: var(--primary-color);
	box-shadow: var(--input-shadow);
	transition:
		border-color 0.15s ease,
		box-shadow 0.15s ease;
}

.input-group input:focus,
.input-group textarea:focus {
	outline: none;
	border-color: var(--success-color);
	box-shadow: 0 0 0 3px rgba(var(--success-color-rgb), 0.15);
}

.input-group textarea {
	resize: vertical;
	min-height: 140px;
}

.hero {
	padding: 2rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: 4rem;

	> div {
		flex: 1;

		> h1 {
			position: relative;
			font-size: 2rem;
			font-weight: 600;
			margin-bottom: 1rem;

			> span {
				font-size: 2.75rem;
				font-weight: 700;
				color: var(--success-color);
			}

			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				width: 300px;
				height: 300px;
				background: radial-gradient(circle, oklch(73.157% 0.1782 152.847 / 0.2), transparent 70%);
				pointer-events: none;
				transform: translate(0%, 30%);
				z-index: -1;
			}
		}
	}

	.hero-image {
		width: 300px;
		height: 300px;
		border-radius: 50%;
		box-shadow:
			0 10px 30px oklch(73.157% 0.1782 152.847 / 0.3),
			0 4px 6px rgba(0, 0, 0, 0.1);
		object-fit: cover;
	}
}

.section-title {
	font-size: 1.5rem;
	font-weight: 600;
	text-transform: capitalize;
	margin-bottom: 1.5rem;
	text-align: center;
}

.section-title::before,
.section-title::after {
	content: '';
	display: inline-block;
	width: 4rem;
	height: 2px;
	background-color: var(--primary-color);
	margin: 0 1rem;
	vertical-align: middle;
}

@media (max-width: 450px) {
	.hero {
		flex-direction: column;
		text-align: center;
	}

	.hero h1 {
		font-size: 1.75rem;
	}

	.hero h1 span {
		font-size: 2.25rem;
	}

	.section-title::before,
	.section-title::after {
		display: none;
	}
}

@media (min-width: 768px) {
	.col-1 {
		max-width: 8.33%;
		flex: 0 0 8.33%;
	}

	.col-2 {
		max-width: 16.66%;
		flex: 0 0 16.66%;
	}

	.col-3 {
		max-width: 25%;
		flex: 0 0 25%;
	}

	.col-4 {
		max-width: 33.33%;
		flex: 0 0 33.33%;
	}

	.col-5 {
		max-width: 41.66%;
		flex: 0 0 41.66%;
	}

	.col-6 {
		max-width: 50%;
		flex: 0 0 50%;
	}

	.col-7 {
		max-width: 58.33%;
		flex: 0 0 58.33%;
	}

	.col-8 {
		max-width: 66.66%;
		flex: 0 0 66.66%;
	}

	.col-9 {
		max-width: 75%;
		flex: 0 0 75%;
	}

	.col-10 {
		max-width: 83.33%;
		flex: 0 0 83.33%;
	}

	.col-11 {
		max-width: 91.66%;
		flex: 0 0 91.66%;
	}

	.col-12 {
		max-width: 100%;
		flex: 0 0 100%;
	}
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
	position: relative;
	width: 100%;
}

.row {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	gap: 1.5rem;
}

.justify-center {
	justify-content: center;
}

.justify-between {
	justify-content: space-between;
}

.gallery {
	grid-area: gallery;
}

.cards {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	list-style: none;

	> li {
		position: relative;

		a {
			position: absolute;
			inset: 0;
			text-indent: 100%;
			white-space: nowrap;
			overflow: hidden;
		}

		img {
			width: 100%;
			height: auto;
			object-fit: cover;
			object-position: center;
			border-radius: 0.5rem;
			transition: transform 0.2s ease-in-out;
		}

		h3 {
			position: absolute;
			top: 0.75rem;
			left: 0.75rem;
			background: var(--primary-color-80);
			box-shadow: 0 4px 30px oklch(0% 0 0 / 0.1);
			backdrop-filter: blur(5px);
			-webkit-backdrop-filter: blur(5px);
			color: var(--primary-bg-color);
			padding: 0.5rem 0.75rem;
			border-radius: 0.375rem;
			font-size: 1rem;
			font-weight: 500;
			z-index: 10;
		}
	}
}

@media (min-width: 50rem) {
	.cards {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-auto-rows: 1fr;
		list-style: none;
		gap: 3rem;
		padding-bottom: 9.5rem;

		> li {
			position: relative;
			height: 22rem;
			border-radius: 0.5rem;
			box-shadow: var(--btn-shadow);
			overflow: hidden;

			a {
				position: absolute;
				inset: 0;
				text-indent: 100%;
				white-space: nowrap;
				overflow: hidden;
				transition: transform 0.2s ease-in-out;
			}

			img {
				width: 100%;
				height: auto;
				object-fit: cover;
				object-position: center;
				border-radius: 0.5rem;
				transition: transform 0.2s ease-in-out;
			}

			h3 {
				position: absolute;
				top: 0.75rem;
				left: 0.75rem;
				background: var(--primary-color-80);
				box-shadow: 0 4px 30px oklch(0% 0 0 / 0.1);
				backdrop-filter: blur(5px);
				-webkit-backdrop-filter: blur(5px);
				color: var(--primary-bg-color);
				padding: 0.5rem 0.75rem;
				border-radius: 0.375rem;
				font-size: 1.25rem;
				font-weight: 500;
				z-index: 10;
			}
		}

		> li:nth-child(odd) {
			transform: translateY(7.5rem);
		}

		> li:hover {
			img {
				transform: scale(1.05);
			}
		}
	}

	.cards-more {
		margin-top: 0;
	}
}

.cards-more {
	display: block;
	text-align: center;
	width: fit-content;
	margin: 1rem auto 0;
}

section:has(> .skills-cards) {
	margin-block: 4rem;
}

section:has(> .skills-cards) h2 {
	margin-bottom: 2rem;
	text-align: center;
}

.skills-cards {
	list-style-type: none;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1.5rem;

	li {
		flex: 20rem 0 1;
		min-width: 250px;
		padding: 1rem 1.5rem;
		border-radius: 0.5rem;
		border: 1px solid var(--secondary-color-30);
		text-align: center;

		h3 {
			margin-bottom: 0.5rem;
			color: var(--primary-color);
		}

		p {
			color: var(--secondary-color);
			text-wrap: wrap;
		}
	}
}

footer {
	padding: 2rem 1.5rem;
	text-align: center;
	color: var(--secondary-color);
	border-top: 1px solid var(--primary-color-10);
}

footer .social-links {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 2rem;
	margin-bottom: 1rem;

	i {
		color: var(--primary-color);
		font-size: 2rem;
		transition: color 0.125s ease-in-out;
	}

	a.social-link-github:hover i {
		color: var(--success-color);
	}

	a.social-link-email:hover i {
		color: var(--primary-color-70);
	}
}