@charset "UTF-8";


body {
    background-color: rgb(0, 0, 0); 
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}


.circle-container {
    display:flexbox; 
    margin-top: 400px;           
}



.circle {
    border-radius: 50%;
    opacity: 90%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.7), rgba(0, 0, 0, 0));
    filter: blur(50px) saturate(250%) drop-shadow(3px 3px 10px rgb(245, 245, 245));
    margin: 10px;
    position: absolute;
    cursor: grab; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: inset 10px 10px 30px rgba(0, 0, 0, 0.6), inset -10px -10px 30px rgba(255, 255, 255, 0.3),
                5px 5px 15px rgba(0, 0, 0, 0.5);
    transition: transform 700ms ease-in-out, filter 400ms ease-in-out;
}

.circle:hover {
    filter: blur(30px) saturate(250%) drop-shadow(3px 3px 10px rgb(245, 245, 245));
    transform: scale(1.2);
    cursor: grabbing; 
}

.circle:active {
    cursor:grab;
}



                .red { 
                    background-color: rgb(250, 54, 0); 
                    width: 500px; 
                    height: 500px; 
                    left: 618px; 
                    top: 250px;  
                }
                
                .orange { 
                    background-color: rgb(255, 202, 69); 
                    width: 480px; 
                    height: 480px; 
                    left: 628px; 
                    top: 263px;  
                }
                
                .yellow { 
                    background-color: yellow; 
                    width: 460px; 
                    height: 460px; 
                    left: 642px; 
                    top: 276px;  
                }
                
                .lime { 
                    background-color: rgb(183, 255, 0); 
                    width: 440px; 
                    height: 440px; 
                    left: 652px; 
                    top: 287px;  
                }
                
                .green { 
                    background-color: rgb(42, 255, 42); 
                    width: 420px; 
                    height: 420px; 
                    left: 660px; 
                    top: 300px;  
                }
                
                .lightgreen { 
                    background-color: rgb(127, 138, 238); 
                    width: 400px; 
                    height: 400px; 
                    left: 668px; 
                    top: 311px;  
                }
                
                .cyan { 
                    background-color: cyan; 
                    width: 380px; 
                    height: 380px; 
                    left: 677px; 
                    top: 322px;  
                }
                
                .lightblue { 
                    background-color: rgb(100, 183, 255); 
                    width: 360px; 
                    height: 360px; 
                    left: 686px; 
                    top: 332px;  
                }
                
                .blue { 
                    background-color: blue; 
                    width: 340px; 
                    height: 340px; 
                    left: 698px; 
                    top: 343px;  
                }
                
                .purple { 
                    background-color: rgb(205, 105, 248); 
                    width: 320px; 
                    height: 320px; 
                    left: 706px; 
                    top: 353px;  
                }
                
                .magenta { 
                    background-color: magenta; 
                    width: 300px; 
                    height: 300px; 
                    left: 718px;
                    top: 365px;  
                }
                
                .pink { 
                    background-color: rgb(255, 81, 110); 
                    width: 280px; 
                    height: 280px; 
                    left: 727px; 
                    top: 360px;
                }