/*
==============================
  * CSS TABLE CONTENT *  
==============================
1. GOOGLE FONT
2. VARIABLES CSS
3. BASE
4. REUSABLE CSS CLASSES
5. HEADER & NAV
6. BREAKPOINTS
==============================
  * END TABLE CONTENT *  
==============================
*/

/* ============= VARIABLES CSS ============= */

:root {
	color-scheme: light dark;

	--header-height: 60px;

	/* Colores */
	--primary-color: white;
	--bg-color-section1: black;
	--bg-color-section2: light-dark(#fafafa, #6a6a6a);
	--bg-color-buttons: light-dark(#e0e0e0, #6a6a6a);

	/* Typografia */
	--normal-font-size: 16px;
	--small-font-size: 12px;

	/* Grosores */
	--font-semi-bold: 600;

	/* Margenes */
	--mr-2: 16px;
	--mr-3: 20px;
	--mr-4: 26px;
}

/* ============= BASE ============= */
html {
	box-sizing: border-box;
	scroll-behavior: smooth;
	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}
	body {
		font-family: 'Poppins', sans-serif;
		font-size: var(--normal-font-size);
		margin: 0;
		color: var(--primary-color);
	}
	ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
	}

	img {
		max-width: 100%;
		height: auto;
		display: block;
	}

	/* darkmode  */
	&:has([name='color-scheme']:checked) {
		color-scheme: dark;
	}
	&:has([name='color-scheme']) {
		color-scheme: light;
	}
}

/* ============= REUSABLE CLASSES ============= */
.section {
	padding: 4rem 0;
	.section__title {
		text-align: center;
		margin: var(--mr-3) 0;
	}
}

.grid--container {
	max-width: 1024px;
	display: grid;
	margin: 0 auto;
	padding: 0 var(--mr-3);
}

.flex--container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.btn {
	display: inline-block;
	padding: 1.5rem 4rem;
	border: none;
	outline: none;
	border-radius: 5px;
	cursor: pointer;
	transition: all 0.3s ease-in-out;
	color: var(--bg-color-section2);
	background-color: var(--primary-color);

	&:hover {
		transform: translateY(-4px);
		box-shadow: 0px 3px 10px #ee991a;
	}
}

.btn--primary {
	color: white;
	background-color: gray;
}

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

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--bg-color-buttons);
	border-radius: 4px;
}

/* ============= Header & NavBar ============= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--header-height);
	align-content: center;
	background-color: transparent;
	z-index: 2;
	animation: animation-bar linear both;
	animation-timeline: scroll(root block);
	animation-range: 0 200px;

	.navbar {
		justify-content: space-between;

		.navbar__logo {
			column-gap: 0.25rem;
			font-weight: var(--font-semi-bold);
			color: var(--primary-color);
		}

		.navbar__menu {
			position: fixed;
			top: -500%;
			left: 0;
			width: 100%;
			border-radius: 0 0 12px 12px;
			background-color: gray;
			box-shadow: 0px 1px 9px 2px #00000024;
			padding: 2rem 0;
			transition: all 0.6s;
			z-index: 2;

			&:target {
				top: 0;
			}

			.navbar__list {
				flex-direction: column;
				gap: 20px;

				.navbar__item {
					.navbar__link {
						color: white;
						font-size: 1.1rem;
						font-weight: var(--font-semi-bold);
						transition: color 0.3s;

						&:hover {
							color: #ee991a;
						}
					}

					.active {
						border-bottom: 2px solid #ee991a;
					}
				}
			}

			.btn__close {
				position: absolute;
				top: var(--mr-2);
				right: var(--mr-2);
				background-color: blue;
				width: 38px;
				height: 38px;
				border-radius: 50%;

				&:hover {
					background-color: #ee0a0a;
				}
			}
		}

		/* toggles  */
		.navbar__toggles {
			gap: 1rem;

			/* darkmode toggle */
			.navbar__toggle--darkmode {
				.navbar__toggle--darkmode-label {
					width: 42px;
					height: 20px;
					position: relative;
					display: block;
					background: #ebebeb;
					border-radius: 20px;
					box-shadow: inset 0px 2px 5px #00000066, inset 0px -2px 5px #ffffff66;
					cursor: pointer;
					transition: 0.3s;

					&::after {
						content: '';
						width: 16px;
						height: 16px;
						position: absolute;
						top: 2px;
						left: 2px;
						background: linear-gradient(180deg, #ffcc89, #d8860b);
						border-radius: 20px;
						box-shadow: 0px 5px 10px #00000033;
						transition: 0.3s;
					}

					&:active::after {
						width: 40px;
					}

					i {
						position: absolute;
						font-size: 14px;
						top: 3px;
						z-index: 1;

						&.navbar__toggle--darkmode-sun {
							left: 3px;
							color: var(--bg-color-section2);
							transition: 0.3s;
						}

						&.navbar__toggle--darkmode-moon {
							right: 2px;
							color: #7e7e7e;
							transition: 0.3s;
						}
					}
				}

				.navbar__toggle--darkmode-input {
					visibility: hidden;

					&:checked + label {
						background-color: #242424;

						&::after {
							left: 40px;
							transform: translateX(-100%);
							background: linear-gradient(180deg, #777, #3a3a3a);
						}

						.bx-sun {
							color: #7e7e7e;
						}

						.bx-moon {
							color: var(--bg-color-section2);
						}
					}
				}
			}

			/* language toggle */
			.navbar__toggle--language {
				.navbar__toggle--language-label {
					width: 42px;
					height: 20px;
					position: relative;
					display: block;
					background: #ebebeb;
					border-radius: 20px;
					box-shadow: inset 0px 2px 5px #00000066, inset 0px -2px 5px #ffffff66;
					cursor: pointer;
					transition: 0.3s;

					&::after {
						content: '';
						width: 16px;
						height: 16px;
						position: absolute;
						top: 2px;
						left: 2px;
						background-image: url(../img/u-k.png);
						background-size: cover;
						background-repeat: no-repeat;
						border-radius: 50%;
						box-shadow: 0px 5px 10px #00000033;
						transition: 0.3s;
					}
				}

				.navbar__toggle--language-input {
					visibility: hidden;

					&:checked + label {
						&::after {
							left: 40px;
							transform: translateX(-100%);
							background-image: url(../img/spain.png);
						}
					}
				}
			}
		}
	}
	.btn__open,
	.btn__close,
	.navbar__logo i {
		font-size: 2.2rem;
		color: yellow;
		transition: 0.3s;
	}
	.btn__open {
		&:hover {
			background-color: #dfdfdf;
		}
	}
}

@keyframes animation-bar {
	to {
		background-color: var(--bg-color-section2);
		backdrop-filter: blur(5px);
		box-shadow: 0px 10px 100px #0000001a;
	}
}

/* ============= Home ============= */
.home {
	background-color: black;
	position: relative;
	overflow: hidden;

	.home__layer {
		position: absolute;
		font-size: 70px;
		color: var(--primary-color);
	}

	.home__layer--1 {
		top: 15%;
		left: 5%;
	}

	.home__layer--2 {
		top: 25%;
		left: 80%;
	}

	.home__layer--3 {
		top: 65%;
		left: 90%;
	}

	.home__layer--4 {
		top: 15%;
		left: 70%;
	}

	.home__layer--5 {
		top: 20%;
		left: 50%;
	}

	.home__layer--6 {
		top: 40%;
		left: 55%;
	}

	.home__layer--7 {
		top: 75%;
		left: 40%;
	}

	.home__layer--8 {
		top: 50%;
		left: 12%;
	}

	.home__layer--9 {
		top: 40%;
		left: 3%;
	}

	.home__layer--10 {
		top: 70%;
		left: 7%;
	}

	.home__layer--11 {
		top: 10%;
		left: 20%;
	}

	.home__container {
		position: relative;
		row-gap: 2rem;
		padding: var(--header-height) 0 3rem;
		.home__image {
			width: clamp(min(320px, 100%), 85vw, 445px);
			height: auto;
			margin: 0 auto;
		}
		.home__social {
			position: absolute;
			top: 10rem;
			left: 1.2rem;
			flex-direction: column;
			row-gap: var(--mr-2);
			.home__social-link {
				color: #777;
				font-size: 1.7rem;
				transition: color 0.3s;
				text-align: center;
				&:hover {
					color: var(--primary-color);
				}
			}
		}
		.home__info {
			.home__title,
			.home__description {
				text-align: center;
			}
			.home__title {
				margin: 0 auto;
				margin-bottom: var(--mr-2);
				text-transform: uppercase;
				border-right: 4px solid;
				white-space: nowrap;
				width: 15ch;
				animation: typing 2s infinite steps(15) alternate,
					blink 0.3s infinite step-end alternate;
				overflow: hidden;
			}
		}
		.home__buttons {
			text-align: center;
		}
	}
}

@keyframes typing {
	from {
		width: 0;
	}
}

@keyframes blink {
	50% {
		border-color: transparent;
	}
}

/* ============= WORKFLOW SECTION ============= */
.about {
	background-color: black;
	overflow: hidden;
	.about__container {
		.about__description {
			text-align: center;
		}
		.about__cards {
			margin-top: 2rem;
			flex-direction: column;
			gap: 4rem;
			.about__card {
				background-color: var(--bg-color-section1);
				padding: 0.1rem;
				border-radius: 5px;
				box-shadow: 0px 10px 100px #0000001a;
				.about__card--img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
		}
	}
}

/* ============= skills ============= */
.skills {
	background-color: rgb(0, 0, 0);
	.skills__container {
		.skills__description {
			text-align: center;
		}
		/* SLIDER  */
		.skills__wrapper {
			.skills__cards {
				display: flex;
				flex-direction: column;
				gap: 1rem;
				width: 100%;

				.skills__cards-container {
					background-color: orange;
					height: 100px;
					padding: 20px;
					border-radius: 1rem;
					text-align: center;
					width: inherit;
					transition: 0.5s cubic-bezier(0.6, -0.28, 0.735, 0.045);
					overflow: hidden;

					.skills__cards-title {
						list-style: none;
						cursor: pointer;
						height: 100%;
						align-items: start;

						.bx {
							width: 50px;
							background-color: var(--bg-color-section2);
							color: var(--primary-color);
							font-size: 3rem;
							border-radius: 50%;
							padding: 8px;
						}
					}
					.skills__card-container {
						color: var(--bg-color-section2);
						height: 300px;
						overflow: hidden;
					}

					&[open] {
						height: 400px;
						.skills__cards-title {
							height: auto;
						}
					}
				}
			}
		}
		.skills__tags {
			flex-direction: column;
			margin-top: var(--mr-4);
			.skills__tags-container {
				flex-wrap: wrap;
				gap: 1rem;
			}
			.skills__tag {
				display: inline-block;
				padding: 0.75rem 1.5rem;
				font-weight: var(--font-semi-bold);
				font-size: var(--small-font-size);
				background-color: var(--primary-color);
				color: var(--bg-color-section2);
				border-radius: 5px;
			}
		}
	}
}

/* ============= Projects ============= */
.projects {
	background-color: black;
	.projects__container {
		gap: 2rem;
		.projects__inner {
			margin: 0;
			.projects__image {
				border-radius: 5px;
				img {
					width: 100%;
					height: auto;
					object-fit: cover;
					border-radius: 5px;
					box-shadow: 6px 11px 13px 0 #0000002e;
					animation: showing linear both;
					animation-timeline: view();
					animation-range: entry 25% cover 35%;
				}
			}
			.projects__info {
				padding: 1rem;
				.projects__buttons {
          a { color: red; } /* CSS link color */
					display: flex;
					flex-wrap: wrap;
					gap: 1rem;
					.projects__button {
						color: var(--bg-color-section2);
						background-color: var(--primary-color);
						padding: 0.75rem 1.5rem;
						font-size: var(--small-font-size);
					}
				}
			}
		}
	}
}

@keyframes showing {
	from {
		opacity: 0;
		translate: 0 100px;
	}

	to {
		opacity: 1;
		translate: 0 0;
	}
}

/* ============= Contact ============= */
.contact {
	background-color: gray;
	background-image: url(../img/test00.jpg);
	.contact__container {
		gap: 2rem;
		.contact__info {
			.contatc__info-data {
				font-style: normal;
				display: flex;
				flex-direction: column;
				gap: 1rem;
				padding: 2rem 0;
			}
		}

		.contact__form {
			/* width: 100%;
			padding: 3rem 1.5rem 2rem;
			background-color: var(--bg-color-section2);
			border-radius: 5px;
			margin: 0 auto; */
			text-align: center;

			
			background: linear-gradient(135deg ,rgba(255, 255, 255, 0.1), rgba(225, 255, 255, 0));
			backdrop-filter: blur(10px);
			-webkit-backdrop-filter: blur(10px);
			border-radius:  20px;
			border: 1px solid rgba(255, 255, 255, 0.18);
			box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
			padding: 15px;
			.contact__form-container {
				.contact__form-group {
					margin-bottom: var(--mr-4);

					.contact__form-label {
						display: block;
						margin-bottom: 8px;
					}

					.contact__form-input {

						width: 100%;
						padding: 1rem;
						font-size: 1.2rem;
						font-weight: var(--font-semi-bold);
						border-radius: 5px;
						background-color: #ebebeb;
						border: 1px solid #f0f0f0;
					}

					textarea {
						resize: none;
					}
				}
			}
		}
	}
}

/* ============= Footer ============= */
.footer {
	background-color: #111;
	color: #efefef;
	padding-bottom: 2rem;
	.footer__container {
		gap: 2rem;
		.footer__info {
			.footer__title {
				font-size: 1.5rem;
			}
		}
		.footer__social {
			.footer__social-list {
				display: flex;
				gap: var(--mr-2);
				font-size: 1.5rem;

				.footer__social-link {
					color: var(--bg-color-section2);
					transition: text-shadow 0.3s;
					&:hover {
						text-shadow: 2px 3px #ee991a55;
					}
				}
				.footer__social-link {
					text-align: center;
					margin-top: 2rem;
					margin-bottom: 0;
					border-top: 1px solid #222;
					padding-top: 2rem;
				}
			}
		}
	}
	.footer__copy {
		text-align: center;
		border-top: 1px solid #222;
		padding-top: 2rem;
	}
}

/* ============= Media Queries ============= */

@media (width >= 768px) {
	:root {
		--header-height: 90px;
		--normal-font-size: 18px;
		--small-font-size: 14px;
	}

	.header {
		.navbar {
			.navbar__menu {
				position: static;
				border-radius: 0;
				background-color: transparent;
				box-shadow: none;

				.navbar__list {
					flex-direction: row;
				}
				.btn__close {
					display: none;
				}
			}
		}
		.btn__open {
			display: none;
		}
	}

	.home {
		.home__container {
			grid-template-columns: repeat(2, 1fr);
			grid-auto-rows: auto;

			.home__image {
				width: clamp(min(375px, 100%), 48vw, 500px);
				grid-column: 2 / 3;
				grid-row: 1 / 4;
				transform: translateY(3.3rem);
			}

			.home__social {
				position: relative;
				top: 0;
				left: 0;
				flex-direction: row;
				gap: 1.5rem;
				grid-row: 2 / 3;

				.home__social-link {
					font-size: 2rem;
				}
			}

			.home__info {
				.home__title {
					margin-top: 2rem;
					font-size: 2rem;
				}

				.home__description {
					font-size: 1.3rem;
					padding: 0 30px;
				}
			}
		}
	}

	.about {
		.about__container {
			.about__cards {
				flex-direction: row;

				.about__card {
					transition: transform 0.2s;

					&:nth-child(1) {
						transform: transform 0.2s;
					}

					&:nth-child(3) {
						transform: transform 0.2s;
					}

					&:hover {
						z-index: 1;
						cursor: pointer;
						transform: scale(1.1);
					}
				}
			}
		}
	}

	.skills {
		.skills__container {
			/* SLIDER  */
			.skills__wrapper {
				.skills__cards {
					flex-direction: row;
					.skills__cards-container {
						height: 500px;
						width: 130px;
						&[open] {
							height: 500px;
							width: inherit;
						}
					}
				}
			}
		}
	}

	.projects {
		.projects__container {
			padding: 3rem 0;
			gap: 5rem;

			.projects__project {
				.projects__inner {
					grid-template-columns: repeat(3, 1fr);
				}

				&:nth-child(even) {
					.projects__image {
						order: 2;
					}

					.projects__info {
						order: 1;
						text-align: right;
					}

					.projects__buttons {
						justify-content: flex-end;
					}
				}
			}
		}
	}

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

	.footer {
		.footer__container {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}