html{
	box-sizing: border-box;
	font-family: 'Lato', sans-serif;
	--colorPrimario: #3E5563;
	--colorSecundario: #668b90;
}
body{
	background: rgba(224, 224, 224, 0.933);
	transition: .3s ease all;
}

********* Header ********* 
********* ****** *********  */

.title {
align-content: center;
align-items: flex-end;
color: var(--colorPrimario);
display:flex;
font-size: 1em;
justify-content: center;
letter-spacing: 0.5px;
margin-top: -1.5em;
text-align: center;
text-align: center;
}

h1{
	color: var(--colorPrimario);
}

h1 span {  
color: var(--colorSecundario)
}

h1::first-line{
font-size: 1.1em;
font-style: italic;
font-weight:900;
text-shadow: 1px 1px 1px var(--colorPrimario);
}

h2{
color: var(--colorPrimario);
font-size: 1.3em;
font-weight: 700;
margin-bottom: 0.8rem;
	
}	
@keyframes spinner{ 
to{
	transform: rotate(0deg);
	
}
from{
	transform: rotate(360deg);
			
}
}

.imagen-avatar{
display: flex;
justify-content: center;

}
.imagen-avatar img{ 
border-radius: 80px;
display: inline-block;
height: 8em; 
margin: -5em auto;
margin-top: 10px;
object-fit: scale-down;
position: relative;
z-index: 2; 
}
.loader{
animation-duration: 3s; 
animation-iteration-count: infinite; 
animation-name: spinner;
animation-timing-function: ease-in-out; 
border: 6px solid grey;
border-radius: 80px;
border-top: 6px solid rgb(79, 78, 78);
display: inline-block;
height:8.6em;
margin-top: 0.3rem;
opacity: 0.4;
position: absolute;
width: 8.6em;
z-index: 2;
}

.separador{
background: #fff;
border: 0.1em solid var(--colorPrimario);
border-radius: 10px;
}
	

/* ********* Descripcion ********* 
*********  ********** *********  */

.conteiner{
background: rgb(255, 255, 255);
display: block;
height: auto;
margin: 50px auto;
margin-bottom: 0.5em;
max-width: 70em;
padding: 20px;
text-align: center;
}

main{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}


.about, .contact, .education, .skills,.proyects, .sites, .work,.hobbies{
border: 1px solid #000;
display: inline-block;
margin: 0.2em;
margin-top: 0.5em;
max-width: 30rem;
padding: 1em;
text-align: start;
width: 100%;	
}


.about p{
color: var(--colorPrimario);
font-size: 1.2rem;
/* font-weight: 480; */
word-break: keep-all
}

.guionT::before{
color: #000;
content: "_";
font-size: 1.2rem;
font-weight: bold;
}

body.dark-mode .guionT::before{
color: var(--colorSecundario);
}

/* ******************** CONTACT ********************
******************** ****** ********************  */
.contact{
display: flex;
flex-direction: column;
height: auto;
justify-content: center;
padding: 1em;
width: 100%;
}

.info-conteiner{
display:flex;
flex-direction: row;
height: auto;
margin: 0;
width: 90%;
}

.info-conteiner p, a{
align-items: center;
color: var(--colorPrimario);
display: flex;
font-size: 1.2em;
font-weight:  bold;
height: auto;
margin: 0;
text-decoration: none;
width:100%;
word-break: keep-all
}

.info-conteiner a{
height: auto;
justify-content: center;
margin: 0;
width:90%;
}

.contact img{
border-bottom: 0.1rem solid var(--colorSecundario);
border-right: 0.1rem solid var(--colorSecundario);
display: block;
margin-right: 0.4em;
padding: 0.5em;
width: 3em;
}

#contact-map{
border-bottom: none;
}

/* ******************** EDUCATION ********************
******************** ****** ********************  */

.education li{
background-color: #fff;
display: flex;
list-style: none;
z-index: 99;
}
.year-education{
background-color: #fff;
color: var(--colorPrimario);
display: inline;
font-size: 1rem;
font-weight: bold;
margin-bottom: 0.5em;
margin-right: 0.5em;
padding: 0.5em;
text-shadow: 0 15px 10px white ;
}

.year-education::after{
background: linear-gradient( #3f87a6, rgb(255, 255, 255) );
content:"";
display: block;
height:100%;
margin: auto;
margin-top: 0.5em;
width: 7px;

}

.year-edu-box{
background-color:var(--colorSecundario);
height: 50%;
margin-bottom: 0.2em;
padding: 0.5em;
width: 100%;
}

.year-edu-box h3{
	color: #fff
}

.education p{
color: rgb(255, 247, 247);
font-weight: 500;
padding: 0.5em;
width: 100%;
}

.education i{
font-size: 0.7em;
}

/* ******************** SKILLS ********************
******************** ****** ********************  */

@keyframes  CargaSkills{
0%{
       
    width: 0%;
		   
  }
    100%{
		
}

}

.skills-js{
animation-duration: 4s;
animation-name:  CargaSkills;
animation-timing-function: ease; 
transition: background-color 0.5s;
}
.html-skills{
background-color: var(--colorSecundario);
color: #fff;
font-size:0.9em;
font-weight: 550;
margin-bottom: 0.2em;
padding: 0.3em;
width: 40%;
}

.css-skills{
background-color: var(--colorSecundario);
color: #fff;
font-size:0.9em;
font-weight: 550;
margin-bottom: 0.2em;
padding: 0.3em;
width: 35%;
}

.js-skills{
background-color: var(--colorSecundario);
color:#fff;
font-size:0.9em;
font-weight: 550;
margin-bottom: 0.2em;
padding: 0.3em;
width:30%;
}
	

.wordpress-skills{
background-color: var(--colorSecundario);
color: #fff;
font-size:0.9em;
font-weight: 550;
margin-bottom: 0.2em;
padding: 0.3em;
width: 40%;
}


.selector-status1, .selector-status2, .selector-status3{
border-bottom: 1px solid var(--colorSecundario);
border-right: 1px solid var(--colorSecundario);
display: inline-flex;
height: 0.4em;
justify-content: space-evenly;
margin-top:2em;
padding-right: 1em;
width: 32%;
}
	
.status-skills{
color: #222;
display: flex;
justify-content: space-around;
	
}

.status-skills p{
color: var(--colorPrimario);
display: flex;
padding-right: 1em;
text-align: center ;
}

/* ******************** SITES ********************
******************** ****** ********************  */
.sites{
display: flex;
flex-direction: column;
height: auto;
justify-content: flex-start;
width: 100%;
}

.sites-conteiner{
align-content: flex-start;
align-items: flex-start;
display: flex;
flex-direction:column;
flex-wrap: wrap;
height: auto;
justify-content: center;
margin-top: 1em;
padding-bottom: 1em;
width: 100%;
}

.sites-conteiner:nth-child(2){
	border-bottom: 1px solid var(--colorPrimario);

}

.sites p{
margin-top: 0.5em;
padding-bottom: 1em;
}

.img-sites{
display: flex;
flex-direction: row;
width: 100%;
}

.img-sites img{
border-bottom: 0.1em solid rgb(194, 192, 192);
border-right: 0.1em solid rgb(194, 192, 192);
height: auto;
justify-content: flex-start; 
object-fit: scale-down;
padding: 2%;
width: 15%;
}

.img-sites a{
color: var(--colorPrimario);
font-weight: bold;
margin-left: 1em;	
text-decoration: none;
width: auto;
}


/* ******************** PROYECTOS ********************
******************** ****** ********************  */
.proyects{
display: flex;
flex-direction: column;
width: 100%;

}

.tarjeta-conteiner{
border: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: start;
margin: auto;
}
		
.tarjeta{
border: .5px solid rgb(136, 136, 136);
border-radius: 2px ;
box-shadow: -1px 1px 1px 2px rgb(6, 115, 119);
display: flex;
flex-direction: row;
margin-bottom: 0.5em;
margin-left: 1em;
margin-right: .3em;
margin-top: 1em;
min-height: 16em;
text-align: center;
transition: .3s ease;
width: 10em;
}
.tarjeta:hover{
	
transform: translateY(-1em);
}
	
.contenido-tarjeta{
height: 100%;
width: 100%;
}
.img-container{
	align-content: center;
	background-color:var(--colorSecundario);
	display: flex;
	height: 40%;
	justify-content: center;
	padding: .1em;
}
.img-container img{
height: auto;
padding: .1em;
width: 7em;
		
}
	
.contenido-tarjeta p{
margin-top: 1em;
text-align: center;
}
		
.contenido-tarjeta h4{
color: var(--colorPrimario);
font-size: 1rem;
padding: 0.5em;
}

.contenido-tarjeta h5{
color: var(--colorSecundario);
font-size: .8rem;
margin-bottom: .5em;
padding: .5em;
}

.link-proyects{
color: rgb(6, 59, 62);
font-size:80%;
font-weight: bold;
justify-content: center;
text-decoration: none;	
}

.lang{
background-color: var(--colorSecundario);
border: 1px;
color: rgb(248, 248, 248);
display: inline-flex;
margin-bottom: .5em;
margin-right: .3em;
padding: .5em;
}

/* ******************** WORK ********************
******************** ****** ********************  */


.work h3{
animation-duration: 4s;
animation-name:  Cargalinea;
animation-timing-function: ease; 
font-size: 1.2rem;

}

.work h4{
margin-left: 2em;
padding: 0.5em;
}

.work p{
font-size: 1.2rem;
letter-spacing: .5px;
margin-left: 2em;
word-break: keep-all;
}

.workExperience{
margin-top: 5em;
}

.span{
font-size: 1rem;
font-style: italic;
}


@keyframes  Cargarliena{
0%{
       
  width: 0%;
		   
}
  100%{
			
}

}
.wLinea{
animation-duration: 10s;  
animation-fill-mode: forwards;
animation-name:  Cargarliena;
animation-play-state: running;
animation-timing-function: ease-in-out;
background-color: var(--colorSecundario);
font-size:0.9em;
font-weight: 550;
margin-bottom: 0.2em;
padding: 0.1em;
width: 100%;
}

.hobbies{
display: flex;
flex-direction: column; 
justify-content: start;
width: 100%;
}

.hobbies-conteiner{
align-content: center;
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
margin-top: 1em;
width: 100%;
}

.section-h{
background-color: var(--colorSecundario);
color: #fff;
display: inline;
margin-bottom: 1em;
margin-right: 1em;
padding: 0.5em;
text-align: center;
width: 50%;
}

.section-h:hover{
box-shadow: -1px 2px 2px 1px #222;
}

.section-h p{
color: #fff;
font-weight: bolder;
padding: 0.5em;
text-align: center;
}

.section-h a{
color: #fff;
font-size: 0.7em;
font-weight: 1;
justify-content: center;
text-align: center;
text-decoration: none;	
}

footer{
color: var(--colorPrimario);
display: flex;
font-weight: bold;
justify-content: center;
padding: 1em;
}





.btn-dark-mode{
border: none;
display: flex;
justify-content: flex-end;
margin-right: -1.5em;
margin-top: -0.9em;
padding: .5em;
position:sticky;
top: 1em;
width: auto
}

#botonDarkMode{
background-color: #6c8094;
border-radius: 50%;
content: url(../img/half-moon-moon-svgrepo-com.svg);
cursor: pointer;
filter: invert(10%);
padding: .2em;
width: 2em;
}



.cv{
content: url(../img/icons/cv.svg);
cursor: pointer;
margin-right: 0.3em;
transition: 10s ease-in;
width: 2em;
}

.cv:hover{
content: url(../img/icons/download.svg);
	
}

@media only screen and (max-width: 700px){
		.conteiner main{
		display: flex;
		flex-direction: column;
		flex-wrap:nowrap;
		}
		.title{
			margin-top: -3em;
		}
		.about {
			order: 0;
		}
		.edutation{
			
		order:1;
		}
		.contact{
		order:2;
		}
		.skills{
		order: 3;
		}
		.proyects{
		order: 5;
		}
		.sites{
		height: auto;
		order: 6;
		width: auto;
			
		}
		.img-proyects{
		font-size: 1em;
		width: 90%;
		}
	
		.info-conteiner p{
		font-size:1rem;
		word-break: keep-all;
			
		}
		.hobbies{
		display:flex;
		flex-direction: row;
		flex-wrap: wrap;
		max-width: 98%;
		order:7;
		}
		.hobbies-conteiner{
		flex-direction: column;
					
		}
		.section-h{
		margin-bottom: 1em;
		width: auto;
		}
		.tarjeta-conteiner{
		justify-content: center;
		}
		.tarjeta:hover{
		
			box-shadow: none;
			transform: none;
		}
		.btn-dark-mode{
			align-items: flex-end;
			flex-direction: column;
			margin-right: -1.6em;
		}
		.cv{
			margin-right: 0;
	
	}
	}