.grid-container {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 boles per fila */
    gap: 100px 140px; /* pots ajustar el gap si queda massa separat o massa junt */
    margin: 0px;
    justify-items: center; /* centra les boles dins de cada columna */
}

.bola {
    width: 150px;
    height: 150px;
    background-color: rgb(255, 255, 255);
    border-radius: 50%;
    background-size: cover;
    position: relative;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
}


.bola:nth-child(1) { background-image: url('image/01.jpg'); }
.bola:nth-child(2) { background-image: url('image/02.jpg'); }
.bola:nth-child(3) { background-image: url('image/03.jpg'); }
.bola:nth-child(4) { background-image: url('image/04.jpg'); }
.bola:nth-child(5) { background-image: url('image/05.jpg'); }
.bola:nth-child(6) { background-image: url('image/06.jpg'); }
.bola:nth-child(7) { background-image: url('image/07.png'); }
.bola:nth-child(8) { background-image: url('image/08.jpg'); }
.bola:nth-child(9) { background-image: url('image/09.jpg'); }
.bola:nth-child(10) { background-image: url('image/10.jpg'); }
.bola:nth-child(11) { background-image: url('image/11.png'); }
.bola:nth-child(12) { background-image: url('image/12.png'); }
.bola:nth-child(13) { background-image: url('image/13.png'); }
.bola:nth-child(14) { background-image: url('image/14.jpg'); }
.bola:nth-child(15) { background-image: url('image/15.png'); }
.bola:nth-child(16) { background-image: url('image/16.jpg'); }
.bola:nth-child(17) { background-image: url('image/17.jpg'); }
.bola:nth-child(18) { background-image: url('image/18.jpg'); }



/* Regles per a imatges específiques aquí... */

.bola-generated {
    width: 100px; /* Ample final */
    height: 100px; /* Altura final */
    background-color: rgb(0, 0, 0);
    border-radius: 50%;
    position: absolute;
    opacity: 0; /* Comença invisible */
    transition: opacity 0.3s, transform 0.3s;
    transform: scale(0); /* Inicia la transformació d'escala */
}

.bola-generated.left {
    top: 50%;
    left: 35px;
    transform: translate(-100%, -50%) scale(0);
}

.bola-generated.right {
    top: 50%;
    right: -60px;
    transform: translate(0%, -50%) scale(0);
}

/* Estils quan les boles generades són visibles */
.bola-generated.show {
    opacity: 1; /* Finalment opaca */
    transform: translate(-50%, -50%) scale(1); /* Centra i escala */
}

.bola-generated.left.show {
    transform: translate(-150%, -50%) scale(1); /* Ajusta la posició quan es mostra */
}

.bola-generated.right.show {
    transform: translate(50%, -50%) scale(1); /* Ajusta la posició quan es mostra */
}