.hexagon-background {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0; /* plasează hexagoanele în spatele conținutului */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.hexagon {
width: 2000px; /* latimea hexagonului/octogonului */
height: 2000px; /* inaltimea hexagonului/octogonului */
background-color: rgba(128, 128, 128, 0.1);  /* culoarea hexagonului/octogonului cu transparență de 90% */

clip-path: polygon(30% 0%, 70% 0%, 100% 25%, 100% 75%, 70% 100%, 30% 100%, 0% 75%, 0% 25%);
/*box-shadow: 0 0 15px 10px rgba(255, 0, 0, 0.5); */ /* efectul de difuz poate fi inlaturat daca doresti transparență */
margin: 1%; /* mărimea marginii redusă pentru a le apropia */

}

@media screen and (max-width: 500px) {
.hexagon {
display:none;
}
}

@keyframes pulseBorder {
0%, 100% {
box-shadow: 0 0 15px 10px rgba(255, 0, 0, 0.5);
}
50% {
box-shadow: 0 0 8px 5px rgba(255, 0, 0, 0.5);
}
}

@keyframes pulseDimensions {
0%, 100% {
width:2000px;
height:2000px;
}
50% {
width:500px;
height:500px;
}
}

@keyframes rotateHex {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

.hexagon {
animation: pulseDimensions 4s infinite ease-in-out,  rotateHex 15s infinite linear;
}


/*
.hexagon {
    width: 100px; 
    height: 86.6px; 
    background-color: gray; 
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 15px 10px rgba(255, 0, 0, 0.5); 
    margin: 1.66%;
}
*/