@charset "UTF-8";



body {
    
    background-color: #1d1d1f; 
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    
    
}

.grid-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0;
    filter: blur(8px) contrast(2);
    overflow: visible;
}

.box {
      width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: white;
    transform: scale(0.5);
    margin: 0;
    opacity: 0.4;
    transition: transform 1s ease 0s;
}



    

.box .circle{
    width: 100%;
    height: 100%;
    background-color: inherit;
    border-radius: 50%;
    transform: scale(0.5);
    transition: all 0.4s ease, filter 0.4s ease;
    animation: pulse 3s infinite;
    mix-blend-mode: lighten;
    pointer-events: none;
    filter:blur(8px);
   
  
   


}


.box:hover .circle{
    opacity: 0.6; 
    transform:scale(1.3);
  box-shadow: 0 0 80px rgba(255, 255, 255, 0.6);
    filter: blur(12px);
  mix-blend-mode: lighten;
  animation-play-state: paused;  
  transition-delay: 0s;
}




.box:not(:hover) {
    transition-delay: 0.3s;
    transform: scale(1)
}


@keyframes pulse {
0%, 100% {transform: scale(1); opacity: 0.6;}
50% {transform: scale(1.3); opacity: 0.8;}
}

.box:nth-child(4n+1):hover { background-color: #ff0055; } 
.box:nth-child(4n+2):hover { background-color: #00e1ff; } 
.box:nth-child(4n+3):hover { background-color: #ffcc00; } 
.box:nth-child(4n+4):hover { background-color: #43008b; } 



.box:nth-child(2n):hover { transform: scale(1); } 
.box:nth-child(3n):hover { transform: scale(1.5); } 
.box:nth-child(4n):hover { transform: scale(2); } 
.box:nth-child(5n):hover { transform: scale(2.5); } 
.box:nth-child(7n):hover { transform: scale(3); } 




.box:hover {
    box-shadow: 0 0 50px rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease;
    transform: scale(1.3);
}