:root {
	--colorBtn1: #007bff;
	--colorBtn2: #007bff;
	--colorAmarilloOscuro: rgba(255, 225, 27, 0.475);
	--negro: rgb(0, 0, 0);
	--blanco: rgb(255, 255, 255);
	--azulOscuro: #002e5d;
	--azulClaro: #007bff;
	--gris: #cccccc;
	--azulPrueba: #023555;
	--colorTextoOscuro: #333333;
	--colorTextoClaro: #ffffff;
	--morado: #221d30;
	--fondoGeneralPortafolio: #cccccc;

	--fuentePrincipal: "Lato", sans-serif;
	--fuenteSecundaria: "Saira", sans-serif;
	--fuenteTerciaria: "Roboto", sans-serif;

	--scaleBtn: scale(1.3);
}

html {
	scroll-behavior: smooth;
	box-sizing: border-box;
	font-size: 62.5%;
}

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

h1,
h2,
h3 {
	font-family: var(--fuenteSecundaria);
}

body {
	line-height: 1.5;
	font-size: 1.6rem;
	font-family: var(--fuentePrincipal);
}

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

.container-120 {
	max-width: 120rem;
	margin: 0 auto;
}

.container-140 {
	max-width: 140rem;
	margin: 0 auto;
}

.text-center {
	text-align: center;
}

/*--Pagina-bienvenidos-- */

.bg-color-index {
	background-image: linear-gradient(to right, rgba(21, 21, 21, 0.552) 0%, rgba(0, 0, 0, 0.603) 100%), url(../imgs/photo-hero1.avif);
	background-repeat: no-repeat;
	height: 100vh;
}
@media (min-width: 768px) {
	.bg-color-index {
		height: 100vh;
		background-size: cover;
		background-image: linear-gradient(to right, rgba(21, 21, 21, 0.758) 0%, rgba(0, 0, 0, 0.785) 100%), url(../imgs/photo-hero1.avif);
	}
}

.container-bvn {
	display: flex;
	flex-direction: column;
	height: 100vh;
	justify-content: center;
}
@media (min-width: 768px) {
	.container-bvn {
		display: flex;
		flex-direction: row-reverse;
		justify-content: space-evenly;
		align-items: center;
		height: 100vh;
	}
}

.container-bvn img {
	border-radius: 40rem;
	max-width: 20rem;
	margin: 0 auto;
}
@media (min-width: 980px) {
	.container-bvn img {
		margin: 5rem;
		max-width: 40rem;
	}
}

.container-contenido-bvn {
	color: var(--blanco);
	backdrop-filter: blur(1rem);
	text-align: center;
	border-radius: 3rem;
	padding: 2rem 0;
	transition: background, color, 0.3s ease;
}
@media (min-width: 768px) {
	.container-contenido-bvn {
		padding: 2rem 4rem;
		box-shadow: 0.3rem 0.3rem 3rem #0000005c;
	}
}

.container-contenido-bvn h1 {
	font-size: 3.9rem;
	margin: 0;
}
@media (min-width: 980px) {
	.container-contenido-bvn h1 {
		font-size: 8rem;
	}
}

.container-contenido-bvn p {
	font-size: 2rem;
	margin: 3rem 0;
}
@media (min-width: 980px) {
	.container-contenido-bvn p {
		font-size: 3rem;
	}
}

.container-contenido-bvn span {
	color: var(--colorBtn1);
}

.container-botones-bvn {
	margin-top: 5rem;
}

.container-botones-bvn a {
	display: block;
	padding: 0.8rem 1rem;
	margin: 2rem;
	background-color: var(--colorBtn1);
	text-decoration: none;
	color: var(--blanco);
	border-radius: 1rem;
	border: 0.1rem solid rgba(0, 0, 0, 0);
	font-weight: bold;
	transition: color, background, 0.3s ease;
	font-size: 1.3rem;
}
@media (min-width: 980px) {
	.container-botones-bvn a {
		display: inline-block;
		font-weight: normal;
		font-size: 1.6rem;
	}

	.btn-cv {
		width: 13rem;
	}
}

.container-botones-bvn .btn-cv {
	background-color: #00000000;
	border: 0.1rem solid var(--colorBtn2);
}

.container-botones-bvn .btn-portfolio {
	color: rgb(0, 0, 0);
}
@media (min-width: 980px) {
	.container-botones-bvn .btn-portfolio {
		width: 20rem;
		background-color: var(--colorBtn2);
		color: var(--blanco);
	}
}

.container-botones-bvn a:hover {
	box-shadow: -0.2rem 0.2rem 2rem rgba(255, 255, 255, 0.727);
	background-color: var(--colorBtn1);
	color: var(--negro);
	border: 0.1rem solid var(--negro);
	font-weight: bold;
	border-radius: 2rem;
	text-decoration: underline;
}
@media (min-width: 768px) {
	.container-botones-bvn a:hover {
		transform: var(--scaleBtn);
	}
}

/* -- PAGINA PORTAFOLIO.HTML-- */

/* --NavBar-- */
.fondo-navbar {
	background-color: #002f5db6;
	backdrop-filter: blur(7rem);
	margin-bottom: 70rem;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1;
}
.icon-nav {
	font-family: var(--fuenteSecundaria);
	font-size: x-large;
	font-weight: 700;
	font-size: 1.8rem;
}
@media (min-width: 768px) {
	.icon-nav {
		font-size: 2.5rem;
	}
}

.nav-link {
	font-family: var(--fuentePrincipal);
	font-size: larger;
	transition: color, background, 0.3s ease;
	color: var(--blanco);
}

.nav-link:hover {
	color: var(--colorBtn1);
	font-weight: bold;
	text-decoration: underline;
}
/* --FIN NAVBAR-- */

/* --HEADER Portafolio--  */
.bg-color-portafolio {
	background: linear-gradient(to right, #10ffdb00 0%, rgba(0, 0, 0, 0) 100%), var(--fondoGeneralPortafolio);
}

.hero-portafolio {
	background: linear-gradient(to left, rgba(0, 0, 0, 0.502) 0%, rgba(0, 0, 0, 0.5) 100%), url(../imgs/hero.portafolio.jpg);
	height: 100vh;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom;
}

/* --Section sobremi-- */
.section-sobremi {
	color: var(--colorTextoOscuro);
	padding: 8rem 1rem;
}

.section-sobremi h2 {
	text-decoration: underline;
	font-size: 3rem;
	padding-bottom: 3rem;
}
@media (min-width: 768px) {
	.section-sobremi h2 {
		text-decoration: underline;
		font-size: 5rem;
	}
}

/* --Section-Stacks-- */
.section-stacks {
	color: var(--colorTextoClaro);
	background-color: var(--azulOscuro);
	padding: 8rem 1rem;
}

.section-stacks h2 {
	text-decoration: underline;
	font-size: 3rem;
	margin: 0;
}
@media (min-width: 768px) {
	.section-stacks h2 {
		text-decoration: underline;
		font-size: 5rem;
	}
}

.section-stacks p {
	margin: 0;
	padding: 3rem 0;
}

.contenedor-stacks {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 2rem;
}
@media (min-width: 1200px) {
	.contenedor-stacks {
		gap: 7rem;
		justify-content: center;
	}
}

.contenedor-stacks a {
	text-decoration: none;
	color: var(--gris);
	transition: color, 0.3s ease;
	height: 12rem;
}
@media (min-width: 768px) {
	.contenedor-stacks a {
	 height: 20rem;
}
}

.contenedor-stacks a:hover {
	transform: scale(1.09);
	font-size: 1.8rem;
	color: var(--colorBtn1);
	font-weight: bold;
}

.contenedor-stacks img {
	width: 10rem;
	margin: 0 auto;
}
@media (min-width: 980px) {
	.contenedor-stacks img {
		width: 15rem;
	}
}

/* --Section proyectos-- */
.section-proyectos {
	color: var(--colorTextoOscuro);
	padding: 8rem 1rem;
}
@media (min-width: 768px) {
	.container-proyectos {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		row-gap: 5rem;
		justify-items: center;
	}
}
@media (min-width: 1024px) {
	.container-proyectos{
		grid-template-columns: repeat(3, 1fr);
	}
}

.section-proyectos h2 {
	text-decoration: underline;
	font-size: 3rem;
	margin: 0 0 6rem 0;
}
@media (min-width: 768px) {
	.section-proyectos h2 {
		text-decoration: underline;
		font-size: 5rem;
	}
}

.card-proyecto { 
	background-color: white;
	margin: 3rem 0 0 0;
	padding: 1rem 0 3rem 0;
	box-shadow: -.3rem .3rem 1rem #3333337a;
	border-radius: .5rem;
}
@media (min-width: 500px) {
	.card-proyecto {
		max-width: 35rem;
		margin: 2rem auto 0 auto;
	}
}
@media (min-width: 1024px) {
	.card-proyecto {
		max-width: 30rem;
		margin: 0;	
	}
}
@media (min-width: 1200px) {
	.card-proyecto {
		max-width: 35rem;
	}
}

.card-proyecto h3 { 
	padding: 2rem;
	margin: 0;
}

.card-proyecto .decripcion-proyecto {
	margin: 0;
	padding: 0 1rem;
}

.trabajando { 
	background-color: var(--blanco);
	border-radius: 0.5rem;
	box-shadow: -.3rem .3rem 1rem #3333337a;
	padding: 3rem 1rem;
	margin: 6rem; 
	margin: 2rem auto 0 auto;
}

@media (min-width: 768px) {
	.trabajando { 
		grid-column-start: 1;
		grid-column-end: 3;
		margin: 0 3rem;
		background-color: var(--blanco);
		max-width: 72rem;
	}
}
@media (min-width: 1024px) {
	.trabajando { 
		grid-column-start: 2;
		grid-column-end: 4;
	}
}

.trabajando .tittle-trabajando{
	font-size: 3rem;
	color: var(--colorTextoOscuro);
	text-decoration: underline var(--azulClaro);
}
@media (min-width: 768px) {
	.trabajando .tittle-trabajando{
		font-size: 4rem;
	}
}
.trabajando p { 
	padding: 2rem ;
	margin: 0;
	font-size: 2rem;
}
@media (min-width: 768px) {
	.trabajando p { 
		padding: 3rem 5rem 5rem 5rem;
		margin: 0;
		font-size: 2.5rem;
	}
}

.trabajando span {
	color: var(--azulClaro);
}

.trabajando .mi-github{ 
	display: flex;
	justify-content: center;
}

.trabajando a { 
	text-decoration: none;
		color: var(--colorTextoOscuro);
		transition: color, background, .5s ease;
		color: var(--azulClaro);
}

.trabajando a:hover {
	text-decoration: underline;
	color: var(--azulClaro);
	scale: 1.08;
	font-weight: bold;
}

.icons-proyectos { 
	display: flex;
	justify-content: center;
	padding:2rem;
}

.icons-proyectos img { 
	width: 4rem;
}

.btns-proyectos {
	display: flex;
	gap: 5rem;
	justify-content: center;
}
.btns-proyectos a{
	text-decoration: none;
	color: var(--colorTextoClaro);
	background-color: #007bff;
	padding: 1rem 2rem;
	border-radius: 1rem;
	transition: color, background, 0.5s ease;
	font-weight: bold;
	box-shadow: -.3rem .3rem 1rem #3333337a;
	transform: scale(1.19);
	font-size: 1rem
 }

 .btns-proyectos a:hover {
	background-color: #002e5d;
	transform: none;
	border-radius: 2rem;
	box-shadow: none;
	color: var(--colorTextoClaro);
 }

 /* --Section Contribuciones-- */
 .section-contribucio {
	color: var(--colorTextoOscuro);
 }
.section-contribucio h2 {
	text-decoration: underline;
	font-size: 3rem;
}
@media (min-width: 768px) {
	.section-contribucio h2{
		font-size: 5rem;
	}
}

/* --Section contactame-- */
.section-contactame {
	color: var(--blanco);
	padding: 8rem 1rem;
	background-color: var(--azulOscuro);
	/* max-width: 120rem; */
	margin: 0 auto;
}

.section-contactame h2 {
	text-decoration: underline;
	font-size: 3rem;
}
@media (min-width: 768px) {
	.section-contactame h2 {
		text-decoration: underline;
		font-size: 5rem;
	}
}

.section-contactame p {
	margin-top: 3rem;
}

.links-contactame {
	display: flex;
	gap: 2rem;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	margin-top: 3rem;
}
@media (min-width: 768px) {
	.links-contactame {
		gap: 5rem;
	}
}

.links-contactame a {
	text-decoration: none;
	color: var(--blanco);
	transition: color, 0.3s ease;
	font-size: small;
}
@media (min-width: 768px) {
	.links-contactame a {
		height: 8rem;
	}
}

.links-contactame a:hover {
	transform: scale(1.09);
	color: var(--colorBtn1);
	font-weight: bold;
}

.links-contactame img {
	width: 5rem;
	margin: 0 auto;
}
@media (min-width: 728px) {
	.links-contactame img {
		width: 6rem;
	}
}

.section-footer {
	color: var(--blanco);
	background-color: #555555;
}

/* --Pagina Curriculum-- */
.bg-main {
	background-color: var(--blanco);
}

.container-main {
	padding: 5rem 3rem;
}

.datos-personales h2 {
	font-size: 4rem;
	text-decoration: var(--azulOscuro) underline;
	margin:4rem 0 2rem 0;
}

.icon-flex {
	display: flex;
	gap: 1rem;
	align-items: center;
	padding-top: 2rem;
}

.icon-flex p { 
	margin: 0;
}

.resumen h2 {
	font-size: 4rem;
	text-decoration: underline;
	margin:4rem 0;
}

.formacion h2 { 
	font-size: 4rem;
	text-decoration: underline;
	margin:4rem 0;
}

.formacion span { 
	text-decoration: underline var(--azulOscuro);
	font-weight: 600;
}

.habilidades h2 {
	font-size: 4rem;
	text-decoration: underline;
	margin:4rem 0;
}