:root {
    --sun-diameter: 50px;
    --inner-corona-thickness: 20px;
    --outer-corona-thickness: 40px;
}

body {
    background: #000;
	margin: 0;
}

div.sky {
    background: linear-gradient(0deg,
                    rgba(50 150 240 / 60%) 0%,
                    rgba(50 150 240 / 40%) 10%,
                    rgba(50 150 240 / 30%) 20%,
                    rgba(50 150 240 / 10%) 40%,
                    rgba(50 150 240 / 5%) 50%,
                    transparent 100%);
    height: 40vh;
    mask-image: linear-gradient(90deg, transparent, #000, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000, transparent);
    position: relative;
    width: 100%;
}

div.dawn {
    background: linear-gradient(0deg,
                    rgba(255 200 0 / 25%) 0%,
                    transparent 100%);
    bottom: 0;
    height: 20px;
    mask-image: linear-gradient(90deg, transparent, #000, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000, transparent);
    position: absolute;
    width: 100%;
}

div.horizon {
    background: linear-gradient(90deg, transparent 0%, rgba(255 200 0 / 50%) 50%, transparent 100%);
    bottom: 0;
    height: 1px;
    position: absolute;
    width: 100%;
}

div.glow {
    background-image: radial-gradient(calc((var(--sun-diameter) + (var(--inner-corona-thickness) * 2) + (var(--outer-corona-thickness) * 2)) * 2) calc(var(--sun-diameter) + (var(--inner-corona-thickness) * 2) + (var(--outer-corona-thickness) * 2)) at center,
                                        rgba(255 100 0 / 100%) 0%,
                                        rgba(255 150 0 / 90%) 33%,
                                        rgba(255 200 0 / 20%) 66%,
                                        rgba(255 200 0 / 5%) 80%,
                                        transparent);
    height: calc((var(--sun-diameter) + var(--inner-corona-thickness) + var(--outer-corona-thickness)) * 3.141);
    left: 50%;
    margin-top: 5%;
    opacity: 0.3;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc((var(--sun-diameter) + var(--inner-corona-thickness) + var(--outer-corona-thickness)) * (3.141 * 2));
    z-index: 1;
}

div.outer-corona {
    background-image: radial-gradient(circle calc(var(--sun-diameter) + (var(--inner-corona-thickness) * 2) + (var(--outer-corona-thickness) * 2)) at center,
                                        rgba(255 100 0 / 100%) 0%,
                                        rgba(255 150 0 / 90%) 33%,
                                        rgba(255 200 0 / 20%) 66%,
                                        rgba(255 200 0 / 5%) 80%,
                                        transparent);
    height: calc((var(--sun-diameter) + var(--inner-corona-thickness) + var(--outer-corona-thickness)) * 3.141);
    left: 50%;
    margin-top: 45px;
    opacity: 0.5;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc((var(--sun-diameter) + var(--inner-corona-thickness) + var(--outer-corona-thickness)) * 3.141);
    z-index: 1;
}

div.inner-corona {
    height: calc((var(--sun-diameter) + (var(--inner-corona-thickness) * 2)) * 3.141);
    background-image: radial-gradient(circle calc(var(--sun-diameter) + (var(--inner-corona-thickness) * 2)) at center,
                                        rgba(255 100 0 / 100%) 0%,
                                        rgba(255 150 0 / 90%) 33%,
                                        rgba(255 200 0 / 20%) 66%,
                                        rgba(255 200 0 / 5%) 80%,
                                        transparent);
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc((var(--sun-diameter) + (var(--inner-corona-thickness) * 2)) * 3.141);
}

div.sun {
    height: calc(var(--sun-diameter) * 3.141);
    background-image: radial-gradient(circle var(--sun-diameter) at center,
                                        rgba(255 100 0 / 100%) 0%,
                                        rgba(255 200 0 / 90%) 33%,
                                        rgba(255 255 0 / 90%) 66%,
                                        rgba(255 255 100 / 96%) 80%,
                                        rgba(255 255 200 / 50%) 90%,
                                        transparent 100%);
    left: 50%;
    margin-top: 2.2%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--sun-diameter) * 3.141);
}

div.planet {
    background: linear-gradient(0deg,
                    #000000 0%,
                    #010000 50%,
                    #040000 60%,
                    #080100 80%,
                    #100200 92%,
                    #200400 96%,
                    #300800 100%);
    height: 60%;
    mask-image: linear-gradient(90deg, transparent, #000, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000, transparent);
    position: absolute;
    top: 40%;
    width: 100%;
    z-index: 5;
}