*{
    box-sizing: border-box;
  }
  
  
  body{
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #0d1a2d;
  }
  
  
  .cont_header{
    /*background-color: brown;*/
    margin: auto;
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: white;
  }
  
  .cont_header nav{
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 28px;
  }
  
  
  .cont_header nav a{
    transition: all 0.40s;
    color: white;
    text-decoration: none;
  }
  
  .cont_fondo1{
    /*background-color: brown;*/
    margin: auto;
    width: 80%;
    text-align: center;
    color: white;
  }
  
  
  #fondo1{
    background: linear-gradient(to right, #02003370, #10162d), url(imagenes/codigo2.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    height: 90vh;
  }
  
  .cont_fondo1  a{
    color: white;
    text-decoration: none;
    background-color: grey;
    border-radius: 2em;
    padding: 5px  10px;
    color: snow;
    text-decoration: none;
    background-color: teal;
    border-radius: 2em;
    padding: 5px 10px;
    /* font-weight: 600; */
    font-size: 23px;
  }
  
  .cont_fondo1 h1{
    font-size: 65px;
  }


  .btndiseño{
    padding: 4px 0px!important;
  }


  .proyectosdiseño {
    padding-bottom: 70px;
  }


  
  
  .titulo_fondo2{
    margin: auto;
    width: 80%;
    color: white;
  }
  
  .cont_fondo2{
    margin: auto;
  width: 80%; 


  display: grid;
  grid-template-columns: 1fr 1fr 1fr ;
  gap: 30px;
  gap: 30px 10px;
 
  }

  #fondo2{
    padding-top: 30px;
    padding-bottom: 100px;
  }

  .cont_header nav a:hover{
    transition: all 0.40s;
    color: springgreen;
  }
  
  
  
  
  .card img{
    width: 100%;
    height: 100%;
  }
  
  
  .card{
    color: white;
    background-color: #042b4d;
    padding: 5px;
      border-radius: 13px;
      display: flex;
      flex-direction: column;
      text-align: center;
  }
  
  .card h5{
    color: rgb(206, 205, 205);
  }



  
  .cont_etiquetas a{
    cursor: pointer;
    background-color: black;
    border-radius: 2em;
    padding: 1px 10px;
    padding: 1px 0px;
    text-decoration: none;
    color: white;
    font-weight: bold;
    display: flex;
    justify-content: center;
  }
  
  .cont_etiquetas{
   /* display: flex;
    align-items: center;*/
    gap: 10px;
    text-align: center;
    justify-content: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: auto;
    width: 70%;
  
  }
  
  .cont_links{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 10px auto;
    margin-top: 26px;
  }
  
  .cont_links a{
    background-color: #35eb9a;
    border-radius: 2em;
    padding: 5px 10px;
    text-decoration: none;
    color: black;
    font-weight: bold;
  }
  
  .img_card{
    flex-grow: 1;
  }
  
  
  
  
  ::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Fondo de la barra de desplazamiento */
  ::-webkit-scrollbar-track {
    background-color: black;
  }
  
  /* Color de la barra de desplazamiento */
  ::-webkit-scrollbar-thumb { 
    background-color:#35eb9a;
    border-radius: 2em;
  }
  
  /* Esquina redondeada de la barra de desplazamiento */
  ::-webkit-scrollbar-corner {
    background-color: black;
  }
  


  .titulo_tecnologia{
    margin: auto;
    width: 90%;
    text-align: center;
    color: white;
    font-size:25px;
  }


  .cont_tecnologias{
  
    margin: auto;
    width: 70%;
    width: 60%;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr ;
align-items: center;  
gap: 40px 0;
}




  .img_tec{
    text-align: center;
  }




.img_tec img{
width: 80%;
 height:200px;
 width: 69%;
 
/* height: 172px;*/
}

.circular{
  border-radius: 10em;
}

.circular{
  color: white;
}


#fondo_tecnologias{
 
  padding-top: 30px;
  padding-bottom: 40px;
}

.cont_contacto{
  margin: auto;
  width: 80%;
  text-align: center;
}
.botones{
 /* background-color: brown;*/
  margin: 50px auto;
}


.titulo_contacto{
  margin: auto;
  width: 80%;
  text-align: center;
  color: white;
  font-size: 30px;
}


.cont_contacto a{
  color: white;
  text-decoration: none;
  font-size: 30px;
}


#fondo_contacto{
  padding-top: 200px;
  padding-bottom: 100px;
}

.botones{
  display: flex;
  justify-content: center;
  gap: 30px;
}

.botones a{
  transition:  all 0.30s;
  background-color: springgreen;
  color:#042b4d;
  font-weight: bold;
  padding: 5px 20px;
}

.botones a:hover{
  transition:  all 0.30s;
  background-color: white;
}

h1 span{
  color: springgreen;
}

.cont_fondo1 h2{
color: springgreen;
}
  

html{
  scroll-behavior: smooth;
}
  

.menu{
  font-size: 30px;
  display: none;
  cursor: pointer;
}
  
.cont_header{
  position: relative;
}


.cont_oculto{
 /* position: absolute;*/
  background-color: springgreen;
  width: 100%;
  display: flex;
  flex-direction: column;
 /* top: 80px;*/
  text-align: center;
padding: 50px 0;
  gap: 40px;
  border-radius: 10px;
  z-index: 999;
}

.cont_oculto a{
  text-decoration: none;
  color: #042b4d;
  font-size: 20px;
  /*background-color: black;*/
  color: black;
  padding: 5px;
  display: flex;
  gap: 15px;
align-items: center;
  justify-content: center;
}
  
.email{
  font-size: 19px;
  color: #35eb9a;
}

.fondo_oculto{
  position: absolute;
  width: 100%;
  top: 80px;
  z-index: 999;
  display: none;
}


#fondo2{
  padding-top: 111px;
}


.img_tec img{
  height: 183px;
}

.cont_etiquetas a img{
  width: 17px;
}



.cont_etiquetas a{
  display: flex;
  align-items: center;
gap: 10px;


}


/*ESTILOS PARA LAS CARDS DE LAS TEC*/





.card_tec{
  display: flex;
  flex-direction: column;
}





.des_tec{
  color: white;
  text-align: center;
  display: none;
}


.img_card img{
  height: 300px;

}


.github{
  border-radius: 1em;
 /* filter: invert(1);*/
 object-fit: cover;
}

.card h2{
  flex-grow: 10;
}

.cont_header .logo{
color: #35eb9a;
}

.fijo{
  position: fixed;
  width: 100%;
  background-color:#0d1a2d;
}


#fondo1{
  height: 90vh;
}

.cont_tecnologias{
  gap: 20px;
}


.img_tec img{
  width: 92%;
}

.JQUERY{
  width: 90%!important;
  height: 180px!important;
}


.filtros{

  margin: auto;
  width: 80%;
  display: flex;
  justify-content:center;
  gap: 80px;
  margin-bottom: 30px;
}

#fondo2{
  padding-bottom: 0px;;
}


.filtros h2 {
  /* color: black; */
  background-color: #35eb9a;
  padding: 5px;
  border-radius: 8px;
  cursor: pointer;
}



.titulo_fondo2{
  text-align: center;
}




.contwordpress{
  
  margin: auto;
  width: 85%;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}


.proyectosdiseño{
  margin: auto;
  width: 85%;
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr 1fr;
}


.proyectosdiseño .cardwordpress{
  text-align: center;
  color: white;
  border-radius: 10px;
  background-color: rgb(4, 43, 77);
padding: 10px; 
}


.cardwordpress{
  text-align: center;
  color: white;
  border-radius: 10px;
  background-color: rgb(4, 43, 77);
padding: 10px;
}

.imgwordpre img{
  width: 100%;
  border-radius: 10px;
}

.proyectosdiseño .imgwordpre img{
  width: 100%;
  border-radius: 10px;
}



.etiquetawordpress a, .proyectosdiseño  .etiquetawordpress a {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  font-size: 20px;
  border-radius: 2em;
  background: #35eb9a;
  color: black;
  font-weight: bold;
  text-decoration: none;

}




.etiquetawordpress a img, .proyectosdiseño .etiquetawordpress a img  {
  width: 20%;
}


.etiquetawordpress{
  display:  grid;
  grid-template-columns: 1fr 1fr;
 gap: 70px;
 margin: auto;
    width: 100%;
}



.contwordpress, .cont_fondo2{
  padding-bottom: 70px;
} 




.spectra{
  height: 170px!important;
  width: 177px!important;
}




.imgdiseño img{
 
  object-fit: cover;
}






.proyectosdiseño .imgwordpre img {
  width: 100%;
  border-radius: 10px;
  height: 260px!important;
 
}



.img_card img {
  height: 300px;
  object-fit: cover;
}
.cont_fondo2, .contwordpress, .proyectosdiseño{
  width: 90%;
}






.filtros h2 {

  background-color: #35eb9a;
  background-color: #00000021;
  color: #35eb9a;
  border-color: #35eb9a;
  border-style: solid;
}

.hoververde{
  background-color: #35eb9a!important;
  color: black!important;
}















@media (max-width: 1500px){

.cont_fondo2{
  width: 90%;
}



}








  
  @media (max-width:1304px){


    .img_tec img{
      width: 69%;
    }

    .JQUERY{
      width: 69%!important;
    }

  
  .cont_fondo2{
    grid-template-columns: 1fr 1fr ;
    width: 90%;
  }

  
  
.cont_tecnologias{

  grid-template-columns: 1fr 1fr 1fr;
  width: 70%;
}


.JQUERY{
  width: 69%!important;
  height: 180px!important;
  height: auto!important;
}

.contwordpress, .proyectosdiseño{
grid-template-columns: 1fr 1fr;  
}

  

  
  }
  
  



























































  @media (max-width: 800px)
  {
.menu{
  display: initial;
}

.cont_header nav{
  display: none;
}


    .cont_fondo2{
      grid-template-columns: 1fr ;
      width: 80%;
      gap: 57px 0px;
    }

    .cont_tecnologias{
      grid-template-columns: 1fr 1fr;
      width: 65%;
      gap:30px 0;
    }
.img_tec img{
  height: auto;
}

.img_card img{
  height:auto;
}

    
.botones{
  gap: 30px;
}

.titulo_tecnologia{
  font-size: 15px;
}


.cont_etiquetas{
 display: flex;
}

.cont_etiquetas a{
  padding: 1px 16px;
}


.contwordpress, .proyectosdiseño{
  grid-template-columns: 1fr ;
}


.filtros{
  text-align: center;
  flex-direction: column;
  gap: 2px;
}

.etiquetawordpress {
  gap: 17px;
}

.botones{
  flex-direction: column;
}

.github{
  height: 160px!important;

}

.spectra{
  height: 155px!important;
  width: 170px!important;
}

img.spectra {
  height: 135px !important;
  width: 140px !important;
}


  }




















@media (max-width: 700px){
  .cont_tecnologias{
    width: 80%;
  }


  .titulo_tecnologia{
    font-size: 10px;
  }

.cont_etiquetas{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

}

























@media (max-width:450px){

  .cont_etiquetas{
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .cont_etiquetas a{
    display: flex;
    justify-content: center;
    border-radius: 9px;
  }

  .cont_etiquetas{
    margin: auto;
    width: 89%;
  }
  

}































  

  @media (max-width: 350px){
.cont_fondo1 h1{
  font-size: 57px;
}

.titulo_tecnologia h1{
  font-size: 20px;
}

.email{
  font-size: 16px;
}


.cont_tecnologias{
  grid-template-columns: 1fr;
  gap: 50px;
  width: 80%;
}

.img_tec img{
  height: auto;
  width: 50%;
}


.botones a{
  font-size: 13px;
}

.titulo_tecnologia{
  font-size: 20px;
}

.cont_links a{
  padding: 9px 3px;
}


.botones a{
  font-size: 20px;
}


.cont_fondo2{
  width: 90%;
}

  }