:root {
	/* General */
	--txt-color: #FFFFFF;
	--bg-color1: #4b0e56;
	--bg-color2: #2b215a;
	/* Header */
	--h-bg-color: #392b79;
	/* Nav SVGs */
	--nav-SVG-size: 50px;
	--nav-SVG-color: #FFF;
	/* Cards */
	--card-txt-color: #000;
	--card-h2-size: 18px;
	--card-txt-size: 12px;
	--card-lbg-ori: 90deg;
	--card-lbg-1: #d0a2eb;
	--card-lbg-2: hsl(281, 100%, 43%);
	--card-shadow-color: #000000bf;
	/* Cards Slider Buttons*/
	--card-SVG-size: 50px;
	--card-SVG-color: #FFF;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
	color: var(--txt-color);
}

a {
	text-decoration: none;
}

h1,
h2 {
	text-align: center;
}

/* Body */
body {
	background-image: radial-gradient(circle, var(--bg-color1), var(--bg-color2));
	color: var(--txt-color);
}

/* Header */
header {
	background-color: var(--h-bg-color);
	position: sticky;
	top: 0;
	z-index: 1;
	padding: 15px 1vw 15px 20vw;
}

/* Nav*/
nav {
	display: flex;
	align-items: center;
}

header nav a:first-child {
	display: inline-block;
	width: fit-content;
	height: fit-content;
}

header nav a:first-child img {
	display: block;
	transform: matrix(-1, 0, 0, 1, 0, 0);
	width: 50px;
}

nav ul {
	list-style-type: none;
	margin-block: 0;
	margin-inline: 0;
	padding-inline: 0;
	width: calc(100% - 50px);
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

nav ul li {
	display: inline-block;
	font-size: 20px;
	width: var(--nav-SVG-size);
	height: var(--nav-SVG-size);
}

header nav ul li a {
	display: flex;
	justify-content: center;
}

header nav ul li a img {
	width: var(--nav-SVG-size);
	height: var(--nav-SVG-size);
}

nav div {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
}

nav div select {
	background-color: transparent;
	border: none;
	color: var(--txt-color);
}

nav div select option {
	color: var(--card-txt-color);
}

/* SVGs */

#projects div:not(:first-child) {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
}

#projects div:not(:first-child)>a {
	width: var(--card-SVG-size);
	height: var(--card-SVG-size);
	display: inline-block;
}

/* Cards */
#carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
}

#carousel [data-content="cards"] {
	display: flex;
	transition: transform 0.5s ease-in-out;
	/* Transición suave */
}

.card {
	flex: 0 0 20%;
}

.card img {
	width: 150px;
}

#carousel button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
}

#carousel button[data-carousel="left"] {
	left: 10px;
}

#carousel button[data-carousel="right"] {
	right: 10px;
}

.progressBar {
	background-color: #000;
}

.progressBar div {
	background-color: #a66ac9;
	color: #FFF;
}

.languajesBox,
.enviromentBox {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
	border: 5px #000 solid;
	margin: 0 10%;
	background-color: #40004b;
	border-radius: 25px;
}

figure {
	display: flex;
	flex-direction: column;
	padding: 18px 0;
}

figure img {
	width: 100px;
	height: 100px;
}

#contact p {
	text-align: center;
	padding: 8px 0 0 0;
}

#about p {
	text-align: center;
	padding: 10px 75px;
	border: 5px #000 solid;
	margin: 35px 50px 50px 50px;
	background-color: #40004b;
	border-radius: 25px;
}

#about h2 {
	margin: 25px 0 0 0;
}

#languajes p {
	text-align: center;
	margin: 15px 0 5px 0;
}

#contact section {
	text-align: center;
	padding: 10px 75px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
	border: 5px #000 solid;
	margin: 0 10% 0 10%;
	background-color: #40004b;
	border-radius: 25px;
	margin: 35px 0 50px 0;
}

#projects h1 {
	padding: 29px 0 16px 0;
}

#contact div {
	text-align: center;
	padding: 10px 75px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-evenly;
	align-items: center;
	align-content: center;
	border: 5px #000 solid;
	margin: 0 10% 0 10%;
	/*background-color: #6d237a;*/
	border-radius: 25px;
	margin: 35px 0 50px 0;
	background-color: black;

	animation: 1s infinite alternate ease-out breathing-color--dark;
}

@keyframes breathing-color--dark {
	from {
		background-color: #3c005e;
	}

	to {
		background-color: #7100b2;
	}
}

;

/**/
#projects div[data-content="cards"] article:first-child {
	margin: 0 5px 0 0;
}

#projects div[data-content="cards"] article:last-child {
	margin: 0 0 0 5px;
}

#projects div[data-content="cards"] article a {
	height: 100%;
	padding: 15px;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 2em 1fr 150px;
	grid-column-gap: 0px;
	grid-row-gap: 10px;
	align-items: center;
	justify-items: center;
}

#projects div[data-content="cards"] article a h2 {
	font-size: var(--card-h2-size);
	text-align: center;
	grid-area: 1 / 1 / 2 / 2;
}

#projects div[data-content="cards"] article a p {
	margin-block: 15px;
	margin: auto 0;
	font-size: var(--card-txt-size);
	text-align: justify;
	grid-area: 2 / 1 / 3 / 2;
}

#projects div[data-content="cards"] article a img {
	margin-top: auto;
	max-height: 150px;
	height: 150px;
	grid-area: 3 / 1 / 4 / 2;
}

#carousel {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.card {
	flex: 0 0 20%;
	box-sizing: border-box;
	padding: 10px;
	text-align: center;
	border: 1px solid #ccc;
}

#carousel button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	color: white;
	border: none;
	padding: 10px;
	cursor: pointer;
}

#carousel [data-carousel="left"] {
	left: 10px;
}

#carousel [data-carousel="right"] {
	right: 10px;
}

#carousel [data-content="cards"] {
	display: flex;
	transition: transform 0.5s ease-in-out;
	justify-content: space-between;
	align-items: stretch;
	padding: 15px 0;
}


#carousel [data-content="cards"] article {
	display: flex;
	flex-direction: column;
	max-height: 350px;
	height: 350px;
	max-width: 400px;
	/*flex: 0 0 calc((100vw/5) - (3*7px));*/
	color: var(--card-txt-color);
	background-image: linear-gradient(var(--card-lbg-ori), var(--card-lbg-1), var(--card-lbg-2));
	border-radius: 15px;
	-webkit-box-shadow: 6px 4px 5px 0px var(--card-shadow-color);
	-moz-box-shadow: 6px 4px 5px 0px var(--card-shadow-color);
	box-shadow: 6px 4px 5px 0px var(--card-shadow-color);
	margin: 0 5px;
}

#carousel button {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background-color: rgba(0, 0, 0, 0.5);
	border: none;
	padding: 10px;
	cursor: pointer;
	width: var(--card-SVG-size);
}

#carousel [data-carousel="left"] {
	left: 10px;
}

#carousel [data-carousel="right"] {
	right: 10px;
	transform: matrix(-1, 0, 0, 1, 0, 0);
}

#carousel button:disabled {
	filter: opacity(0.5);
	cursor: not-allowed;
}

/* Custom Selector */
#custom-select {
	position: relative;
	display: inline-block;
}

#language-selected {
	background-color: #f7f7f7;
	color: #333333;
	padding: 5px 10px;
	cursor: pointer;
}

/* Style the dropdown items */
.select-language {
	position: absolute;
	display: none;
	background-color: black;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 4px;
	z-index: 1;
	width: 100%;
}

/* Style the dropdown items */
.select-language div {
	padding: 10px;
	cursor: pointer;
}

/* Style the dropdown items on hover */
.select-language div:hover {
	background-color: transparent;
}

.langFlag {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
}

/*
nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	justify-content: center;
	gap: 20px;
}

nav ul li {
	display: inline;
}

nav ul li a {
	color: white;
	text-decoration: none;
	font-size: 20px;
	font-weight: bold;
}

#projects {
	padding: 150px 20px 50px;
}

.highlight {
	color: #a559eb;
	font-weight: bold;
}

button {
	background: #763CAC;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	font-size: 18px;
	margin-top: 20px;
}

button:hover {
	background: #5A2A8A;
}

#experience,
#projects,
#contact {
	padding: 50px 20px;
}

@media (max-width: 768px) {
	nav ul {
		flex-direction: column;
	}

	header {
		text-align: center;
	}
}

:root {
	--screenWidth: 300px;
	--lineClamp: 6;
	--slideHeight: 350px;
	--slideWidth: 200px;
	--spaceBtwSlideLeft: 0px;
	--spaceBtwSlideRight: 0px;
	--slideBorderRadiusSlide: 10px;
	--paddingTopSlide: 10px;
	--paddingLeftSlide: 0px;
	--ImgWidthSlide: 100%;
	--marginLeftRight: 0px;
	--marginTop: 0px;
	--marginBottom: 0px;
	--marginLeft: 0px;
	--marginRight: 0px;
	--borderRadiusImg: 0px;
	--paddingLeftRight: 0px;
	--paddingTop: 0px;
	--paddingBottom: 0px;
	--paddingLeft: 0px;
	--paddingRight: 0px;
	--slideBorderSize: 1px;
	--slideBorderColor: #000000;
	--slideBorderType: solid;
	--slideSolidBackgroundColor: #000000;
	--slideGradientBackgroundColorStart: #d0a2eb;
	--slideGradientBackgroundColorEnd: #9400d9;
	--slideGradientBgStartOrientation: 90deg;
	--slideGradientBgStartIntensity: 0%;
	--slideGradientBgEndIntensity: 100%;
	--marginTopTitle: 15px;
	--marginBottomTitle: 15px;
	--marginLeftTitle: 10px;
	--marginRightTitle: 10px;
	--titleAlignment: center;
	--titleColor: #000c2e;
	--textColor: #5f637d;
	--TitleSize: 18px;
	--textAlignment: left;
	--textSize: 12px;
	--titleWeight: 600;
	--textWeight: normal;
	--marginTopText: 15px;
	--marginBottomText: 15px;
	--marginLeftText: 10px;
	--marginRightText: 10px;
	--imgBackground: url(https://cdn.mos.cms.futurecdn.net/i7xipepPSZQaTCmoQFbbwc.jpg);
	--buttonFontSize: 13px;
	--buttonFontColor: white;
	--buttonTextAlign: center;
	--buttonBorderRadius: 0px;
	--buttonBgColor: #2c8ae8;
	--buttonWidth: 145px;
	--buttonpaddingBottom: 5px;
	--buttonpaddingTop: 5px;
	--buttonpaddingLeft: 15px;
	--buttonpaddingRight: 15px;
	--buttonWeight: 100;
	--buttonBorderSize: 0px;
	--buttonBorderColor: #275EFE;
	--buttonBorderType: solid;
}

::-webkit-scrollbar {
	width: 0px;
}

.rounded-reel-item {
	margin-left: var(--spaceBtwSlideLeft);
	margin-right: var(--spaceBtwSlideRight);
	display: -webkit-inline-box;
	display: -webkit-inline-flex;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	overflow: hidden;
	padding-top: var(--paddingTopSlide);
	padding-bottom: var(--paddingTopSlide);
	padding-left: var(--paddingLeftSlide);
	padding-right: var(--paddingLeftSlide);
	flex-direction: column;
	border-radius: var(--slideBorderRadiusSlide);
	min-width: 100vw;
}

.controlerFinalCarousel div {
	text-align: center;
	border-radius: 50px;
	border: none;
	height: 20px;
	width: 20px;
	display: flex;
	margin: 10px 20px;
	padding: 5px;
	box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px 0px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
	backdrop-filter: blur(11px) saturate(180%);
	-webkit-backdrop-filter: blur(11px) saturate(180%);
	background-color: rgba(255, 255, 255, 0.75);
	cursor: pointer;
	justify-content: center;
	align-items: center;
}

.controlerFinalCarousel div img {
	width: 16px;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
}

.containerVertical {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.slideTemplate {
	display: inline-block;
	width: var(--slideWidth);
	height: var(--slideHeight);
	border-radius: var(--slideBorderRadiusSlide);
	box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px 0px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
	margin: 20px;
	border-width: var(--slideBorderSize);
	border-color: var(--slideBorderColor);
	border-style: var(--slideBorderType);
	background-color: var(--slideSolidBackgroundColor);
	overflow: hidden;
	transition: 300ms ease-out;
}

.slideTemplate img {
	width: var(--ImgWidthSlide);
	height: var(--ImgHeightSlide);
	margin-top: var(--marginTop);
	margin-bottom: var(--marginBottom);
	margin-left: var(--marginLeft);
	margin-right: var(--marginRight);
	padding-top: var(--paddingTop);
	padding-bottom: var(--paddingBottom);
	padding-left: var(--paddingLeft);
	padding-right: var(--paddingRight);
	border-radius: var(--borderRadiusImg);
}

.backgroundColor {
	background: linear-gradient(var(--slideGradientBgStartOrientation), var(--slideGradientBackgroundColorStart) var(--slideGradientBgStartIntensity), var(--slideGradientBackgroundColorEnd) var(--slideGradientBgEndIntensity));
}

.slideTemplate p,
.slideTemplate h2 {
	word-wrap: break-word;
	white-space: normal;
	max-width: 200px;
}

.slideTemplate p {
	margin-top: var(--marginTopText);
	margin-bottom: var(--marginBottomText);
	margin-left: var(--marginLeftText);
	margin-right: var(--marginRightText);
	text-align: var(--textAlignment);
	color: var(--textColor);
	font-size: var(--textSize);
	font-weight: var(--textWeight);
	white-space: initial;
	line-height: 1.6;
	color: black;
}

.slideTemplate h2 {
	margin-top: var(--marginTopTitle);
	margin-bottom: var(--marginBottomTitle);
	margin-left: var(--marginLeftTitle);
	margin-right: var(--marginRightTitle);
	text-align: var(--titleAlignment);
	color: var(--titleColor);
	font-size: var(--TitleSize);
	font-weight: var(--titleWeight);
	font-family: 'Fira Sans', sans-serif;
}

.slideTemplate a {
	margin: auto;
	display: block;
	text-decoration: none;
	padding: 5px 15px;
	font-size: var(--buttonFontSize);
	line-height: 25px;
	font-weight: var(--buttonWeight);
	letter-spacing: -.005em;
	color: var(--buttonFontColor);
	text-align: var(--buttonTextAlign);
	border-radius: var(--buttonBorderRadius);
	cursor: pointer;
	background-color: var(--buttonBgColor);
	width: var(--buttonWidth);
	text-transform: none !important;
	padding-bottom: var(--buttonpaddingBottom);
	padding-top: var(--buttonpaddingTop);
	padding-left: var(--buttonpaddingLeft);
	padding-right: var(--buttonpaddingRight);
	border-width: var(--buttonBorderSize);
	border-color: var(--buttonBorderColor);
	border-style: var(--buttonBorderType);
	font-family: "Fira Sans", sans-serif;
}

.slideContainer {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: center;
	align-items: flex-start;
}

.backgroundImage {
	background-image: var(--imgBackground);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mainContainerCarouselFinal {
	padding-left: 0px;
	padding: 0px 0px 0px;
	max-width: 1200px;
	margin-bottom: 40px;
	overflow-x: hidden scroll;
	padding-top: 12px;
	display: block;
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	width: calc(var(--screenWidth));
	max-width: 1200px;
	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;
	scroll-behavior: smooth;
	scroll-snap-align: center;
	scroll-padding-left: 20%;
	mask-image: linear-gradient(to right, transparent 0%, black 7% 94%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 7% 94%, transparent 100%);
	mask-mode: alpha;
	margin: 20px 0px 0px 0px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
}

.controlerFinalCarousel {
	width: calc(var(--screenWidth));
	display: flex;
	justify-content: space-around;
	align-items: center;
}*/