/*Start global     !!!!!!!!!!!!!!!!!!!!!!!!!!!!Min 53 parte 1 del tutorial, hay que revisarla parte del menu responsivo!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/ 
*{
	margin: 0;
	padding:0;
	box-sizing: border-box;
	
}
:root{
	--background-color1: #221e3f; 
	--background-color2: #16162d;	 	/*	 180834 */
	--background-color3: #909590;	 		/* #313534; */
	--principalColor:	#896df0;	 	/*	#ffe838; */
	--secondaryColor: #00FDDC;		 	/*	#fd57bf; */
	--secondaryColor-Border: #1B998B; 		/*	#fd57c09d; */

	--font1: 'Roboto', sans-serif;
	--font2: 'Arial';
	--font3: 'The historia Demo', sans-serif;
	--linkColorItem: #3883ff;
	--linkColorItemHover: #1f53b2;
	--background-image-screen: url("/?originalUrl=https%3A%2F%2Ffraanfx.github.io%2Fimages%2Fsitebg.jpg") no-repeat center fixed;
	--backgound-image-mobile: url("/?originalUrl=https%3A%2F%2Ffraanfx.github.io%2Fimages%2Fsitebg2.jpg") no-repeat center fixed;

}

html {
	font-size: 10px;
	font-family: 'Roboto', sans-serif;
	color: #eee;
	background-color: #221E3F;
}

body {
	width: 100%;
	height: 100%;
	background: var(--background-image-screen);
	background-size: cover;
}

section{
	padding: 6rem 0;
}

a{
	text-decoration: none;
	color: #eee;
}

span{
	cursor: pointer;
}

p{
	font-size: 1.8rem;
	font-weight: 300;
}

img{
	width: 100%;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid #00FDDC;
  outline-offset: 4px;
}

/*End global*/

/*Start reusable*/
.container{
	width: 90%;
	max-width: 120rem;
	height: 100%;
	margin: 0 auto;
	position: relative;
}

.section-heading{
	text-align: center;
	margin-bottom: 10rem;
}

.section-heading h3{
	font-size: 3.5rem;
	color: rgba(255,255,255, .3);
	text-transform: uppercase;
	font-weight: 300;
	position: relative;
	margin-bottom: 1rem;
}

.section-heading h3::before,
.section-heading h3::after{
	content: '';
	position: absolute;
	bottom: -.5rem;
	left: 50%;
	transform: translateX(-50%);
	background-color: rgba(255,255,255,0.75);
}

.section-heading h3::before{
	width: 10rem;
	height: 3px;
	border-radius: .8rem;
}

.section-heading h3::after{
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 100%;
	bottom: -1rem;
}

.section-heading span{
	font-size: 1.6rem;
	font-weight: 300;
}
.cursor{
	font-weight: 800;
	margin-left: 1px;
	animation: opacidad 0.4s alternate infinite ease-in-out;
}
#scrollbar{
	position: fixed;
    top: 0px;
    display: block;
    height: 2px;
    width: 0;
    background: linear-gradient(90deg, rgb(137, 109, 240)  25%, rgb(0, 255, 247) 100%);  
	z-index: 50001;
}
@keyframes opacidad {
	0% {
	  opacity: 0.02;
	}
	49%{
		opacity: 0.02;
	}
	50%{
		opacity: 0.9;
	}
	100% {
	  opacity: 1;
	}
  }


.has-margin-right{
	margin-right: 5rem;	
}

/*End reusable*/

/*Start header*/

header{
	width: 100%;
	height: 100vh;
}
.header-project{
	height: 0;
}

.top-nav{
	width: 100%;
	height: 100vh;
	position: fixed;
	top: -100vh;
	z-index: 50000;
	background-color: var(--background-color2);
	border-bottom-right-radius: 100%;
	border-bottom-left-radius: 100%;
	transition: all 650ms cubic-bezier(1,0,0,1); 
}

.nav-list{
	list-style: none;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;

}

li{
	margin: 0 2rem;
}

.nav-link{
	/*font-family: 'The historia Demo', sans-serif;*/
	font-size: 5rem;
	padding: 1rem;
} 

.nav-link:hover,
.nav-link:focus{
	background: linear-gradient(to top, var(--principalColor), var(--secondaryColor));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.top-nav.open{
	top: 0;
	border-radius: initial;
}


.menu-toggler{
	position: absolute;
	top: 5rem;
	right: 5rem;
	width: 5rem;
	height: 4rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	z-index: 55000;
	transition: transform 650ms ease-out;
}
.menu-toggler.fixedNav{
	position: fixed;
}
.menu-toggler.open{
	transform: rotate(-45deg);
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
}

.bar{
	background: linear-gradient(to right, var(--principalColor), var(--secondaryColor));
	width: 100%;
	height: 4px;
	border-radius: .8rem;
}

.bar.half{
	width: 50%;
}

.bar.start{
	transform-origin: right;
	transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}

.open .bar.start{
	transform: rotate(-450deg) translateX(.8rem);
}

.bar.end{
	align-self: flex-end;
	transform-origin: left;
	transition: transform 650ms cubic-bezier(0.54, -0.81, 0.57, 0.57);
}
.open .bar.end{
	transform: rotate(-450deg) translateX(-.8rem);
}
/*fixed Nav*/ /*
.fixedNav #navigationBar{
	position: fixed;
	top: 0;
	z-index: 55000;
}
#navigationBar{
	width: 100%;
}  
/* End fixed Nav*/

.landing-text{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	text-align: center;
	z-index: 1;
}

.landing-text h2{
	font-size: 20rem;
	/*font-family: 'The historia Demo', sans-serif;*/
	background: linear-gradient(to top, var(--principalColor), var(--secondaryColor));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	padding: 1rem;
	user-select: none;
}

.landing-text span{
	font-size: 2rem;
	font-weight: bold;
}
/*End header*/

/*Start about*/
.about.container{
	display: flex;
	align-items: center;
	justify-content: center;
}

.about-heading{
	text-align: center;
	text-transform: uppercase;;
	line-height: 0;
	margin-bottom: 6rem;
}

.about-heading h3{
	font-size: 10rem;
	opacity: .3;
}

.about-heading span{
	font-size: 2rem;
	font-weight: 300;
}

.profile-img{
	flex: 1;
	margin-right: 5rem;
	text-align: center;
}

.profile-img > img{
	max-height: 500px;
	width: auto;
}

.about-details{
	flex: 1;
}
.about-details p a{
	color: var(--secondaryColor);
	text-decoration: underline;

}
.about-details p a:hover{
	color: var(--principalColor);
}
.social-media{
	margin-top: 5rem;
}

.social-media i{
	font-size: 5rem;
	transition: color 650ms;
}

.fa-linkedin:hover{
	color: #0077b5;
}

.fa-flickr:hover{
	color: #0063dc;
}

.fa-dribbble-square:hover{
	color: #ea4c89;
}
.fa-github-square:hover{
	color: #2b3137;
}

/*End about*/

/*Start services*/
.my-skills{
	margin-top: 10rem;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
	grid-gap: 2.5rem;
	text-align: center;
}

.skill{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 2rem;
}

.skill h3{
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 2rem -2px 2rem 0;
	font-size: 1.5em;
}
.bookshelf h3{
	font-size: 1.5em;
}

.icon-container{
	width: 10rem;
	height: 10rem;
	border: 3px solid var(--principalColor);
	/*background-color: var(--secondaryColor);*/
	margin-bottom: 2rem;
	display: flex;
	transform: rotate(45deg);
}
.icon-container i{
	color: var(--secondaryColor);
	font-size: 5rem;
	margin: auto;
	transform: rotate(-45deg);
}

/*End services*/

/*Start portfolio*/

.portfolio-item{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 5rem;
}

.portfolio-item-last-child{
	margin-bottom: 0;
}

.portfolio-img {
    flex: 1;
}

.portfolio-description {
    flex: 1;
}

.portfolio-description h3{
	font-size: 3rem;
	font-weight: 300;
	margin: 1rem 0;
}

.portfolio-description span{
	font-size: 1.5rem;
	text-transform: uppercase;
	font-weight: 300;
	opacity: 0.5;
}

.portfolio-description .cta{
	display: inline-block;
	margin-top: 2.5rem;
	font-size: 2.5rem;
	text-transform: uppercase;
	color: var(--linkColorItem);
	transition: color 650ms;
	border: 1px solid transparent;
    padding: .375rem .75rem;
    line-height: 1.5;
}
.portfolio-description .cta .separator{
	border-left: 0.5px solid var(--linkColorItem) ;
}


.portfolio-description .cta:hover{
	color: var(--linkColorItemHover);
}
.technologies-container{
	display: grid;
	grid-template-columns: repeat(8, minmax(0, 1fr));
	grid-gap: 8px 8px;
	justify-content: center;
	margin-top: 15px
}
.onear{
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

/*End services*/

/*Start timeline*/
.timeline ul{
	border-left: 4px solid var(--principalColor);
	border-radius: .8rem;
	background-color: rgba(0,0,0,0.05);
	margin: 0 auto;
	position: relative;
	padding: 5rem;
	list-style: none;
	text-align: left;
	width: 70%;
}

.timeline h4{
	font-size: 2rem;
	text-transform: uppercase;
	font-weight: 300;
	margin-bottom: 1rem;
	opacity: .5;
}

.timeline .date{
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	position: relative;
}

.timeline .date:last-of-type{
	padding-bottom: 0;
	margin-bottom: 0;
	border: none;
} 

.timeline .date::before,
.timeline .date::after{
	position: absolute;
	display: block;
	top: 50%;
	transform: translateY(-50%);
}

.timeline .date::before{
	content: attr(data-date);
	left: -21rem;
	text-align: right;
	min-width: 12rem;
	font-size: 1.5rem;
}
.timeline .date::after{
	content: '';
	box-shadow: 0 0 0 4px var(--secondaryColor);
	border-radius: 100%;
	left: -8rem;
	height: 1.5rem;
	width: 1.5rem;
	background-color: var(--principalColor);
}
/*End timeline*/

/*Start contact*/
.contact{
	background-color: #221E3F;
}
form{
	width: 70%;
	margin: 0 auto;
}
form label{
	font-size: 1.5rem;
}
input,
select,
textarea{
	width: 100%;
	padding: 1rem;
	margin-bottom: 5px;
	border: none;
	outline-color: var(--secondaryColor);
}

input[type="submit"]{
	width: initial;
	background-color: var(--secondaryColor);
	color: #eee;
	padding: 1rem 2rem;
	border-radius: .8rem;
	cursor: pointer;
	transition: background-color 650ms;
}
input[type="submit"]:hover{
	color: var(--background-color1);
	background-color: var(--principalColor);
}

.mailto{
	justify-content: center;
	width: 100%;
	
	margin-bottom: 5px;
	font-size: 1.6rem;
	text-align: center;
	padding-bottom: 7rem;
}
.mailto a{
	color: var(--secondaryColor);
	text-decoration: underline;

}
.mailto a:hover{
	color: var(--principalColor);
}
/*End contact*/

/*Start footer*/
.copyright{
	width: 100%;
	text-align: center;
	background-color: var(--background-color2);
	padding: 2rem 0;
	position: relative;
}
.up{
	position: absolute; /* cambiar a --> absolute <-- para solo mantenerlo abajo| cambiar a --> fixed <-- para flotante*/

	width: 5rem;
	height: 5rem;
	background-color: #eee;
	top: -2.5rem;                            /* Poner este top si lo queremos mantener abajo --> top: -2.5rem;| si lo queremos flotante en toda la página poner top: 86rem;*/
	right: 5rem;
	border-radius: 100%;
	display: flex;
	animation: pulse 2s infinite;
	cursor: pointer;
}
.up i{
	color: var(--background-color2);
	font-size: 2rem;
	margin: auto;
}	
.copyright p{
	font-size: 1.4rem;

}
/*End footer*/

/*Start project page 1 */

.project-header{
	width: 100%;
	margin-bottom: 1rem;
	align-content: center;
}

.project-header h3{
	font-size: 5rem;

}
.project-header h3{
	font-size: 8rem;

}

/* End project page 1*/

/*Imagefluid*/

.image-fluid{
	max-width: 100%; 
	height: auto;	
}



/* Fin image fluid */


/* Video responsive*/

.video-responsive {
	position: relative;
	padding-bottom: 56.25%; /* 16/9 ratio */
	padding-top: 30px; /* IE6 workaround*/
	height: 0;
	overflow: hidden;
	}
	
	.video-responsive iframe,
	.video-responsive object,
	.video-responsive embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	}

/* Fin video responsive*/




/*Start animations*/
@keyframes pulse{
	0%{
		box-shadow: 0 0 0 0 rgb(87 253 238 / 99%) ;
	}
	70%{
		box-shadow: 0 0 0 2rem rgba(253, 87, 191, 0);
	}
	100%{
		box-shadow: 0 0 0 0 rgba(253, 87, 191, 0); /*box-shadow: 0 0 0 0 rgba(253, 87, 191, 0.99); otra alternativa*/ 
	}
}
/*End animations*/
/* CV Boton */

@-webkit-keyframes sheen {
	0% {
	  -webkit-transform: skewY(-45deg) translateX(0);
			  transform: skewY(-45deg) translateX(0);
	}
	100% {
	  -webkit-transform: skewY(-45deg) translateX(12.5em);
			  transform: skewY(-45deg) translateX(12.5em);
	}
  }
  @keyframes sheen {
	0% {
	  -webkit-transform: skewY(-45deg) translateX(0);
			  transform: skewY(-45deg) translateX(0);
	}
	100% {
	  -webkit-transform: skewY(-45deg) translateX(12.5em);
			  transform: skewY(-45deg) translateX(12.5em);
	}
  }
  .wrapper {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
			transform: translate(-50%, -50%);
  }
  
  .btn-cv {
	padding: 0.75em 2em;
	text-align: center;
	text-decoration: none;
	color: var(--secondaryColor);
	border: 2px solid var(--secondaryColor);
	font-size: 24px;
	display: inline-block;
	border-radius: 0.3em;
	transition: all 0.2s ease-in-out;
	position: relative;
	overflow: hidden;
  }
  .btn-cv:before {
	content: "";
	background-color: rgba(255, 255, 255, 0.5);
	height: 100%;
	width: 3em;
	display: block;
	position: absolute;
	top: 0;
	left: -4.5em;
	-webkit-transform: skewX(-45deg) translateX(0);
			transform: skewX(-45deg) translateX(0);
	transition: none;
  }
  .btn-cv:hover {
	background-color: var(--secondaryColor);
	color: #221e3f;/* #eee;*/ 
	border-bottom: 4px solid var(--secondaryColor-Border);
  }
  .btn-cv:hover:before {
	-webkit-transform: skewX(-45deg) translateX(13.5em);
			transform: skewX(-45deg) translateX(13.5em);
	transition: all 0.5s ease-in-out;
  }
  
/* Fin boton */
		
/*Start media queries*/
@media screen and (max-width: 768px){
		body {
			background: var(--backgound-image-mobile);
			background-size: cover;
		}
		.landing-text h2{
			font-size: 15rem;
		}
		.landing-text span{
			font-size: 1.7rem;
		}
		.nav-list{
			flex-direction: column;
		}
		li{
			margin: 2rem 0;
		}
		.nav-link{
			font-size: 4.5rem;
		}
		.about-heading h3{
			font-size: 8rem;
		}
		.profile-img > img{
			max-width: 100%;
			height: auto;
		}
		.section-heading h3{
			font-size: 3rem;
		}
		.about-details .nav-list{
			flex-direction: initial;
		}
		.about-details li{
			margin: 0 2rem;
		}
		.icon-container{
			width: 7rem;
			height: 7rem;
		}
		.icon-container i{
			font-size: 4rem;
		}
		.timeline ul{
			width: 90%;
			margin: 0 0 0 auto;
		}
		.timeline .date { 
			margin: 1.8rem;
			margin-bottom: 6rem;
		}
		.timeline .date::before{
			left: -4rem;
			top: -2rem;
		}
		.timeline .date::after{
			left: -3.7rem;
			top: -2rem;
		}

}

@media screen and (max-width: 600px){
	.nav-list{
			flex-direction: column;
		}
	.menu-toggler{
		top: 2rem;
		right: 2rem;
	}
	.landing-text h2{
		font-size: 8rem;
	}
	.landing-text span{
		font-size: 1.4rem;
	}
	.nav-link{
		font-size: 3.5rem;
	}
	.about .container{
		flex-direction: column;
	}
	.profile-img{
		margin: 0 0 7rem 0;
	}
	.profile-img > img{
		max-width: 100%;
		height: auto;
	}
	.portfolio-item{
		flex-direction: column;
	}
	.portfolio-img{
		margin: 0 0 2rem 0;
		order:  1;
	}
	.portfolio-description{
		width: 100%;
		margin: 0;
		order: 2;
	}
	.timeline ul{
		padding: 1rem;
	}
	.timeline p{
		font-size: 1.6rem;
	}
	.timeline .date::before{
		font-size: 1.4rem;
	}
	.timeline .date::before{
		font-size: 1.4rem;
	}
	form{
		width: 100%;
	}

	.up{
		right: 2rem;
		/*top: 66rem;	 /*quitar este top si ponemos posicion absolute*/	
	}

}

/*End media queries*/