#black{
    background-color: #000;
}

#white{
    background-color: #fff;
}

#red{
    background-color: #d00000;
}

#rBlue{
    background-color: #003eff;
}

#nBlue{
    background-color: #00004e;
}

#purple{
    background-color: #3a0086;
}

#maroon{
    background-color: #800000;
}

#pink{
    background-color: #ff99cc;
}

#orange{
    background-color: #ff6600;
}

#green{
    background-color: #007e00;
}
#sapphire{
    background-color: #0f77c0;
}

#sGrey{
    background-color: #aaa;
}

.color{
    height: 33px;
    width: 33px;
    margin: 5px;
    border-radius:25px;
    display: inline-block;
}
.colorW{
    border: solid black 1px;
    height: 31px;
    width: 31px;
    margin: 5px;
    border-radius:25px;
    display: inline-block;
}
.color:hover{
    opacity: 0.5;
}
.colorW:hover{
    opacity: 0.5;
}
@media screen and (max-width: 700px){




}