body {
    /* background-color: #7f7f7f; */
}

.color {
    display: inline-table;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #182879;
    background-image: radial-gradient(90% 90% at 65% 80%, #ffffff 20%, transparent);
    /* box-shadow: -7px -20px 7px -10px rgba(26, 68, 111, 0.9) inset, 0px 30px 5px -10px rgba(0, 0, 0, 0.3), inset 0 0 10px 0px #fff, inset 0 0 25px 0px #fff; */
    position: relative;

}

.color::before {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-block;
    background: radial-gradient(12% 9% at 42% 21%, #fff 25%, transparent), radial-gradient(8% 3% at 52% 95%, #ffffff 15%, transparent);
    /* box-shadow: -2px 67px 8px -40px #dbf2ff; */
    transform: rotate(-33deg);
    position: absolute;
}

.color.B {
    background-color: blue;
}

.color.R {
    background-color: red;
}

.color.G {
    background-color: green;
}

.color.Y {
    background-color: rgb(225, 225, 5);
}

.color.P {
    background-color: rgb(255, 3, 209);
}

.color.W {
    background-color: #d0d0d0;
}