.main-container{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    padding: 0;
}
.container{
    display: grid;
    grid-template-columns: repeat(10,1fr);
    grid-template-rows: repeat(10,1fr);
    background-color: whitesmoke;
    height:600px;
    width: 600px;
    
}
.circle{
    border-radius: 50%;
}
.circle1{
    grid-area: 1/1/3/3;
    background-color: #9EF8EE;
}
.circle2{
    grid-area: 2/2/3/3;
    background-color: #22BABB;
}
.circle3{
    grid-area: 1/7/5/11;
    background-color: #22BABB;
}
.circle4{
    grid-area: 4/7/6/9;
    background-color: #9EF8EE;
}
.circle5{
    grid-area:4/7/5/8;
    background-color: #F24405;
}
.circle6{
    grid-area: 5/1/8/4;
    background-color:#FA7F08;
}
.circle7{
    grid-area: 7/2/9/4;
    background-color: #9EF8EE;
}
.circle8{
    grid-area: 8/7/10/9;
    background-color: #348888;
}
.circle9{
    grid-area: 7/9/8/10;
    background-color: #FA7F08;
}
.circle10{
    grid-area: 7/5/8/6;
    background-color: #22BABB;
}