* {
   box-sizing: border-box;
}

body {
   background-color: #000;
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100vh;
   overflow: hidden;
   margin: 0;
}

.container {
   display: flex;
   justify-content: center;
   align-items: center;
   max-width: 500px;
   flex-wrap: wrap;
   cursor: pointer;
}

.square {
   width: 16px;
   height: 16px;
   background: #1d1d1d;
   margin: 2px;
   box-shadow: 0 0 2px #000;
   transition: 1s ease;
   border-radius: 50%;
}

.square:hover {
   transition-duration: 0s;
}