#design {
    width: 100%;
    max-width: 600px;
    height: 400px;
    position: relative;  
    background-color: #10091c;
    border: 20px groove hsl(120, 4%, 67%);
    margin: 2rem 0;
    background-origin: border-box;
    -webkit-background-origin: border-box;
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

/* circles in common */
.circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
}

/* its position within the square | RYB colors  */
.circle-B-P {
    background-color: #4424D6;/* B_P RYB colors */
    left: 45px;
    top: 1px;
}

.circle-Y-G {
    background-color: #B2D732;/* Y-G RYC colors */
    left: 45px;
    top: 1px;
}

.star {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    position: absolute;
    background-color: white;
}

.polaris {
    left: 250px;

}

.blend-mode-difference {
    mix-blend-mode: difference;
}

[class^="planet"]{
    position: absolute;
    border-radius: 50%;
    background-origin: border-box;
    -webkit-background-origin: border-box;
}

.planet-tan-color {
    left: 46px;
    top: 75px;
    width:200px;
    height:200px; 
    background-image:linear-gradient(to right, black 0%, transparent 50%, white 100%),linear-gradient(to bottom, #F7F0D4 0%, #0247FE 70%,#F7F0D4 100%);
    background-color: beige;
    padding: 20px;  
}

/* This element has a stacking value of 1, which makes the text color change from blue-violet to a range of dry green . */
.planet-khaki-color {
    z-index: 1;
    left: 39px;
    top: 75px;
    width: 220px;
    height: 220px;
    background-color: khaki;
}

/* figcaption tag */
.greeting {
    position: absolute;
    bottom: 95px;
    left: 40px;
}

/* The color result over circle is rgb(112, 140, 111) [hsl(118, 12%, 49%)] */
.greeting p {
    color: white;
    font: 900 55px "Brush Script MT", cursive;
}

@media (min-width: 320px) and (max-width: 400px) {
    #design {
        border: none;
    }

    .polaris {
        left: 230px;
    }

    .greeting {
        position: absolute;
        bottom: 50px;
        left: 20px;
        color: white;
        font: 900 55px "Brush Script MT", cursive;
    }
}