#redDiv, #orangeDiv, #yellowDiv, #greenDiv, #blueDiv, #purpleDiv, #pinkDiv {
    position: absolute;
    width: 100px;
    height: 100px;
    transform: translate(-50%, -50%);
    cursor: move;
    border-radius: 50%;
    opacity: 0.5;
}
.red {
    background-color: red;
    top: 10%;
    left: 10%;
}
.orange {
    background-color: orange;
    top: 10%;
    left: 30%;
}
.yellow {
    background-color: yellow;
    top: 10%;
    left: 50%;
}
.green {
    background-color: green;
    top: 10%;
    left: 70%; 
}
.blue {
    background-color: blue;
    top: 10%;
    left: 90%; 
}
.purple {
    background-color: purple;
    top: 30%;
    left: 10%; 
}
.pink {
    background-color: pink;
    top: 30%;
    left: 30%; 
}
.reset {
    position: absolute;
    top: 75%;
    left: 25%;
    transform: translate(-50%, -50%);
    border: 0;
    width: 150px;
    height: 37px;
    outline: 0;
    background-color: lightgray;
    border-radius: 0;
}
#colorpick {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    width: 150px;
    height: 37px;
    outline: 0;
    background-color: lightgray;
    border-radius: 0;
}
#submit {
    position: absolute;
    top: 85%;
    left: 25%;
    transform: translate(-50%, -50%);
    border: 0;
    width: 150px;
    height: 37px;
    outline: 0;
    background-color: lightgray;
    border-radius: 0; 
}
#select {
    position: absolute;
    top: 75%;
    left: 75%;
    transform: translate(-50%, -50%);
    border: 0;
    width: 150px;
    height: 37px;
    outline: 0;
    background-color: lightgray;
    border-radius: 0; 
}