:root{
    --moon-color-offset: -100% 200%;
    --moon-base-color: rgb(58,89,176);
}

.moon{
    position: absolute;
    width:20vh;
    height:20vh;
    border-radius: 50%;
    background-image: radial-gradient(circle at var(--moon-color-offset), rgb(255, 255, 255), var(--moon-base-color));
}
.moon.big{
    width:40vh;
    height:40vh;
}
.moon.small{
    width:10vh;
    height:10vh;
}
.moon.red{
    background-image: radial-gradient(circle at var(--moon-color-offset),  rgb(243, 189, 167), var(--moon-base-color));
}
.moon.redder{
    background-image: radial-gradient(circle at -20% 120%,  rgb(243, 167, 167), var(--moon-base-color));
}



.star{
    position: absolute;
    background-color:white;
    width: 2px;
    height: 2px;
}

.star.big{
    width: 4px;
    height: 4px;
    border-radius: 50%;
}

.star.small{
    width: 1px;
    height: 1px;
}

.cloud-section{
    width:100vw;
    height:50vw;
    position: relative;
}

.cloud{
    position: absolute;
    width:30%;
    height:10%;
    border-radius: 50%;
    filter: blur(calc(var(--screen-area)*2));
    /* background-image: radial-gradient(circle at var(--moon-color-offset),  rgb(243, 189, 167), var(--moon-base-color)); */
    /* background-image: linear-gradient(to bottom,rgb(11, 37, 58),rgb(219, 198, 170),rgb(247, 175, 93)); */
    
    /* background-image: linear-gradient(to top rgb(243, 157, 157,.8) rgba(111, 108, 138, 0.5)); */
}

.cloud.upper{
    background-image: linear-gradient(to top right, rgb(243, 157, 157,.8), rgb(111, 108, 138,.5));
}

.cloud.middle{
    background-image: linear-gradient(to top right, rgb(255, 227, 152, 50%), rgb(194, 72, 29, 80%));
}

.cloud.lower{
    background-image: linear-gradient(to bottom right, rgb(130, 7, 7, 50%), rgb(255, 233, 89 , 50%));
}

.cloud.big{
    width:60%;
    height:20%;
}

.cloud.small{
    width:15%;
    height:5%;
}

.cloud.red{
    /* background: rgb(243, 157, 157,.8); */
}

.cloud.blue{
    /* background: rgba(111, 108, 138, 0.5); */
}

.cloud.orange{
    background: rgba(235, 167, 79, 0.5);
}