* {
  color:rgb(255, 255, 255) ;
  font-family:"Reenie Beanie";
  font-size:xx-large;
}
html body {
  padding: 0px;
  margin: 0px;
}


/*Seccion de variables de colores: */
:root{
    --color-principalPag:rgb(181, 181, 181) ;
    --color-black:rgb(30, 27, 27);
    --color-AzulS:rgba(29, 27, 141, 0.674);
    --color-AzulB:rgba(32, 32, 90, 0.736); 
    --color-AzulM:rgb(63, 63, 202);
    --color-AzulA:blue;
    --color-fondoPag:rgba(13, 39, 99, 0.957); 
    --color-fondoPagM:rgb(15, 50, 125);
    --color-fondoPagB:rgb(68, 93, 146);
}


/*ZONA DE SECCIONES*/

.color_Parrafo{
    color:rgb(50, 109, 191);
    font-size:45px;
    font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;

}
.TitulosPrinc{
    font-size:41px;
    font-family:'Gill Sans', 'Gill Sans MT', 'Calibri', 'Trebuchet MS', sans-serif;
  }
.Titulo{ 
  background:linear-gradient(140deg,var(--color-fondoPag),var(--color-fondoPagM),var(--color-fondoPag)) ;
  width: 250px;
  border-radius:40px ;
  text-align: center;
}
/*Hace que la pagina web tenga un sidebar a la izquierda */
html, body {
  height: 100%;
}
.Pagina_WEB {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: linear-gradient(0deg, var(--color-fondoPag),var(--color-fondoPagB),var(--color-principalPag) ,var(--color-principalPag),var(--color-fondoPag), var(--color-fondoPag));

}
.Contenedor_paginaWeb {
  display: flex;
  flex-direction: row;
  flex: auto;
}
main {
  flex:auto;
  padding: 20px;
}
.Contenedor_footer {
  text-align: center;
  padding: 15px;
}


/*Banner a la izquierda */


/* BANNER IZQUIERDO */
.Banner {
  display: flex;
}

.card {
  display: flex;
}
.sidebar{
  padding: 30px 20px;
  text-align: center;
}

.avatar{
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid rgb(255, 255, 255);
  box-shadow: 
  0 0 30px var(--color-AzulM),
  0 0 32px var(--color-AzulM),
  0 0 38px var(--color-AzulB),
  0 0 40px var(--color-AzulB)
  ;
}

.sidebar h2{
  margin: 15px 0 5px;
  font-size: 40px;
}

.sidebar p{
  font-size: 32px;
  color: #ffffff;
}

/* BOTONES */
.links{
  display: flex;
  flex-direction: column;
  row-gap: 20px;
}


.links a{
  text-decoration: none;
  background: white;
  padding: 1px;
  border-radius: 20px;
  color: #000000;
  font-size: 35px;
}

.links a:hover{
  box-shadow:
   0 0 21px var(--color-AzulM),
   0 0 25px var(--color-AzulB),
   0 0 30px var(--color-AzulB);
    
}


/*Encargados de las cajas*/
/*FORMACION ACADEMICA*/
.Contenedor_Formacion{
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap:wrap;
}

.Cajitas_Formacion_Academica{
  background-color: var(--color-AzulS);
    border: 5px double var(--color-AzulB) ;
    border-radius: 15px;
    width: 500px;
}
.Cajitas_Formacion_Academica:hover{
    border: 0px ;
    background:linear-gradient(30deg, var(--color-AzulM), var(--color-fondoPag),var(--color-AzulM));
    box-shadow: 
    0 0 10px var(--color-AzulB),
    0 0 25px var(--color-AzulB),
    0 0 50px var(--color-AzulM),
    0 0 80px var(--color-AzulA); 
}
.parrafo_Cajitas{
    text-align:center;
  }


/*EXPERIENCIA*/
.Contenedor_Experiencia{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    row-gap: 30px;
  }

.Cajitas_Experiencia{
    border: 10px  rgba(35, 69, 126, 0.693);
    background:linear-gradient(30deg, var(--color-AzulB), var(--color-AzulM));
    box-shadow: 
    0 0 25px var(--color-AzulB),
    0 0 28px var(--color-AzulM),
    0 0 30px var(--color-AzulM);
    padding: 1px;
    border-radius: 15px;
    width: 500px;
    text-align: center;

  }
  .parrafo_Cajitas_Experiencia{
    text-align: center;
    color: aliceblue;
  }



/*Conocimientos tecnicos*/
.Contenedor_ConocimientosTec{
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    flex-direction: row;
    justify-content: center;
}

.circle_J{
  border:2px solid #333;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-AzulB) 0% 35%,
    #333 35% 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 20px var(--color-combinadoRojA),
    0 0 10px var(--color-combinadoRojA),
    0 0 40px var(--color-combinadoRojA),
    0 0 50px var(--color-combinadoRojA)
  ;
}

.circle_J span{
  width: 150px;
  height: 150px;
  background: #111;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px; 
}

.circle_HTML{
  border:2px solid #333;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-AzulB) 0% 45%,
    #333 45% 100%
);
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 
    0 0 20px var(--color-combinadoRojA),
    0 0 10px var(--color-combinadoRojA),
    0 0 40px var(--color-combinadoRojA),
    0 0 50px var(--color-combinadoRojA);
}

.circle_HTML span{
  width: 150px;
  height: 150px;
  background: #111;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
}

.circle_Sql{
  border:2px solid #333;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color-AzulB) 0% 12%,
    #333 12% 100%
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 0 20px var(--color-combinadoRojA),
    0 0 10px var(--color-combinadoRojA),
    0 0 40px var(--color-combinadoRojA),
    0 0 50px var(--color-combinadoRojA);
  }

.circle_Sql span{
  width: 150px;
  height: 150px;
  background: #111;
  border-radius: 50%;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  
}

.Contenedor_Practicas{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    row-gap: 30px;
  }

.Cajitas_Practicas{
    border: 10px  rgba(35, 69, 126, 0.693);
    background:linear-gradient(30deg, var(--color-AzulB), var(--color-AzulM));
    box-shadow: 
    0 0 25px var(--color-AzulB),
    0 0 28px var(--color-AzulM),
    0 0 30px var(--color-AzulM);
    padding: 1px;
    border-radius: 15px;
    width: 500px;
    text-align: center;

  }
  .links_Cajitas_Practicas{
    text-decoration: none;
    text-align: center;
    color: aliceblue;
  }



/*HABILIDADES*/
.Contenedor_Habilidades{
display: flex;
flex-wrap: wrap;
justify-content: start;
flex-direction: row  ;
gap: 20px;
border-radius: 30px;

}
.Divs_Habilidades{
   text-decoration: none;
  background:linear-gradient( 150deg,var(--color-fondoPag),var(--color-AzulM),var(--color-fondoPag));
  padding: 15px;
  border-radius: 35px;
  font-size: 35px;
}

.Contenedor_Habilidades{
  display: flex;
  flex-direction: row;

}

/*ZONA FOOTER*/

footer{
 border-radius: 10px;
 padding: 2px;
}