@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');
:root{
  --bg-btn: #0ef;
  --txt:#FFFFFF;
  --fondo: black;
  --fondo-small:#171617;
  --titulo:#4CC49E;
}
*{
    font-family: 'Poppins';   
    margin: 0%;
}

/*Fondo de pagina web*/
body{    
background-color:var(--fondo);
}
h2{
  color: var(--titulo);
}

/****************************************************************************************************************
*NAV 
*************/
header{
    width: 100%;
    clear: both;
    content: '';
    display: taable;
  }
  .menu{
  margin: 0 auto;/*este centrado*/
  }
  
  /*imagen o logo del nav*/
  .logo{
    float: left;
    padding: 2%;
  }
/*********************************************************************************************************/
/*Texto de yo Programa*/
.yoProgramo{
    margin-top: 3%;
    float: left;
    display: block;
    color: var(--txt);
    size: 1vw;
    font-family: monospace;
    white-space: nowrap;
    width: 16ch;
    animation: typing 3s steps(16) infinite;
    overflow:hidden;
    }
    @keyFrames typing {
      from {width:0 }
    }    
/*********************************************************************************************************/
/*iconos del navegador*/
.navRedes{
    margin-top: 3%;
    float: right;
    }
    nav {
      float:right;
      margin-right: 3%;
    }
    nav ul li a:hover {
      color: var(--bg-btn);
    }
    nav ul li :hover {
      color: var(--bg-btn);
    }
    nav ul li{
      list-style: none;
      margin-left: 25px;   
      float: left;
      color:var(--txt);
    }
    nav ul li a{
      color:var(--txt);
    }   
/*******************************************************************************************************
BANER
*******************************************************************************************************/
.baner{
  border: 0%;
  padding: 0%;
}
.acerca{
  margin-right: 3%;
  margin-left: 4%;  
}
.frente{
  position: relative;
  margin-left: 40%;  
  margin-top: -50%;
  padding-top: -50%;
  border-top: -50%;  
}
.acer{
  color: var(--txt);
  margin-left: 10%;
  margin: 0 0 0 10%;
}
.subacer{
  margin: 0 0 0 10%;
}
.acerp{
color: var(--titulo);
}
.conetidoAcerca{
border-left: 10%;
}
/*******************************************************************************************************
CENTRO
*******************************************************************************************************/
.contenedor{
  margin-bottom: 2%;
}

/******
ASIDE
*******/
aside{
  background-color: var(--fondo-small);
  border: 0.3px solid white;
  border-radius: 20px;
  width: 24%;
  float: left;
  padding : 1%;
  padding-left: 0;
  padding-top: 1%;
  padding-right: 0;
  margin-left: 2%;  
}

aside div ul li {
  list-style: none;
  margin-top: 5%;;
}
aside div ul li a{
text-decoration: none;
color: rgb(196, 197, 197);
margin-top: 1%;

}
aside div ul li a:hover{
  color: var(--bg-btn);
  
}
aside div ul li a:active{
  font-weight: bold;
}
#menu{
  position: fixed;
}
/******
SECTION
*******/
section{
  width: 70%;
  float: right;
  margin-right: 2%;
  background-color: var(--fondo-small);
  border: 0;
  padding : 1%;
  border-radius: 20px;
}
.linkProyecto{
  text-decoration: none;
  color: #FFFFFF;
  background-color: var(--fondo-small);
  border: 0;
}
.linkProyecto:hover{
  text-decoration: none;
  color: var(--bg-btn);
}
.linkProyecto:active{
 font-weight: bold;
}


.fondo{
  background-color: var(--fondo-small);
  color: var(--txt);    
  border: 0.4px solid white;
  border-radius: 22px;
  padding: 3%;
}
table{
  width: 100%;
}
.muestra{
  margin-top: 20%;
  padding-top: 20%;
  border-top: 20%;
}
/* El fondo animado de la barra de progreso*/

.color{  
  /*background: linear-gradient(135deg,#0F4C75,#505488,#5A4894,#A950A1,#FF7CAE,#4DBA9B );*/
  /*background: linear-gradient(to right,rgb(115,110,162),#3BACB6,#45b882,#5ace98,#45b681,#3BACB6,#18978F);*/
background: linear-gradient(to right,rgb(87, 84, 114),rgb(115,110,162),#5a9b7c,#5ace98,rgb(106,64,174),rgb(110,42,188));
  background-size: 500%;
  animation: fanimado 10s infinite;
}
@keyframes fanimado{
  0%{
    background-position:0% 50%;
  }
  50%{
    background-position:100% 50%;
  }
  100%{
    background-position:0% 50%;
  }
}
/****************************************************************/ 
/*HABILIDADES*/
th li {
  list-style: none; 
}
.filtro{
  display:none
  
}

@media screen and (max-width: 700px) {
  .logo{
    width: 50%;   
  }
  .iconNav{
    width: 33%;
  }
  .filtro {
    display: block; 
  }
  
 
  th,th li{
    font-size: 8px; 
  }
  .car div ul{
    margin-left: -25%;
    
  }
  .car div ul li a{
    font-size: 8px;    
  } 
}

/*  */
/*******************************************************************************************************
FOOTER
*******************************************************************************************************/
footer{   
    margin-top: 0%;
    margin-bottom: 0%;    
    padding-bottom: 0%;
    
    clear: both;
}
.pie p{
    text-align: center;
    margin: 0%;
    text-size-adjust: auto;
    color:var(--txt);
}