.star-grid {
    display: grid;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-content: center;
    grid-template-columns: repeat(auto-fill, 92px); /* 72px + 20px gap */
    gap: 20px;
    padding: 20px;
    box-sizing: border-box;
}

.star {
    width: 72px;
    height: 72px;
    /*Star built from svg data input */
    /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="gold" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>'); */
    background-image: url("icon-72.png");
    background-size: contain;
    animation: twinkle 2s infinite alternate ease-in-out;
    filter: blur(2px);
    opacity: 0.6;
}

@keyframes twinkle {
    0% {
        opacity: 0.2;
        filter: blur(0.5px);
    }
    100% {
        opacity: 1;
        filter: blur(3.5px);
    }
}

/* Create staggered animations based on grid position */
.star:nth-child(7n+1) { animation-delay: -0.5s; }
.star:nth-child(7n+2) { animation-delay: -0.7s; }
.star:nth-child(7n+3) { animation-delay: -0.9s; }
.star:nth-child(7n+4) { animation-delay: -1.1s; }
.star:nth-child(7n+5) { animation-delay: -1.3s; }
.star:nth-child(7n+6) { animation-delay: -1.5s; }
.star:nth-child(7n+7) { animation-delay: -1.7s; }