/* Fuente Roboto para todos los elementos */
* {
    font-family: "Roboto", sans-serif;
  }
  /*texto primario*/
  .bg-moradoclaro{
    color: #e0b8ef;
  }
  /*boton enviar*/
  .bg-moradoclaro2{
    background-color: #e0b8ef;
  }
  
  /*color texto desarrolladora*/
  .bg-morado1{
    color: #A707E0;
  }
  /*color portafolio*/
  .bg-negro{
    color: black;
  }
  /*color navbar*/
  .bg-morado{
    background-color: #A707E0;
  }
  
  /* Ajusta el espaciado entre letras en texthead */
  .texthead {
    letter-spacing: 0.5em;
  }
  
  /* Color de fondo negro para bg-element */
  .bg-element {
    background-color: black;
  }
  
  /* Imagen de fondo, ajustada a su tamaño y posición en bg-image */
  .bg-image {
    background-image: url(../img/fondo222.jpg);
    height: 35rem;
    background-position: left;
    background-size: cover;
  }
  
  /* Limita la altura máxima de my-picture */
  .my-picture {
    max-height: 20em;
  }
  
  /* Ajusta la altura de las imágenes dentro de item-tech */
  .item-tech img {
    height: 5em;
  }
  
  /* Aplica una rotación de 360 grados y sombra de texto al hacer hover en imágenes dentro de item-tech */
  .item-tech img:hover {
    transform: rotate(360deg);
    text-shadow: 1em;
    transition: 1s;
  }
  
  /*tarjetas*/
  i{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .card{
    background-color: #e0b8ef;
    display:flex;
    gap: 20px;
    height: 350px;
    justify-content: center;
    align-items: center;
  }
  
  .card img{
    width: 300px;
    height: 210px;
  }
  
  /* Limita la altura máxima de item-works */
  .item-works {
    max-height: 50em;
  }
  
  /* Reduce la opacidad de las imágenes al hacer hover en item-works */
  .item-works img:hover {
    opacity: 0.2;
    transition: 0.5s;
  }
  
  /* Ajusta el ancho al 100% y limita la altura máxima de item-footer */
  .item-footer {
    width: 100%;
    max-height: 10em;
  }