* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

header{
    margin-bottom: 10px;
    text-align: center;
}

h1 {
    font-size: 30px;
    font-weight: bold;
    color: #333;
    background: linear-gradient(90deg, #087c20, #58d71d, #a1a827);
    padding: 10px 20px;
    border-radius: 10px;
    transition: all 0.5s ease;
}

h1:hover{
    font-size: 45px;
    color: #fff;
    background: linear-gradient(45deg, #dae418, #99a30e, #5d8e0f, #369c14);
    animation:background-change 3s infinite;
    transform: scale(1.1);
}

.card-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

body {
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background:linear-gradient(45deg, #3d9113,#0c9d57,#ffff00,#ab9208,#d7bc1e,#0b7e22,#accf10);
}

.galeria {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.img-contenido {
    width: 150px;
    height: 150px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.img-contenido img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/*ANIMACIONES IMAGENES*/

.agit-container {
    display: inline-block;
    overflow: hidden; /* Evita que la imagen salga del contenedor */
}
  
  .agit-container img {
    transition: transform 0.2s; /* Suaviza el regreso a la posición original */
  }
  
  .agit-container:hover img {
    animation: shake 0.2s infinite;
  }
  
  @keyframes shake {
    0% {
      transform: translateX(0);
    }
    25% {
      transform: translateX(-5px);
    }
    50% {
      transform: translateX(5px);
    }
    75% {
      transform: translateX(-5px);
    }
    100% {
      transform: translateX(0);
    }
  }

  .correr-container {
    display: inline-block;
    overflow: hidden; /* Evita que la imagen salga del contenedor visible */
  }
  
  .correr-container img {
    transition: transform 0.5s ease; /* Suaviza el movimiento */
  }
  
  .correr-container:hover img {
    transform: translateX(100%); /* La imagen se mueve fuera del contenedor */
  }
  
  .volar-container {
    display: inline-block;
    overflow: hidden; /* Evita que la imagen salga del contenedor */
    position: relative;
  }
  
  .volar-container img {
    transition: transform 0.8s ease, opacity 0.8s ease; /* Suaviza el movimiento y la desaparición */
  }
  
  .volar-container:hover img {
    transform: translateY(-300px) rotate(-20deg); /* La imagen se eleva y gira ligeramente */
    opacity: 0; /* Desaparece gradualmente */
  }