body {
      font-family: Arial, sans-serif;
      background-color: #f3f3f3;
      margin: 0;
      padding: 2rem;
    }

    h1 {
      text-align: center;
      margin-bottom: 2rem;
    }

    h3 {
      text-align: center;
      margin-bottom: 1rem;
    }

    .contenedor-galeria {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
    }

    .tarjeta {
      background-color: white;
      border-radius: 10px;
      padding: 20px;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
      text-align: center;
      justify-items: center;
    }

    /* Estilos para las formas CIRCULO*/
    .circulo {
      width: 100px;
      height: 100px;
      margin: auto;
      background: linear-gradient(45deg, #ff7e5f, #feb47b);
      border-radius: 50%;
    }

    /* Estilos para las formas TRIANGULO */
    .triangulo {
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #6a11cb;
      background-image: linear-gradient(315deg, #6a11cb 0%, #2575fc 74%);
      clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    /* Estilos para las formas CUADRADO */
    .cuadrado {
      width: 100px;
      height: 100px;
      margin: auto;
      background: repeating-linear-gradient(
        45deg,
        #ffcc00,
        #ffcc00 10px,
        #ffffff 10px,
        #ffffff 20px
      );
      border: 2px dashed #333;
    }
    
    /* Estilos para las formas CUADRADO con sombra */
    .cuadrado-sombra {
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #4caf50;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
    }
    /* Estilos para las formas CUADRADO con bordes redondeados */
    .cuadrado-redondeado {
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #2196f3;
      border-radius: 20px;
    }
    /* Estilos para las formas CUADRADO con sombra y bordes redondeados */
    .cuadrado-sombra-redondeado {
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: #4caf50;
      border-radius: 20px;
      box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08);
    }
    /* Estilos para las formas POKEBALL */
    .pokeball {
      position: relative;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: linear-gradient(to bottom, #ff0000 0% 50%, #fff 50% 100%);
      border: 5px solid #000000;
      box-shadow: inset 0 0 10px rgba(0,0,0,0.5);

    }
    .line {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 10px;
      background-color: #000;
      transform: translateY(-50%);
    }
    .circle {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 30px;
      height: 30px;
      background-color: #ffffff;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    }

    .circle::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 10px;
      height: 10px;
      background-color: #000;
      border-radius: 50%;
      transform: translate(-50%, -50%);
    }

  .chihuahua {
    width: 100px;
    height: 100px;
    background-color: #ff9900;
    border-radius: 50%;
    position: relative;
    margin: auto;
  }