.art-wrapper {   
    --bg-early-morning-stop1: #cc82a0;
    --bg-early-morning-stop2: #7172ab;
    --bg-early-morning-stop3: #4b4a6a;

    --bg-morning-stop1: #ebb2b2;
    --bg-morning-stop2: #83addb;

    --bg-afternoon-stop1: #94dfff;
    --bg-afternoon-stop2: #b7eaff;

    --bg-evening-stop1: #311206;
    --bg-evening-stop2: #b64910;
    --bg-evening-stop3: #c5732c;
    --bg-evening-stop4: #193d52;
    
    --bg-night-stop1: #191621;
    --bg-night-stop2: #020110;

    --moon-color: #f6f1d5;    
    --moon-glow-stop1: #ffffff3f;
    --moon-glow-stop2: #f6f1d53f;
    --moon-glow-stop3: #ede3ab3f;

    --twinkle-duration: 4s;

    position: relative;
    width: 100%;
    height: 50vw;
    
    & .painting {
        position: relative;
        width: 100%;
        height: 100%;
        opacity: 0.5;
        overflow: hidden;
                
        &.early-morning {
            background-image: linear-gradient(to top, var(--bg-early-morning-stop1) 0%, var(--bg-early-morning-stop2) 50%, var(--bg-early-morning-stop3) 100%);
        }

        &.morning {
            background-image: linear-gradient(to top, var(--bg-morning-stop1), var(--bg-morning-stop2));
        }

        &.afternoon {
            background-image: linear-gradient(to top, var(--bg-afternoon-stop1), var(--bg-afternoon-stop2));
        }

        &.evening {
            background-image: linear-gradient(to top, var(--bg-evening-stop1) 0%, var(--bg-evening-stop2) 16%, var(--bg-evening-stop3) 33%, var(--bg-evening-stop4) 100%);
        }

        &.night {
            background-image: linear-gradient(to top, var(--bg-night-stop1), var(--bg-night-stop2));

            .stars-wrapper {
                position: relative;
                pointer-events: none;
                width: 100%;
                height: 100%;
                overflow: hidden;
                
                & .stars {
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    
                    animation-name: twinkle;
                    animation-duration: var(--twinkle-duration);
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: infinite;

                    &:nth-child(2) {
                        animation-delay: calc(var(--twinkle-duration) * -0.33);
                    }
                    &:nth-child(3) {
                        animation-delay: calc(var(--twinkle-duration) * -0.66);
                    }                    

                    & .star {
                        fill: white;

                        &:nth-child(3n) {
                            opacity: 0.8;
                        }
                        &:nth-child(7n) {
                            opacity: 0.6;
                        }
                        &:nth-child(13n) {
                            opacity: 0.4;
                        }
                        &:nth-child(19n) {
                            opacity: 0.2;
                        }
                    }
                }

                & .extras {
                    & g {
                        .comet {
                            transform-origin: center center;
                                             
                            animation-name: comet;
                            animation-duration: 10s;
                            animation-timing-function: linear;
                            animation-iteration-count: infinite;

                            &.comet-b {
                                animation-delay: -3.3s;
                            }
                            &.comet-c {                                
                                animation-delay: -5s;
                            }
                        }
                    }
                }
            }
        }                                                                                                                           
    }    

    & .sun {
        position: absolute;
        top: 10%;
        width: 70%;
        padding-top: 70%;
        border-radius: 50%;
        background-color: yellow;
    }

    & .moon {
        position: absolute;
        z-index: 3;
        top: 10%;
        right: 20%;
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        background-color: var(--moon-color);
        box-shadow: 
            0 0 30px 15px var(--moon-glow-stop1),
            0 0 50px 30px var(--moon-glow-stop2),
            0 0 70px 45px var(--moon-glow-stop3);

    }
}

@keyframes comet {
    0%, 40% {
      transform: translateX(0);                          
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    60%, 100% {
      transform: translateX(-100vmax);
      opacity: 0;
    }
}

@keyframes twinkle {
    25% {
      opacity: 0;
    }
}