@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");

/** shadcn properties */
:root {
	/* Color theme */
	--background: oklch(1 0 0);
	--foreground: oklch(0.145 0 0);
	--card: oklch(1 0 0);
	--card-foreground: oklch(0.145 0 0);
	--popover: oklch(1 0 0);
	--popover-foreground: oklch(0.145 0 0);
	--primary: oklch(0.205 0 0);
	--primary-foreground: oklch(0.985 0 0);
	--secondary: oklch(0.97 0 0);
	--secondary-foreground: oklch(0.205 0 0);
	--muted: oklch(0.97 0 0);
	--muted-foreground: oklch(0.556 0 0);
	--accent: oklch(0.97 0 0);
	--accent-foreground: oklch(0.205 0 0);
	--destructive: oklch(0.577 0.245 27.325);
	--border: oklch(0.922 0 0);
	--input: oklch(0.922 0 0);
	--ring: oklch(0.708 0 0);
	--chart-1: oklch(0.809 0.105 251.813);
	--chart-2: oklch(0.623 0.214 259.815);
	--chart-3: oklch(0.546 0.245 262.881);
	--chart-4: oklch(0.488 0.243 264.376);
	--chart-5: oklch(0.424 0.199 265.638);
	--radius: 0.625rem;
	--radius-sm: calc(var(--radius) * 0.6);
	--radius-md: calc(var(--radius) * 0.8);
	--radius-lg: var(--radius);
	--radius-xl: calc(var(--radius) * 1.4);
	--radius-2xl: calc(var(--radius) * 1.8);
	--radius-3xl: calc(var(--radius) * 2.2);
	--radius-4xl: calc(var(--radius) * 2.6);
	--sidebar: oklch(0.985 0 0);
	--sidebar-foreground: oklch(0.145 0 0);
	--sidebar-primary: oklch(0.205 0 0);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.97 0 0);
	--sidebar-accent-foreground: oklch(0.205 0 0);
	--sidebar-border: oklch(0.922 0 0);
	--sidebar-ring: oklch(0.708 0 0);
}

/* .dark {
	--background: oklch(0.145 0 0);
	--foreground: oklch(0.985 0 0);
	--card: oklch(0.205 0 0);
	--card-foreground: oklch(0.985 0 0);
	--popover: oklch(0.205 0 0);
	--popover-foreground: oklch(0.985 0 0);
	--primary: oklch(0.922 0 0);
	--primary-foreground: oklch(0.205 0 0);
	--secondary: oklch(0.269 0 0);
	--secondary-foreground: oklch(0.985 0 0);
	--muted: oklch(0.269 0 0);
	--muted-foreground: oklch(0.708 0 0);
	--accent: oklch(0.269 0 0);
	--accent-foreground: oklch(0.985 0 0);
	--destructive: oklch(0.704 0.191 22.216);
	--border: oklch(1 0 0 / 10%);
	--input: oklch(1 0 0 / 15%);
	--ring: oklch(0.556 0 0);
	--chart-1: oklch(0.809 0.105 251.813);
	--chart-2: oklch(0.623 0.214 259.815);
	--chart-3: oklch(0.546 0.245 262.881);
	--chart-4: oklch(0.488 0.243 264.376);
	--chart-5: oklch(0.424 0.199 265.638);
	--sidebar: oklch(0.205 0 0);
	--sidebar-foreground: oklch(0.985 0 0);
	--sidebar-primary: oklch(0.488 0.243 264.376);
	--sidebar-primary-foreground: oklch(0.985 0 0);
	--sidebar-accent: oklch(0.269 0 0);
	--sidebar-accent-foreground: oklch(0.985 0 0);
	--sidebar-border: oklch(1 0 0 / 10%);
	--sidebar-ring: oklch(0.556 0 0);
} */

/** Styles */
* {
	box-sizing: border-box;
}

html {
	font-family: "Outfit", sans-serif;
	font-optical-sizing: auto;
	font-style: normal;
	color: var(--foreground);
	background-color: var(--background);
	scroll-behavior: smooth;
}

body {
	max-width: 100vw;
	max-height: 100vh;
	overflow-x: hidden;
	overflow-y: auto;
	margin: 0;
}

@media (min-width: 768px) {
	/* md */
	body {
		overflow: hidden;
	}
}

strong {
	font-weight: 600;
}

main {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100vh;
	justify-content: space-around;
}

.hero {
	display: grid;
	grid-template-rows: auto;
	gap: 1.5rem;
	padding: 0 1.125rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	/* md */
	.hero {
		grid-template-columns: repeat(7, minmax(0, 13rem));
		align-items: end;
		margin: 0 auto;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.hero {
		max-width: 960px;
		padding-right: 0;
		padding-left: 0;
	}
}

@media (min-width: 1280px) {
	/* xl */
	.hero {
		max-width: 1120px;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.hero {
		max-width: 1440px;
	}
}

.messages-section {
	grid-row: span 1;
}

@media (min-width: 768px) {
	/* md */
	.messages-section {
		grid-column: span 5;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.messages-section {
		grid-column: span 4;
	}
}

.hero-title {
	font-size: 2.25rem;
	max-width: 50rem;
	margin: 2.5rem 0;
	max-width: 30rem;
}

@media (min-width: 1024px) {
	/* lg */
	.hero-title {
		font-size: 3rem;
	}
}

@media (min-width: 1280px) {
	/* xl */
	.hero-title {
		font-size: 3.75rem;
	}
}

.hero-description {
	font-weight: 300;
	font-size: 0.875rem;
	max-width: 40rem;
}

@media (min-width: 1024px) {
	/* lg */
	.hero-description {
		font-size: 1rem;
	}
}

@media (min-width: 1280px) {
	/* xl */
	.hero-description {
		font-size: 1.125rem;
	}
}

.contacts-section[data-slot="contact-infos"] {
	grid-row: span 1;
	display: none;
	height: fit-content;
}

@media (min-width: 768px) {
	/* md */
	.contacts-section[data-slot="contact-infos"] {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.contacts-section[data-slot="contact-infos"] {
		grid-column: span 3;
	}
}

.contacts-section[data-slot="contact-infos"].is-visible {
	display: flex;
	flex-direction: row;
	justify-content: center;
	gap: 1rem;
	width: fit-content;
	margin: 0 auto;
}

@media (min-width: 768px) {
	/* md */
	.contacts-section[data-slot="contact-infos"].is-visible {
		margin-bottom: 1.5rem;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.contacts-section[data-slot="contact-infos"].is-visible {
		margin-bottom: 2rem;
	}
}

@media (min-width: 1280px) {
	/* xl */
	.contacts-section[data-slot="contact-infos"].is-visible {
		margin-bottom: 3rem;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.contacts-section[data-slot="contact-infos"].is-visible {
		margin-bottom: 3.5rem;
	}
}

.profile-picture {
	width: 5.25rem;
	height: 5.25rem;
	border-radius: 100%;
}

@media (min-width: 768px) {
	/* md */
	.profile-picture {
		position: absolute;
		z-index: -1;
		top: -4.5rem;
		width: 6rem;
		height: 6rem;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.profile-picture {
		top: -5rem;
		width: 6.75rem;
		height: 6.75rem;
	}
}

@media (min-width: 1280px) {
	/* xl */
	.profile-picture {
		top: -5.5rem;
		width: 7.5rem;
		height: 7.5rem;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.profile-picture {
		top: -6rem;
		width: 8.25rem;
		height: 8.25rem;
	}
}

.contact-content {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	align-items: start;
	margin-top: 1rem;
}

@media (min-width: 768px) {
	/* md */
	.contact-content {
		align-items: center;
		text-align: center;
	}
}

.greetings {
	margin: 0;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.6;
	transform: rotate(-2.5deg);
}

@media (min-width: 768px) {
	/* md */
	.greetings {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.greetings {
		font-size: 1.125rem;
	}
}

@media (min-width: 1280px) {
	/* xl */
	.greetings {
		font-size: 1.25rem;
	}
}

.greetings::before {
	content: " ";
	position: absolute;
	left: -3%;
	top: -20%;
	height: 100%;
	width: 90%;
	padding: 0.375rem 0.75rem;
	background-color: var(--muted-foreground);
	opacity: 0.5;
	transform: rotate(3deg);
	z-index: -1;
}

.greetings span {
	background-color: var(--accent-foreground);
	padding: 0.375rem 0.75rem;
	color: var(--accent);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

.email-cta {
	display: flex;
	align-items: center;
	margin-top: 1.25rem;
}

#email-address {
	margin: 0;
	color: var(--foreground);
	text-decoration: none;
	font-size: 1.125rem;
}

@media (min-width: 768px) {
	/* md */
	#email-address {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	/* lg */
	#email-address {
		font-size: 1.125rem;
	}
}

.copy-cta {
	background-color: transparent;
	border: none;
	cursor: pointer;
	margin-left: 0.05rem;
}

.copy-cta #copy-icon {
	height: 1.25rem;
	width: 1.25rem;
}

@media (min-width: 768px) {
	/* md */
	.copy-cta #copy-icon {
		height: 1rem;
		width: 1rem;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.copy-cta #copy-icon {
		height: 1.125rem;
		width: 1.125rem;
	}
}

.copy-cta #copied-icon {
	height: 1.25rem;
	width: 1.25rem;
	color: green;
}

@media (min-width: 768px) {
	/* md */
	.copy-cta #copied-icon {
		height: 1rem;
		width: 1rem;
	}
}

@media (min-width: 1024px) {
	/* lg */
	.copy-cta #copy-icon {
		height: 1.125rem;
		width: 1.125rem;
	}
}

.social-networks-section {
	display: grid;
	grid-template-rows: auto;
	justify-items: center;
	gap: 1rem;
	width: 100%;

	margin: 0 auto;
	padding: 0 1.125rem;
	padding-bottom: 2rem;
}

@media (min-width: 768px) {
	/* sm */
	.social-networks-section {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-items: start;
		gap: 0rem;
	}
}

@media (min-width: 1024px) {
	/* md */
	.social-networks-section {
		max-width: 960px;
		padding-right: 0;
		padding-left: 0;
	}
}

@media (min-width: 1280px) {
	/* lg */
	.social-networks-section {
		max-width: 1120px;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.social-networks-section {
		max-width: 1420px;
	}
}

.card-container {
	border: 1px solid var(--ring);
	border-radius: var(--radius-xl);
	padding: 0.325rem 0.75rem 1rem;
	max-width: 30rem;
	display: flex;
	flex-direction: column;
	flex: 1;
}

@media (min-width: 768px) {
	/* sm */
	.card-container {
		max-width: 360px;
	}
}

@media (min-width: 1024px) {
	/* md */
	.card-container {
		max-width: 360px;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.card-container {
		max-width: 420px;
	}
}

.card-container .sn-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin: 0.5rem 0;
}

@media (min-width: 768px) {
	/* sm */
	.card-container .sn-title {
		font-size: 1rem;
	}
}

@media (min-width: 1024px) {
	/* md */
	.card-container .sn-title {
		font-size: 1.125rem;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.card-container .sn-title {
		font-size: 1.25rem;
	}
}

.card-container .sn-description {
	font-size: 0.875rem;
	margin: 0;
}

@media (min-width: 768px) {
	/* sm */
	.card-container .sn-description {
		font-size: 0.75rem;
	}
}

@media (min-width: 1024px) {
	/* md */
	.card-container .sn-description {
		font-size: 0.875rem;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.card-container .sn-description {
		font-size: 1rem;
	}
}

.card-container .sn-cta-link {
	font-size: 0.875rem;
	width: fit-content;
	margin-top: auto;
	padding-top: 0.25rem;
}

@media (min-width: 768px) {
	/* sm */
	.card-container .sn-link {
		font-size: 0.75rem;
	}
}

@media (min-width: 1024px) {
	/* md */
	.card-container .sn-link {
		font-size: 0.875rem;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	.card-container .sn-link {
		font-size: 1rem;
	}
}

#linkedin-card {
	position: relative;
	order: 1;
}

#linkedin-card button[data-slot="show-contact-info"] {
	position: absolute;
	bottom: -42%;
	right: 0;
	background-color: transparent;
	border: none;
	border-radius: 100%;
	cursor: pointer;
	width: fit-content;
	height: fit-content;
}

@media (min-width: 768px) {
	/* sm */
	#linkedin-card button[data-slot="show-contact-info"] {
		top: -40%;
		right: -5%;
	}
}

@media (min-width: 1024px) {
	/* md */
	#linkedin-card button[data-slot="show-contact-info"] {
		top: -36%;
		right: -12%;
	}
}

@media (min-width: 1280px) {
	/* lg */
	#linkedin-card button[data-slot="show-contact-info"] {
		top: -50%;
		right: -16%;
	}
}

#linkedin-card button[data-slot="show-contact-info"]::after {
	content: "GET IN TOUCH";
	background-color: var(--foreground);
	opacity: 0.5;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--accent);
	font-size: 0.75rem;
	font-weight: 600;
	width: 3.3rem;
	height: 3.3rem;
	border-radius: 100%;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}

@media (min-width: 1024px) {
	/* lg */
	#linkedin-card button[data-slot="show-contact-info"]::after {
		opacity: 0;
	}
}

#linkedin-card button[data-slot="show-contact-info"]:hover::after,
#linkedin-card button[data-slot="show-contact-info"].toggled::after {
	opacity: 1;
}

@media (min-width: 1280px) {
	/* xl */
	#linkedin-card button[data-slot="show-contact-info"]:hover::after,
	#linkedin-card button[data-slot="show-contact-info"].toggled::after {
		font-size: 0.875rem;
		font-weight: 600;
		width: 4.5rem;
		height: 4.5rem;
	}
}

#linkedin-card #text-circle-svg {
	width: 5.5rem;
	height: 5.5rem;
	z-index: 60;

	transform-origin: center;
	animation: spin 10s linear infinite;
}

@media (min-width: 1280px) {
	/* lg */
	#linkedin-card button[data-slot="show-contact-info"] #text-circle-svg {
		width: 7.25rem;
		height: 7.25rem;
	}
}

#linkedin-card #text-circle-svg .text-path {
	fill: var(--foreground);
	font-family: "Outfit", sans-serif;
	font-size: 95.28px;
	font-weight: 700;
}

#github-card {
	order: 2;
}

@media (min-width: 768px) {
	#github-card {
		order: 1;
	}
}

/** Animations */

/* Fullstack circle */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(-360deg);
	}
}

/** Screen */
@media (min-width: 640px) {
	/* sm */
	html {
		font-size: 15px;
	}
}

@media (min-width: 768px) {
	/* md */
	html {
		font-size: 15.5px;
	}
}

@media (min-width: 768px) and (max-height: 650px) {
	body {
		overflow-y: auto;
	}
}

@media (min-width: 1024px) {
	/* lg */
	html {
		font-size: 16px;
	}
}

@media (min-width: 1024px) and (max-height: 750px) {
	/* lg + viewport */
	body {
		overflow-y: auto;
	}
}

@media (min-width: 1280px) {
	/* xl */
	html {
		font-size: 16.5px;
	}
}

@media (min-width: 1280px) and (max-height: 850px) {
	/* xl + viewport */
	body {
		overflow-y: auto;
	}
}

@media (min-width: 1536px) {
	/* 2xl */
	html {
		font-size: 17px;
	}
}

@media (min-width: 1536px) and (max-height: 950px) {
	/* 2xl + viewport */
	body {
		overflow-y: auto;
	}
}