:root {
  --colorBlack : black;
  --colorYellow : #e0953f;
  --colorWhite : #ECE5F0; 
  --colorText : #464646;   
}
  

/*Tipo de letra*/
body {
  font-family: 'Poppins', sans-serif;
}

body .ed-container {
  max-width: none;
}
.nav-mobile {
  position: fixed;
  z-index: 1000;
}

/*color de fondo en nav mobile*/
ul.ed-menu.s-horizontal.default {
  background: var(--colorBlack);  
}
/*color de letra en nav mobile*/
ul.ed-menu.s-horizontal.default a {
  color: var(--colorYellow);    
}

/*Estilo del navegador vertical en desktop*/
.nav-vertical {
  background: var(--colorBlack); 
  height: 100vh; 
  /* outline: 1px solid var(--colorYellow); */
  position: fixed;
  box-shadow: 0 5px 10px 0 var(--colorBlack);
}

/* Estilo del contenido h3 y p de nav vertical */
.style-text-nav-ver h3 {
  padding: 0 10px;
  color: var(--colorBlack);
  font-size: 20px;
  letter-spacing: 7px;
  font-family: 'Dosis', sans-serif;
}
.style-text-nav-ver p{
  padding: 0 10px;
  color: var(--colorYellow);
  font-size: 13px;
  letter-spacing: 2px;   
} 
.style-text-nav-ver a { 
  padding: 20px 10px; 
  display: block;  
  letter-spacing: 1; 
  color: var(--colorYellow); 
  font-size: 12px;   
  transition: 0.5s;
}   

.style-text-nav-ver a:hover { 
  padding: 30px 10px; 
  display: block;  
  letter-spacing: 2px; 
  color: var(--colorWhite);    
  background: var(--colorText);
  text-decoration: none;
  transition: 0.5s;
} 




/*diseño de la primera sección HOME */
.home {
  height: 100vh;
  font-weight: 400; 
  background-color: var(--colorBlack);  
  letter-spacing: 8px;  
  line-height: 1.1; 
  color: var(--colorWhite);
  font-size: 1rem;  
  display: flex;
  align-items: center;
  justify-content: center;
}

.home_content { 
  text-align: center;
}
  
/*diseño de la segunda sección*/
.secondSection {
  color: var(--colorText);
  padding: 50px 100x;
  padding-top: 2%;
}

/*diseño de la tercera sección CONOCIMIENTOS*/
.treeSection {   
  text-align: center;    
  background-color: var(--colorBlack);
  color: var(--colorWhite); 
}  

.img-skill { 
  height: 4rem; 
}


/*diseño de la cuarta sección MIS PROYECTOS*/
 
.fourSection-content {
  /* outline: 1px solid; */
  padding-bottom: 4rem;
} 
.container_card {
  font-size: .8rem;
}
.cards {
  box-shadow: 0 5px 10px 0 rgba(0,0,0,0.20);
  padding: 0 !important;
  margin-bottom: 3rem !important;
 
}
.cards:hover {
  box-shadow: 000 7px 15px 0 rgba(0,0,0,0.25);
}
/* figure.ed-item.m-40.m-offset-5.cards {
  padding: 0;
  margin-bottom: 3rem;
}  */
.cards__text {
  padding: 0 1rem; 
  text-align: justify;
  font-family: 'Poppins', sans-serif;
}
.img_proyect{ 
  width: 100vw;
  height: 40vh;
  object-fit: cover;
}
.card_icon {
  font-size: 1.5rem;
}
hr{
  margin: 0;
  border: 0;
}
/*diseño de la quinta sección - contacto*/
.contact {  
  background-color: var(--colorBlack); 
  color: var(--colorWhite);
  height: auto;
} 

.contact__content { 
  margin-top: 5%; 
  padding-top: 2rem;
}
.contact__cv {
  margin-bottom: 3rem;
  margin-top: 3rem;
  text-align: center; 
}

.contact__social{
  display: inline-block;
  text-align: center;
}
.contact__social a{
  color: var(--colorYellow);
  font-size: 2rem;
}
 
 /*Clases globales*/
.text {
  line-height: 30px;
  font-size: 1.1em;
  text-align: justify;
  font-family: 'Dosis', sans-serif;
  padding-bottom: 10%;
}   

.title {
  line-height: 32px; 
  text-align: center;
  font-family: 'Dosis', sans-serif; 
  font-size: 2.1rem;
} 
 
.btn-cv {
  padding: 10px;
  background: var(--colorYellow);
  text-decoration: none;
  color: var(--colorWhite);
}
.btn-cv:hover {
  background: var(--colorBlack);
  text-decoration: none;
  border: 1px solid var(--colorYellow);
}  


 

/*Estilo de estrella*/
.star {
  text-align: center;
  margin-bottom: 9px;
}
/*Barras que envuelven a la estrella*/
.star::after, .star::before{
  content: '';    
  width: 50px;
  display: inline-block;
  border: 1px solid var(--colorBlack);
  margin-bottom: 6px;   
}

/*Estilo de estrella fondo negro*/
.starN {
  text-align: center;
}
/*Barras que envuelven a la estrella*/
.starN::after, .starN::before{
  content: '';    
  width: 50px;
  display: inline-block;
  border: 1px solid var(--colorWhite);
  margin-bottom: 6px;   
}


  
/*Efecto máquina de escribir*/
.maquina { 
  position: relative; 
  /* float: left; */
  background: var(--colorBlack);
  color: var(--colorYellow);
}

.maquina span {
  position:absolute;
  right:0;
  width:0;
  background: var(--colorBlack);
  border-left: 1px solid var(--colorBlack);
  animation: escribir 4s steps(100) infinite alternate;
}

@keyframes escribir {
  from { width: 100% }
  to { width:0 }
}