body {margin:0; box-sizing: border-box; line-height: 1.7 !important; -webkit-text-size-adjust: 100%;background-color: #12141E !important; position: relative;}
.completePage {position: relative; width: 100%; min-height: 100vh; margin:auto; display: block; max-height: fit-content; scroll-behavior: smooth;}

.main_container { margin: 0px 5%; padding: 30px 10px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 0px; align-self: stretch;}

.header {width: 100%; height: 90vh;}
.background {position: relative; height: 90vh; overflow: hidden;}
.background_sky {background-image: url(/images/home-img/hero_background_sky.png); background-repeat: no-repeat; background-size:cover; position: fixed; top: 0; left: 0; width: 100%; height: 90vh; z-index: 0;}
.background_dunes {background: url(/images/home-img/hero_background_land.png) no-repeat bottom left; background-size: cover; position: relative; height: 90vh; z-index: 20;}
.header_body {position: fixed; display: flex; flex-direction: column; justify-content: center; align-items: center; gap:15px; flex-shrink: 0; margin-top: 5%; z-index: 10; width: 100%; height: 70vh;}

.spaceship_3d {display: none; position: absolute; top: 20%; left: 10%; z-index: 80; transform: translate(-50%, -50%) scale(2); animation: none;}
.hero_spaceship_big {display: none; position: absolute; top: 40%; left: 45%; z-index: 75; transform: translate(-50%, -50%) scale(1.5); animation: none;}
.hero_spaceship_small {display: none; position: absolute; top: 45%; left: 50%; z-index: 70; transform: translate(-50%, -50%) scale(1.5); animation: none;}
.hero_moon_big {zoom: 60%; position: absolute; bottom: 40%; right: 90%; z-index: 65;  animation-delay: 0.2s; animation: none; offset-path: path("M 200 100 A 100 100 0 0 0 -200 100"); offset-rotate: 0deg; offset-distance: 0%;}
.hero_moon_small {zoom: 60%; position: absolute; bottom: 60%; right: 80%; z-index: 60; animation-delay: 0.2s; animation: none; offset-path: path("M 230 115 A 115 115 0 0 0 -230 115"); offset-rotate: 0deg; offset-distance: 0%;}

  @keyframes moverLuna {
     0% {transform: translate(0, +800px)}
    80% {transform: translate(0, -20px)}
    100% {transform: translate(0,0px)}
  }

  @keyframes naveAleja {
    0% {transform: translate(-100px, -50%) scale(1.5); opacity: 1;}
    100% {transform: translate(250px, +20%) scale(0.0); opacity: 0.8;}}

  @keyframes naveAlejaGrande {
    0% {transform: translate(0px, -50%) scale(2); opacity: 1;}
    100% {transform: translate(900px, +130%) scale(0.0); opacity: 0.8;}}

.combi_background, .projects  {position: relative; background-color: #12141E; z-index: 30;}
.label_wall {position: absolute; bottom: 0; left: 0; z-index: 10; height: 500px; opacity: 0.2;}
.label_wall.animate {animation: none;}
.label_stones  {position: absolute; bottom: 0; left: 0; z-index: 20; height: 400px; opacity: 0.7;}
.label_stones.animate  {animation: none;}
.label_ground  {position: absolute; bottom: 0; left: 0; z-index: 50;}

@keyframes stones {
  0% {transform: translate(0px, +300px) scale(1); opacity: 0.1;}
  100% {transform: translate(0px, 0px) scale(1); opacity: 0.6;}
}

@keyframes wall {
  0% {transform: translate(0px, +700px) scale(1); opacity: 0;}
  100% {transform: translate(0px, 0px) scale(1); opacity: 0.2;}
}

.about_me, .areas_interest {position: relative; z-index: 100;}
.title {position: relative; width: 100%;}
.about_me_body {position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items:center; align-self: stretch; margin-top: 50px; gap: 50px;}
.about_me_body_text {width: 100%; display: flex; flex-direction: column; justify-content: flex-start;}
.about_me_body_text_content .title h2 {text-align: left;}
.about_me_body_pic {position: relative; zoom: 70%;}
.line {position: absolute; top: 0; left: 0; animation: updown 4s infinite linear; opacity: 1; z-index: 10;}

@keyframes updown {
  0% {transform: translate(0px, +450px) scale(1);}
    20% {opacity:0}
	20.1% {opacity:0.6}
	40% {opacity:0}
	40.1% {opacity:0.6}
  50% {transform: translate(0px, 0px) scale(1);}
    70% {opacity:0}
	70.1% {opacity:0.6}
100% {transform: translate(0px, +450px) scale(1);}
}

.areas_interest_body, .last_projects_body, .get_touch_body {display: flex; flex-direction: column; gap:20px;}
.areas_interest_content {position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; align-content: center; row-gap: 30px; align-self: stretch; flex-wrap: wrap;}
.areas_interest_content_item {display: flex; width: 100%; flex-direction: row; align-items: flex-start; gap: 20px;}
.areas_interest_content_item_text  {display: flex; flex-direction: column; align-items: flex-start; gap: 0px; align-self: stretch;}
.areas_interest_content_item img {zoom:80%;}

.arrow {cursor: pointer;} 

.get_touch {position: relative;  background-color: #12141E; z-index: 30; padding-bottom: 150px;}
.get_touch_content {display: flex; width: auto; flex-direction: column; align-items: center; gap: 40px;}
.get_touch_item {display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 10px; align-self: stretch;}
.get_touch_item p {text-align: center;}
.arturito_room  {position: relative; width: 100%;}
.arturito {position: absolute; right: 100%; bottom: -120px; zoom: 80%; opacity: 0;}
.arturito.animate  {animation:none;}
@keyframes roll {
  0% { transform: translate(0,0); opacity: 1;}
20% { transform: translate(+30vw,0); opacity: 1;}
80% { transform: translate(+30vw,0); opacity: 1;}
  95% {opacity: 1;}
  100% {transform: translate(+100vw, 0); opacity: 0;}
}
.typewriting {height:22px;}
.typewriting.animate::after {content: "a.alexander.smith@icloud.com"; animation: none; animation-fill-mode: forwards; animation-delay: 2s;}

@keyframes writeme {
  0% {content: "a";}
  2% {content: "a.";}
  4% {content: "a.a";}
  6% {content: "a.al";}
  8% {content: "a.ale";}
  10% {content: "a.alex";}
  12% {content: "a.alexa";}
  14% {content: "a.alexan";}
  16% {content: "a.alexand";}
  18% {content: "a.alexande";}
  20% {content: "a.alexander";}
  22% {content: "a.alexander.";}
  24% {content: "a.alexander.s";}
  26% {content: "a.alexander.sc";}
  28% {content: "a.alexander.sch";}
  30% {content: "a.alexander.schm";}
  66% {content: "a.alexander.sch";}
  68% {content: "a.alexander.sc";}
  70% {content: "a.alexander.s";}
  72% {content: "a.alexander.sm";}
  74% {content: "a.alexander.smi";}
  76% {content: "a.alexander.smit";}
  78% {content: "a.alexander.smith";}
  80% {content: "a.alexander.smith@";}
  82% {content: "a.alexander.smith@i";}
  84% {content: "a.alexander.smith@ic";}
  86% {content: "a.alexander.smith@icl";}
  88% {content: "a.alexander.smith@iclo";}
  90% {content: "a.alexander.smith@iclou";}
  92% {content: "a.alexander.smith@icloud";}
  94% {content: "a.alexander.smith@icloud.";}
  96% {content: "a.alexander.smith@icloud.c";}
  98% {content: "a.alexander.smith@icloud.co";}
 100% {content: "a.alexander.smith@icloud.com";}}

h1 {color: #EAEBEC; font-family: MuseoModerno; font-size: 42px; font-style: normal; font-weight: 600; line-height: 100%; margin: 0; text-align: center; width: 90%;}
h2 {color: #56768A; font-family: MuseoModerno; font-size: 30px; font-style: normal; font-weight: 500; line-height: 100%; margin-bottom: 15px; text-align: center;}
h3 {color: #EAEBEC; font-family: Montserrat; font-size: 18px; font-style: normal; font-weight: 500; line-height: 100%; margin: 0;}
h4 {color: #EAEBEC; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 400; line-height: 100%; text-align: center; margin: 0;}
h5 {color: #EAEBEC; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 700; line-height: 100%; margin: 0;}
.last_projects_content_item h5 {margin-bottom: 5px;}
p, li {color: #EAEBEC; font-family: Montserrat; font-size: 16px; font-style: normal; font-weight: 400; line-height: 150%; margin: 0;}
ul {padding-inline-start: 20px;}
span {color: #EAEBEC; font-family: Montserrat; font-size: 12px; font-style: normal; font-weight: 400; line-height: 100%; margin-bottom: 20px;}


/* Enhanced futuristic styling */
:root {--glow-primary: #56768A;	--glow-secondary: #c8d1d7;	--neon-pink: #292E4C;	--neon-blue: #141722;	--neon-green: #45a7c0;}

/* Background grid effect */
body::before {content: "";position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-image: linear-gradient(rgba(14, 165, 233, 0.1) 1px, transparent 1px),linear-gradient(90deg, rgba(14, 165, 233, 0.1) 1px, transparent 1px);	background-size: 40px 40px;	background-position: center center;perspective: 1000px;transform-style: preserve-3d;animation: gridMove 60s linear infinite;}

@keyframes gridMove {
	0% {background-position: 0px 0px;opacity: 0.5;}
	50% {opacity: 0.2;}
	100% {background-position: 40px 40px;	opacity: 0.5;}
}

.carousel-container {padding: 50px 0px;position: relative;	perspective: 2000px;z-index: 10;overflow: hidden; max-width: 110%;}
.carousel-track {display: flex;	transition: transform 0.75s cubic-bezier(0.21, 0.61, 0.35, 1);	transform-style: preserve-3d;}
.carousel-card {min-width: 320px;max-width: 320px;margin: 0 25px;background: #12141E;border-radius: 1.2rem;overflow: hidden;backdrop-filter: blur(10px);box-shadow: 0 15px 25px rgba(0, 0, 0, 0.5), 0 0 30px rgba(56, 189, 248, 0.2);	transition: all 0.6s cubic-bezier(0.21, 0.61, 0.35, 1);	transform-origin: center center;position: relative;	border: 1px solid #56768A;}

/* Holographic border effect */
.carousel-card::before {content: "";position: absolute;	inset: -2px;background: linear-gradient(45deg,	transparent 0%,	var(--neon-blue) 25%,var(--neon-green) 50%,var(--neon-pink) 75%,transparent 100%);	z-index: -1;border-radius: 1.3rem;	filter: blur(8px);	opacity: 0;	transition: opacity 0.5s ease;	animation: borderGlow 6s linear infinite;}

@keyframes borderGlow {
	0% {background-position: 0% 50%;opacity: 0.3;}
	50% {background-position: 100% 50%;opacity: 0.5;}
	100% {background-position: 0% 50%;opacity: 0.3;}
}

.carousel-card.is-active::before {opacity: 1;	background-size: 300% 300%;}
.carousel-card:not(.is-active) {transform: scale(0.8) rotateY(35deg) translateZ(-100px);opacity: 0.45;filter: saturate(0.6) brightness(0.7);}
.carousel-card.is-prev {transform-origin: right center;	transform: scale(0.75) rotateY(45deg) translateX(-80px) translateZ(-150px);}
.carousel-card.is-next {transform-origin: left center;	transform: scale(0.75) rotateY(-45deg) translateX(80px) translateZ(-150px);}
.carousel-card.is-active {transform: scale(1) rotateY(0) translateZ(0);opacity: 1;	z-index: 20;box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 0 0 40px var(--glow-primary),	inset 0 0 20px rgba(56, 189, 248, 0.1);filter: saturate(1.2) brightness(1.1);}
.card-image-container {position: relative;	height: 200px;	overflow: hidden;border-bottom: 1px solid rgba(94, 234, 212, 0.3);}
.card-image {width: 100%;height: 100%;object-fit: cover;transition: transform 1.5s ease;}
.carousel-card.is-active .card-image {transform: scale(1.05);}

/* HUD overlay effect on images */
.card-image-container::after {content: "";position: absolute;	top: 0;	left: 0;right: 0;bottom: 0;	background: linear-gradient(120deg, rgba(56, 189, 248, 0.1), transparent 70%),	radial-gradient(circle at 80% 20%, rgba(94, 234, 212, 0.15), transparent 50%);	pointer-events: none;}

/* Scan line effect */
.card-image-container::before {	content: "";position: absolute;	top: 0;	left: 0;right: 0;bottom: 0;	background: repeating-linear-gradient(0deg,rgba(6, 182, 212, 0.05) 0px,rgba(6, 182, 212, 0.05) 1px,transparent 1px,transparent 4px);pointer-events: none;opacity: 0.5;z-index: 5;}
.card-content {padding: 1.75rem;color: #f1f5f9;}
.card-title {margin-bottom: 0.75rem;	letter-spacing: 1px;position: relative;	display: inline-block;}

/* Text glow effect */
.card-title::after {content: attr(data-text);position: absolute;	top: 0;	left: 0;color: transparent;	-webkit-text-stroke: 0.5px;	filter: blur(3px);opacity: 0;transition: opacity 0.3s ease;}
.carousel-card.is-active .card-title::after {opacity: 0.8;}
.card-description {font-size: 0.9rem;line-height: 1.6;color: rgba(241, 245, 249, 0.8);}

/* HUD-style progress bar */
.card-progress {height: 3px;background: rgba(56, 189, 248, 0.15);margin-top: 1.25rem;position: relative;	border-radius: 4px;	overflow: hidden;}
.progress-value {position: absolute;height: 100%;background: linear-gradient(90deg, #c8d1d7, var(--neon-green));border-radius: 4px;	width: 75%;}
.card-stats {display: flex;	justify-content: space-between;	margin-top: 0.5rem;	font-size: 0.7rem;color: rgba(241, 245, 249, 0.6);}

/* Futuristic navigation buttons */
.carousel-button {	position: absolute;	top: 50%;transform: translateY(-50%);background: rgba(12, 74, 110, 0.3);color: #38bdf8;border: 3px solid #DAEBF3;	border-radius: 50%;	width: 58px;height: 58px;display: flex;justify-content: center;align-items: center;cursor: pointer;z-index: 20;transition: all 0.3s ease;backdrop-filter: blur(5px); filter: drop-shadow(0px 0px 20px #52C9E7);box-shadow: 0 0 15px rgba(56, 189, 248, 0.2);}

.carousel-button:hover {background-color: rgba(14, 165, 233, 0.3);	color: #e0f2fe;transform: translateY(-50%) scale(1.1);	box-shadow: 0 0 20px rgba(56, 189, 248, 0.4);}

.carousel-button:active {transform: translateY(-50%) scale(0.95);}

/* Button hover effect */
.carousel-button::before {	content: "";position: absolute;	inset: -2px;background: radial-gradient(circle, var(--neon-blue), transparent 70%);	border-radius: 50%;	opacity: 0;	z-index: -1;transition: opacity 0.3s ease;}

.carousel-button:hover::before {opacity: 0.7;animation: pulseGlow 2s infinite;}

@keyframes pulseGlow {
	0% {transform: scale(1);opacity: 0.7;}
	50% {transform: scale(1.2);opacity: 0.3;}
	100% {transform: scale(1);opacity: 0.7;}
}

.carousel-button.prev {left: 50px;}
.carousel-button.next {right: 50px;}

/* Indicator dots */
.carousel-indicators {display: flex;justify-content: center;gap: 10px;margin-top: 100px;}
.indicator {width: 24px;height: 4px;background: rgba(56, 189, 248, 0.2);border-radius: 2px;cursor: pointer;transition: all 0.3s ease;}
.indicator.active {background: #DAEBF3;box-shadow: 0 0 10px #52C9E7;}

/* Tech details overlay */
.tech-details {	position: absolute;bottom: 0;left: 0;right: 0;background: #141722;backdrop-filter: blur(10px);padding: 0.75rem;transform: translateY(100%);transition: transform 0.4s cubic-bezier(0.21, 0.61, 0.35, 1);z-index: 25;border-top: 1px solid #56768A;}
.carousel-card.is-active:hover .tech-details {transform: translateY(0);}
.tech-tag {	display: inline-block;	margin-right: 8px;margin-bottom: 15px;margin-top: 15px;padding: 4px 8px;font-size: 0.8rem;background: rgba(82, 201, 231, 0.21);border: 1px solid #56768A;	border-radius: 4px;color: #E4EEF3;}
.tech-tag a {text-decoration: none; color: #E4EEF3;}
.tech-tag:hover {cursor: pointer;}
.is-far-next {transform: scale(0.8) rotateY(-45deg) translateZ(-100px) !important;}

/* Responsive adjustments */
@media (max-width: 768px) {
	.carousel-button {width: 40px;height: 40px;}
	.carousel-button.prev {left: 5px;}
	.carousel-button.next {right: 5px;}
	.carousel-card {min-width: 260px;max-width: 260px;margin: 0 15px;}
	.carousel-card:not(.is-active) {transform: scale(0.85) rotateY(25deg);}
	.carousel-card.is-prev {transform: scale(0.8) rotateY(30deg) translateX(-40px);}
	.carousel-card.is-next {transform: scale(0.8) rotateY(-30deg) translateX(40px);}
	.card-image-container {height: 160px;}
}

@media (min-width: 576px) {

.main_container { margin: 0px 10%; padding: 75px 10px;}
.header_body {gap:25px; height: 50vh;}
.hero_moon_big {zoom: 80%; animation: moverLuna 3s ease-in;}
.hero_moon_small {zoom: 80%; animation: moverLuna 2.7s ease-in;}

h1 {font-size: 60px; width: 100%;}
h2 {font-size: 40px;}
h3 {font-size: 24px; margin: 0;}
h4 {font-size: 22px;}
}

@media (min-width: 768px) {

.hero_moon_big {zoom: 100%; right: 30%;}
.hero_moon_small {zoom: 100%; right: 20%;}
.spaceship_3d {display: inherit; animation: naveAlejaGrande 4s ease-in-out forwards;}
.hero_spaceship_big {display: inherit; animation: naveAleja 4s ease-in-out forwards;}
.hero_spaceship_small {display: inherit; animation: naveAleja 4s ease-in-out forwards;}

.label_wall.animate {animation: wall 1s ease-in-out forwards;}
.label_stones.animate  {animation: stones 1s ease-in-out forwards;}
.areas_interest_content_item {gap: 40px;}
.areas_interest_content_item img {zoom:100%;}

h2 {font-size: 50px; margin-bottom: 30px;}
p, li {font-size: 18px;}
}

@media (min-width: 990px) {

.about_me_body {flex-direction: row; align-items: center; gap:auto;}
.about_me_body_text {width: 50%;}

.label_wall {height: auto; opacity: 1;}
.label_stones  {height: auto; opacity: 1;}

.areas_interest_body, .last_projects_body, .get_touch_body {gap:50px;}
.areas_interest_content {flex-direction: row; align-items: top; row-gap: 100px;}
.areas_interest_content_item {width: 50%; flex-direction: column;}

.arturito.animate  {animation: roll 8s ease-out;}

.typewriting.animate::after {content: ""; animation: writeme 4s linear 1; animation-fill-mode: forwards; animation-delay: 2s;}

h1 {font-size: 64px;}
h2 {font-size: 56px;}
h3 {font-size: 38px;}
h4 {font-size: 28px;}
h5 {font-size: 18px;}
}

@media (min-width: 1440px) {

.about_me_body {align-items: flex-start;}
.about_me_body_pic {zoom: 100%;}
.areas_interest_content_item {width: 30%;;}
}