body {
    background-color: #222;
}

div.solar {
   
    width: 500px; max-width: 80%; height: 500px;
    margin: 200px auto;
    box-shadow: 0px 0px 60px #EEE,
                -25px -25px 50px darkorange,
                25px 25px 60px red,
                -40px -40px 50px darkred,


}

div.solar div {
    
    width: 100%; height: 100%; border-radius: 50%;
    background-color: #111;
    box-shadow: 0px 0px 60px #EEE,
                0px 20px 40px orange,
                45px 45px 60px darkorange,
                -20px -20px 40px yellow,
                -20px 0px 40px yellowgreen,
                15px 15px 20px blue,
                20px 20px 50px red,
                55px 55px 70px darkred,
                -25px -25px 50px white;
    position: relative;
}

div.solar div::before {
    content: ""; display: block;
    width: 90%; height: 90%;
    border: 2px solid red;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(-30deg);
    border-radius: 40%;
    box-shadow: 40px 0px 110px #FFF,
                0px 20px 40px orange,
                25px 25px 65px darkorange,
                -20px -20px 40px yellow,
                -20px 0px 40px yellowgreen,
                -25px -25px 50px blue,
                35px 35px 80px red,
                -65px -65px 70px darkred,
                -25px -25px 50px white;
    z-index: -1;
    animation-name: solar;
    animation-duration: 15s;
}

div.solar div::after {
    content: ""; display: block;
    width: 84%; height: 84%;
    border: 2px solid red;
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%,-50%) rotate(50deg);
    border-radius: 40%;
    box-shadow: 0px -40px 90px #FF0
                0px 20px 40px orange,
                -40px -40px orangered,
                -35px -35px 50px darkorange,
                0px -20px 40px yellow,
                -20px 0px 40px yellowgreen,
                20px 20px 70px red,
                -45px -45px 60px white;
    z-index: -1;
    animation-name: solar;
    animation-duration: 15s;
}

@keyframes solar {
    from {
        transform: translate(-50%,-50%) rotate(0deg);

    }
    to {
        transform: translate(-50%,-50%) rotate(360deg);

    }
}