@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

:root{
	--mainColor:#f4f5f7;
	--secondaryColor:#ffffff;
	--borderColor:#d7dce4;
	--mainText:#111827;
	--secondaryText:#4b5563;
	--themeDotBorder:#1f2937;
	--previewBg:rgba(255, 255, 255, 0.9);
	--previewShadow:rgba(15, 23, 42, 0.08);
	--buttonColor:#0f172a;
}

html{
	scroll-behavior:smooth;
}

html,
body{
	margin:0;
	padding:0;
}

body{
	color:var(--secondaryText);
	font-family:'Manrope', sans-serif;
	line-height:1.75;
	background:
		radial-gradient(circle at top left, rgba(23, 162, 184, 0.12), transparent 26%),
		radial-gradient(circle at top right, var(--previewShadow), transparent 24%),
		linear-gradient(180deg, var(--mainColor) 0%, var(--secondaryColor) 100%);
}

body::before{
	content:"";
	position:fixed;
	inset:0;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
	background-size:32px 32px;
	opacity:0.28;
	pointer-events:none;
	z-index:-1;
}

*,
*::before,
*::after{
	box-sizing:border-box;
}

img,
video{
	max-width:100%;
	display:block;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong{
	margin:0 0 0.85rem;
	color:var(--mainText);
	font-family:'Space Grotesk', sans-serif;
	font-weight:700;
	line-height:1.15;
	letter-spacing:-0.03em;
}

p,
li,
span,
label,
input,
textarea{
	margin-top:0;
	color:var(--secondaryText);
	font-family:'Manrope', sans-serif;
}

a{
	color:#0f8aa0;
	text-decoration:none;
	transition:color 0.2s ease, opacity 0.2s ease;
}

a:hover{
	color:#0a6576;
}

ul,
ol{
	margin:0;
	padding-left:1.2rem;
}

ul{
	list-style:none;
	padding-left:0;
}

ol li,
ul li{
	margin-bottom:0.75rem;
}

h1{
	font-size:clamp(2.7rem, 7vw, 5rem);
}

h2{
	font-size:clamp(2rem, 4vw, 3rem);
}

h3{
	font-size:clamp(1.55rem, 2.8vw, 2.25rem);
}

h4{
	font-size:1.45rem;
}

h5{
	font-size:1rem;
	letter-spacing:0.08em;
	text-transform:uppercase;
}

h6{
	font-size:1.05rem;
}

.s1,
.s2{
	padding:clamp(3.5rem, 7vw, 6rem) 0;
	border-bottom:1px solid rgba(15, 23, 42, 0.06);
}

.s1{
	background:transparent;
}

.s2{
	background:var(--secondaryColor);
	backdrop-filter:blur(4px);
}

.main-container{
	width:min(1180px, calc(100% - 2rem));
	margin:0 auto;
}

.greeting-wrapper{
	display:grid;
	place-items:center;
	text-align:center;
	gap:0.75rem;
	margin-bottom:2rem;
}

.greeting-wrapper h1,
.greeting-wrapper h2,
.greeting-wrapper h3{
	max-width:14ch;
}

.intro-wrapper{
	position:relative;
	display:grid;
	grid-template-columns:minmax(280px, 360px) 1fr;
	grid-template-areas:
		"nav-wrapper nav-wrapper"
		"left-column right-column";
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:28px;
	background:var(--secondaryColor);
	box-shadow:0 24px 80px rgba(15, 23, 42, 0.12);
	overflow:hidden;
	backdrop-filter:blur(10px);
}

.nav-wrapper{
	grid-area:nav-wrapper;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0.95rem 1.2rem;
	border-bottom:1px solid rgba(15, 23, 42, 0.08);
	background:var(--mainColor);
	backdrop-filter:blur(10px);
}

.navigation{
	display:flex;
	align-items:center;
	gap:0.75rem;
	margin:0;
	padding:0;
}

.navigation li{
	margin:0;
}

.navigation a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:0.72rem 1.1rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:999px;
	background:var(--secondaryColor);
	color:var(--mainText);
	font-size:0.94rem;
	font-weight:700;
}

.navigation a:hover{
	background:var(--mainColor);
}

.dots-wrapper,
.dots-link{
	display:flex;
	align-items:center;
	gap:0.45rem;
	padding:0;
}

.browser-dot{
	width:14px;
	height:14px;
	border-radius:999px;
	box-shadow:0 2px 5px rgba(15, 23, 42, 0.18);
}

#dot-1{
	background:#fb7185;
}

#dot-2{
	background:#fbbf24;
}

#dot-3{
	background:#34d399;
}

.left-column{
	grid-area:left-column;
	display:grid;
	justify-items:center;
	align-content:start;
	gap:1rem;
	padding:2.4rem 2rem 2.6rem;
	background:
		linear-gradient(180deg, rgba(15, 23, 42, 0.04), transparent),
		linear-gradient(135deg, rgba(23, 162, 184, 0.08), transparent 58%),
		var(--mainColor);
	border-right:1px solid rgba(15, 23, 42, 0.08);
	text-align:center;
}

#profile_pic{
	width:220px;
	height:220px;
	border-radius:28px;
	object-fit:cover;
	border:1px solid rgba(15, 23, 42, 0.08);
	box-shadow:0 20px 35px rgba(15, 23, 42, 0.14);
}

#profile_pic_2{
	width:min(100%, 520px);
	height:auto;
	border-radius:24px;
	border:1px solid rgba(15, 23, 42, 0.08);
	box-shadow:0 18px 40px rgba(15, 23, 42, 0.14);
}

#theme-options-wrapper{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-wrap:wrap;
	gap:0.6rem;
}

.theme-dot{
	width:22px;
	height:22px;
	margin:0;
	border-radius:999px;
	border:2px solid var(--themeDotBorder);
	box-shadow:0 6px 14px rgba(15, 23, 42, 0.14);
	cursor:pointer;
	transition:transform 0.2s ease, box-shadow 0.2s ease;
}

.theme-dot:hover{
	transform:translateY(-2px) scale(1.08);
	box-shadow:0 10px 18px rgba(15, 23, 42, 0.18);
}

#light-mode{
	background:#ffffff;
}

#blue-mode{
	background:#192734;
}

#green-mode{
	background:#78866b;
}

#purple-mode{
	background:#7E4C74;
}

#settings-note{
	max-width:26ch;
	margin:0;
	font-size:0.88rem;
	line-height:1.6;
	color:var(--secondaryText);
}

.right-column{
	grid-area:right-column;
	display:grid;
	align-content:center;
	padding:2.8rem clamp(1.4rem, 3vw, 3rem);
}

#preview-shadow{
	max-width:700px;
	padding:1rem;
	border-radius:30px;
	background:linear-gradient(135deg, rgba(23, 162, 184, 0.14), rgba(15, 23, 42, 0.04));
	box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

#preview{
	width:100%;
	padding:2rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:24px;
	background:var(--previewBg);
	box-shadow:0 18px 40px var(--previewShadow);
	position:relative;
}

#preview h3{
	margin-bottom:1rem;
}

#preview p{
	max-width:55ch;
	font-size:1.05rem;
}

.corner{
	width:11px;
	height:11px;
	border-radius:999px;
	border:2px solid rgba(15, 23, 42, 0.16);
	background:var(--secondaryColor);
	position:absolute;
}

#corner-tl{
	top:14px;
	left:14px;
}

#corner-tr{
	top:14px;
	right:14px;
}

#corner-br{
	right:14px;
	bottom:14px;
}

#corner-bl{
	left:14px;
	bottom:14px;
}

.about-wrapper{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
	gap:1.5rem;
	padding-top:1.5rem;
}

.about-me,
.social-links{
	display:grid;
	align-content:start;
	gap:1rem;
	padding:1.8rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:24px;
	background:var(--secondaryColor);
	box-shadow:0 18px 40px rgba(15, 23, 42, 0.08);
}

.social-links{
	text-align:left;
}

.social-links h3{
	margin-top:0.5rem;
}

.social-img{
	width:100%;
	border-radius:18px;
	border:1px solid rgba(15, 23, 42, 0.08);
	box-shadow:0 14px 30px rgba(15, 23, 42, 0.12);
}

#skills{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
	gap:1rem;
	padding:1.25rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:20px;
	background:linear-gradient(180deg, var(--mainColor), var(--secondaryColor));
}

#skills ul{
	margin:0;
	padding:0;
}

#skills li{
	position:relative;
	padding-left:1.15rem;
	margin-bottom:0.8rem;
}

#skills li::before{
	content:"";
	position:absolute;
	left:0;
	top:0.78rem;
	width:7px;
	height:7px;
	border-radius:999px;
	background:#17a2b8;
}

hr{
	width:100%;
	height:1px;
	margin:0.3rem 0 0;
	border:0;
	background:linear-gradient(90deg, rgba(15, 23, 42, 0.18), transparent);
}

.post-wrapper{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:1.5rem;
	padding-top:1.75rem;
}

.post{
	display:flex;
	flex-direction:column;
	height:100%;
	overflow:hidden;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:22px;
	background:var(--secondaryColor);
	box-shadow:0 18px 36px rgba(15, 23, 42, 0.08);
	transition:transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.post:hover{
	transform:translateY(-6px);
	border-color:rgba(23, 162, 184, 0.22);
	box-shadow:0 24px 48px rgba(15, 23, 42, 0.14);
}

.thumbnail,
.thumbnail2{
	width:100%;
	height:200px;
	object-fit:cover;
}

.video-post{
	min-height:unset;
}

.video-post video{
	width:100%;
	aspect-ratio:16 / 9;
	object-fit:cover;
	background:#0f172a;
}

.post-preview{
	display:grid;
	align-content:start;
	gap:0.7rem;
	flex:1;
	padding:1.3rem 1.35rem 1.45rem;
	background:transparent;
}

.post-title{
	margin:0;
	color:var(--mainText);
}

.post-intro{
	margin:0;
	font-size:0.97rem;
	line-height:1.7;
}

.post-preview a,
.content a,
.social-links > a{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:max-content;
	padding:0.72rem 1rem;
	border-radius:999px;
	background:#0f172a;
	color:#ffffff;
	font-weight:700;
	font-size:0.92rem;
	letter-spacing:0.01em;
	box-shadow:0 10px 20px rgba(15, 23, 42, 0.16);
}

.post-preview a:hover,
.content a:hover,
.social-links > a:hover{
	background:#111f3c;
	color:#ffffff;
}

#contact-form,
form{
	display:grid;
	gap:0.9rem;
	width:100%;
	max-width:680px;
	margin:0 auto;
	padding:1.6rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:22px;
	background:var(--secondaryColor);
	box-shadow:0 18px 36px rgba(15, 23, 42, 0.08);
}

#contact-form textarea,
form textarea{
	min-height:150px;
	resize:vertical;
}

.input-field{
	width:100%;
	padding:0.95rem 1rem;
	border:1px solid rgba(15, 23, 42, 0.12);
	border-radius:14px;
	background:var(--secondaryColor);
	font-size:0.98rem;
	box-shadow:inset 0 1px 2px rgba(15, 23, 42, 0.04);
}

.input-field:focus{
	outline:none;
	border-color:#17a2b8;
	box-shadow:0 0 0 4px rgba(23, 162, 184, 0.12);
}

#submit-btn,
button{
	width:100%;
	border:0;
	border-radius:16px;
	padding:0.95rem 1.2rem;
	color:#ffffff;
	font-size:0.96rem;
	font-family:'Manrope', sans-serif;
	font-weight:700;
	letter-spacing:0.01em;
	background:#6b7280;
	box-shadow:0 14px 24px rgba(15, 23, 42, 0.16);
	cursor:pointer;
	transition:transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

#submit-btn{
	background:var(--buttonColor);
}

button[data-sharer="email"]{
	background:#374151;
}

button[data-sharer="whatsapp"]{
	background:#1fa756;
}

button[data-sharer="linkedin"]{
	background:#0a66c2;
}

button[data-sharer="CV"]{
	background:#8b1f1f;
}

button:hover,
#submit-btn:hover{
	transform:translateY(-2px);
	box-shadow:0 18px 28px rgba(15, 23, 42, 0.2);
	filter:brightness(1.03);
}

#timeline .timeline{
	position:relative;
	margin-top:1.75rem;
}

#timeline .timeline::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	left:50%;
	width:2px;
	background:linear-gradient(180deg, rgba(23, 162, 184, 0.28), rgba(15, 23, 42, 0.14));
	transform:translateX(-50%);
}

#timeline .container{
	position:relative;
	width:50%;
	padding:0 2rem 2rem;
}

#timeline .container::after{
	content:"";
	position:absolute;
	top:1.2rem;
	width:16px;
	height:16px;
	border-radius:999px;
	background:var(--secondaryColor);
	border:3px solid #17a2b8;
	box-shadow:0 0 0 8px rgba(23, 162, 184, 0.12);
	z-index:1;
}

#timeline .left{
	left:0;
}

#timeline .left::after{
	right:-8px;
}

#timeline .right{
	left:50%;
}

#timeline .right::after{
	left:-8px;
}

#timeline .content{
	padding:1.35rem 1.45rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:20px;
	background:var(--secondaryColor);
	box-shadow:0 16px 32px rgba(15, 23, 42, 0.08);
}

#timeline .content h2{
	font-size:1.2rem;
	margin-bottom:0.6rem;
}

.back-to-timeline{
	position:fixed;
	right:24px;
	bottom:24px;
	display:none;
	width:52px;
	height:52px;
	border-radius:999px;
	background:#0f172a;
	color:#ffffff;
	font-size:1.4rem;
	line-height:52px;
	text-align:center;
	box-shadow:0 16px 30px rgba(15, 23, 42, 0.25);
	z-index:1000;
}

.back-to-timeline:hover{
	background:#111f3c;
	color:#ffffff;
}

.contact-page .greeting-wrapper{
	margin-bottom:2.5rem;
}

.contact-page .greeting-wrapper p{
	max-width:44rem;
	margin:0;
	font-size:1.02rem;
}

.contact-hero{
	grid-template-columns:minmax(0, 1.4fr) minmax(280px, 0.9fr);
}

.contact-form-column,
.contact-info-column{
	padding:2rem;
}

.contact-panel,
.contact-side-card{
	display:grid;
	gap:1rem;
	padding:1.6rem;
	border:1px solid rgba(15, 23, 42, 0.08);
	border-radius:24px;
	background:var(--secondaryColor);
	box-shadow:0 18px 36px rgba(15, 23, 42, 0.08);
}

.contact-panel{
	gap:1.25rem;
}

.contact-panel-header p,
.contact-side-card p,
.contact-note{
	margin:0;
	font-size:0.95rem;
	line-height:1.7;
}

.contact-info-column{
	display:grid;
	align-content:start;
	gap:1rem;
}

.contact-email-link{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:max-content;
	padding:0.75rem 1rem;
	border-radius:999px;
	background:rgba(23, 162, 184, 0.12);
	color:#0f8aa0;
	font-weight:700;
}

.contact-email-link:hover{
	background:rgba(23, 162, 184, 0.18);
	color:#0a6576;
}

.form-actions{
	display:grid;
	grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
	gap:0.9rem;
	margin-top:0.25rem;
}

.secondary-button{
	background:transparent;
	color:var(--mainText);
	border:1px solid rgba(15, 23, 42, 0.14);
	box-shadow:none;
}

.secondary-button:hover{
	background:rgba(15, 23, 42, 0.05);
	box-shadow:none;
}

.contact-share-section .main-container > h3{
	margin-bottom:1.5rem;
}

.share-grid{
	display:grid;
	grid-template-columns:repeat(3, minmax(0, 1fr));
	gap:1rem;
}

.share-card{
	display:flex;
}

.share-card button{
	height:100%;
}

.img-container{
	overflow:hidden;
	border-radius:22px;
	border:1px solid rgba(15, 23, 42, 0.08);
	background:var(--secondaryColor);
	box-shadow:0 18px 36px rgba(15, 23, 42, 0.08);
}

pre,
code{
	font-family:'Roboto Mono', monospace;
}

section > .main-container > h2,
section > .main-container > h3{
	position:relative;
	margin-bottom:0.25rem;
	text-align:center;
}

section > .main-container > h2::after,
section > .main-container > h3::after{
	content:"";
	display:block;
	width:82px;
	height:3px;
	margin:0.9rem auto 0;
	border-radius:999px;
	background:linear-gradient(90deg, #17a2b8, rgba(15, 23, 42, 0.25));
}

@media screen and (max-width: 980px){
	.intro-wrapper{
		grid-template-columns:1fr;
		grid-template-areas:
			"nav-wrapper"
			"left-column"
			"right-column";
	}

	.left-column{
		border-right:0;
		border-bottom:1px solid rgba(15, 23, 42, 0.08);
	}

	#preview-shadow{
		max-width:none;
	}

	#timeline .timeline::after{
		left:22px;
		transform:none;
	}

	#timeline .container,
	#timeline .right,
	#timeline .left{
		left:0;
		width:100%;
		padding:0 0 1.25rem 3.4rem;
	}

	#timeline .left::after,
	#timeline .right::after{
		left:14px;
		right:auto;
	}

	.contact-hero{
		grid-template-columns:1fr;
	}
}

@media screen and (max-width: 720px){
	.main-container{
		width:min(100% - 1.2rem, 1180px);
	}

	.s1,
	.s2{
		padding:3rem 0;
	}

	.nav-wrapper{
		flex-direction:column;
		gap:0.9rem;
		align-items:flex-start;
	}

	.navigation{
		flex-wrap:wrap;
	}

	.left-column,
	.right-column{
		padding:1.5rem;
	}

	.contact-form-column,
	.contact-info-column{
		padding:1.25rem;
	}

	#profile_pic{
		width:180px;
		height:180px;
	}

	#preview{
		padding:1.4rem;
	}

	.about-me,
	.social-links{
		padding:1.3rem;
	}

	.post-preview{
		padding:1.1rem 1.1rem 1.25rem;
	}

	.form-actions,
	.share-grid{
		grid-template-columns:1fr;
	}

	.back-to-timeline{
		right:18px;
		bottom:18px;
		width:46px;
		height:46px;
		line-height:46px;
	}
}