:root{
    --gr-color-1: hsl(223, 98%, 25%);
    --gr-color-2: rgb(137, 2, 149);
    /* --gr-color-1: hsl(195, 100%, 50%);
    --gr-color-2: white; */
    /* --gr-color-1: light-dark(hsl(195, 100%, 50%),hsl(240, 100%, 50%));
    --gr-color-2: light-dark(rgb(237, 0, 237),hsl(300, 100%, 13%)); */
}
@property --gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
    } 

.neon-eff,.twitter-tweet{
    position: relative;
    transition: all 300ms ease-in;
}
.neon-eff:hover ,.twitter-tweet:hover{
    --gr-color-1: hsl(240, 100%, 80%);
    --gr-color-2: hsl(295, 97%, 80%);
}
#gallery{
.neon-eff{
    /* --gr-color-1: hsl(184, 94%, 43%);
    --gr-color-2: hsl(204, 97%, 30%); */
}
.neon-eff:hover{
    /* --gr-color-1: hsl(184, 94%, 80%);
    --gr-color-2: hsl(204, 97%, 80%); */
}
}

#image_viewer_dialog{
    .neon-eff{
        --gr-color-1: hsl(184, 94%, 43%);
        --gr-color-2: hsl(204, 97%, 30%);
    }
    }

@keyframes gr-rotation {
    from{ --gradient-angle: 0deg;}
    to{ --gradient-angle: 360deg;}
}
.neon-eff:after,.neon-eff::before,.twitter-tweet::before,.twitter-tweet::after{
    z-index: -1;
    content: "";
    position: absolute;
    inset: -.25rem;
    background: conic-gradient(from var(--gradient-angle),var(--gr-color-1),var(--gr-color-2),var(--gr-color-1));
    border-radius: inherit;
    animation: gr-rotation 1s linear infinite;
}
.neon-eff::after{
    filter: blur(0.5rem);
}