html{
    background-color:#333333;
}

.wrapper{
    width: 145px;
    height: 145px;
    border-radius:145px;
    transform: translate(-50%, -50%);
}

.circle {
    position: absolute;
    top: 10%;
    left: 50%;
    background-color: red;
}
.circle2 {
    position: absolute;
    top: 80%;
    left: 30%;
    background-color: yellow;
}
.circle3{
    position: absolute;
    top: 100%;
    left: 50%;
    background-color: Green;
}
.circle4{
    position: absolute;
    top: 80%;
    left: 70%;
    background-color: #00FFFF;
    
}
.circle5{
    position: absolute;
    top: 50%;
    left: 75%;
    background-color: Blue;
    
}
.circle6{
    position: absolute;
    top: 20%;
    left: 69%;
    background-color: Magenta;
   
}
.circle7{
    position: absolute;
    top: 50%;
    left: 24%;
    background-color: white;
    
}
.circle8{
     position: absolute;
    top: 20%;
    left: 30%;
    background-color: black;
    
}

/* selected color circles*/
/*blue*/
.color{
    width: 180px;
    height:180px;
    border-radius: 180px;
    position: absolute;
    top: 50%;
    left: 75%; 
    background-color: #546C7E;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}
.color2{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    position: absolute;
    top: 50%;
    left: 75%;
    background-color: #C0D6D5;
    transform: translate(-50%, -50%);
    -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*cyan*/
.color3{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    position: absolute;
    background-color: #91ffff;
    top: 80%;
    left: 70%;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}
.color4{
     width: 50px;
    height: 50px;
    border-radius: 50px;
    position: absolute;
    background-color: #8EFFE5;
    top: 80%;
    left: 70%;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*green*/
.color5{
    width: 120px;
    height: 120px;
    border-radius: 120px;
    position: absolute;
    background-color: #9AC019;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*blue*/
.color6{
     width: 100px;
    height:100px;
    border-radius: 100px;
    position: absolute;
    background-color: #76B5C1;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*black*/
.color7{
    width: 120px;
    height:120px;
    border-radius: 120px;
    position: absolute;
    background-color: #1A1A1A;
    top: 20%;
    left: 30%;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*red*/
.color8{
    width: 50px;
    height:50px;
    border-radius: 50px;
    position: absolute;
    background-color: #EFBEC8;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
      -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}
.color9{
    width: 100px;
    height:100px;
    border-radius: 100px;
    position: absolute;
    background-color: #DD0000;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*white*/
.color10{
    width: 180px;
    height:180px;
    border-radius: 180px;
    position: absolute;
    top: 50%;
    left: 24%;
    background-color: #EDEDED;
    transform: translate(-50%, -50%);
    -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}
.color11{
    width: 165px;
    height:165px;
    border-radius: 165px;
    position: absolute;
    top: 50%;
    left: 24%;
    background-color: #FBFAFA;
    transform: translate(-50%, -50%);
    -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}

/*red*/
.color12{
    width: 180px;
    height: 180px;
    border-radius: 180px;
    position: absolute;
    top: 10%;
    left: 50%;
    background-color: #82191E;
    transform: translate(-50%, -50%);
    -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}


/*yellow*/
.color13{
    width: 120px;
    height: 120px;
    border-radius: 120px;
    position: absolute;
    top: 80%;
    left: 30%;
    background-color: #FFFF60;
    transform: translate(-50%, -50%);
     -webkit-transition: width 2s height 2s;
    transition: width 2s height 2s;
}
div:hover {
    width: 200px;
    height: 200px;
    border-radius: 200px;
}