* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    background: #000;
 }
 #container {
    /* border: 2px solid red; */
    display: grid;
    grid-template-columns: repeat(20,100px);
    grid-gap: 4px;
 }
 #container span {
    /* border: 2px solid yellow; */
    position: relative;
    width: 100px;
    height: 100px;
    background: #111;
    z-index: 10;
 }
 #container span::before {
    content: '';
    position: absolute;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.05);
 }
 #cursor {
    position: absolute;
    width: 500px;
    height: 500px;
    background: #0f0;
    transform: translate(-50%,-50%);
    z-index: 1;
    border-radius: 50%;
    animation: animate 4s linear infinite;
 }
 #cursor::before,
 #cursor::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0f0;
    border-radius: 50%;
 }
 @keyframes animate {
    0% {
        filter: hue-rotate(0deg) blur(50px);
    }
    100%{
        filter: hue-rotate(360deg) blur(50px);
    }
 }

 
.esin {    
    z-index: 20;
    transform: translate(-450%,-150%);
    pointer-events:fills;
}