/*-- gradient - 1 --*/
.main-1-bg, .sub-1-bg{
    --y-0: 69%;
    --c-0: hsla(183.97058823529423, 86%, 37%, 1);
    --x-0: 91%;
    --y-1: 20%;
    --c-1: hsla(0, 0%, 0%, 1);
    --x-1: 92%;
    --x-2: 2%;
    --c-2: hsla(334.85294117647055, 71%, 47%, 1);
    --y-2: 81%;
    --c-3: hsla(279.7894736842105, 67%, 27%, 1);
    --x-3: 97%;
    --y-3: 67%;
    --x-4: 52%;
    --c-4: hsla(217.68844221105527, 100%, 39%, 1);
    --y-4: 77%;
    --y-5: 61%;
    --x-5: 88%;
    --c-5: hsla(217.59493670886076, 100%, 30%, 1);
    --y-6: 46%;
    --x-6: 8%;
    --c-6: hsla(217.59336099585062, 100%, 47%, 1);
    background-color: hsla(262, 82%, 3%, 1);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2675 2675' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"), radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3)), radial-gradient(circle at var(--x-4) var(--y-4), var(--c-4) var(--s-start-4), transparent var(--s-end-4)), radial-gradient(circle at var(--x-5) var(--y-5), var(--c-5) var(--s-start-5), transparent var(--s-end-5)), radial-gradient(circle at var(--x-6) var(--y-6), var(--c-6) var(--s-start-6), transparent var(--s-end-6));
    animation: gradient-1 30s linear infinite alternate;
    background-blend-mode: overlay, normal, normal, normal, normal, normal, normal, normal;
}

@keyframes gradient-1{
    0% {
        --s-start-0: 8%;
        --s-end-0: 45.86293511880176%;
        --y-0: 69%;
        --c-0: hsla(183.97058823529423, 86%, 37%, 1);
        --x-0: 91%;
        --y-1: 20%;
        --s-start-1: 1%;
        --s-end-1: 49.166438627289%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 92%;
        --s-start-2: 8.392121895570533%;
        --s-end-2: 48.52567687605722%;
        --x-2: 2%;
        --c-2: hsla(334.85294117647055, 71%, 47%, 1);
        --y-2: 81%;
        --c-3: hsla(279.7894736842105, 67%, 27%, 1);
        --x-3: 97%;
        --s-start-3: 8.392121895570533%;
        --s-end-3: 49.58090142552271%;
        --y-3: 67%;
        --x-4: 52%;
        --s-start-4: 18%;
        --s-end-4: 49.94408311488525%;
        --c-4: hsla(217.68844221105527, 100%, 39%, 1);
        --y-4: 77%;
        --y-5: 61%;
        --x-5: 88%;
        --c-5: hsla(217.59493670886076, 100%, 30%, 1);
        --s-start-5: 11.133917156423086%;
        --s-end-5: 41.601566034303026%;
        --y-6: 46%;
        --x-6: 8%;
        --c-6: hsla(217.59336099585062, 100%, 47%, 1);
        --s-start-6: 9.713086970899472%;
        --s-end-6: 36.01800730950539%;
    }

    50% {
        --s-start-0: 9;
        --s-end-0: 47.631590766043374%;
        --y-0: 69%;
        --c-0: hsla(279.2647058823529, 86%, 36%, 1);
        --x-0: 16%;
        --y-1: 12%;
        --s-start-1: 9;
        --s-end-1: 42.724849131360514%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 3%;
        --s-start-2: 9%;
        --s-end-2: 40.539112902234415%;
        --x-2: 73%;
        --c-2: hsla(334.94117647058823, 70%, 47%, 1);
        --y-2: 61%;
        --c-3: hsla(279.7894736842105, 67%, 27%, 1);
        --x-3: 47%;
        --s-start-3: 9%;
        --s-end-3: 49.05074977970796%;
        --y-3: 76%;
        --x-4: 18%;
        --s-start-4: 9;
        --s-end-4: 41.70549052437993%;
        --c-4: hsla(217.68844221105527, 100%, 39%, 1);
        --y-4: 46%;
        --y-5: 102%;
        --x-5: 42%;
        --c-5: hsla(217.59493670886076, 100%, 30%, 1);
        --s-start-5: 11.232588486654471%;
        --s-end-5: 45.2963125079906%;
        --y-6: 70%;
        --x-6: 33%;
        --c-6: hsla(217.61194029850745, 100%, 39%, 1);
        --s-start-6: 9;
        --s-end-6: 34.68968066496529%;
    }

    100% {
        --y-1: 4%;
        --s-start-1: 9;
        --s-end-1: 22.729655783472005%;
        --c-1: hsla(0, 0%, 0%, 1);
        --x-1: 41%;
        --s-start-2: 10.200720718860145%;
        --s-end-2: 50.46456494288142%;
        --x-2: 98%;
        --c-2: hsla(334.94117647058823, 70%, 47%, 1);
        --y-2: 82%;
        --c-3: hsla(279.7894736842105, 67%, 27%, 1);
        --x-3: 9%;
        --s-start-3: 10.200720718860145%;
        --s-end-3: 50.46456494288142%;
        --y-3: 48%;
        --y-6: 70%;
        --x-6: 93%;
        --c-6: hsla(217.5, 100%, 31%, 1);
        --s-start-6: 9;
        --s-end-6: 47.075992875412794%;
    }
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 45.86293511880176%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 69%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(183.97058823529423, 86%, 37%, 1)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 91%
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 20%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 1%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.166438627289%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(0, 0%, 0%, 1)
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 92%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 48.52567687605722%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 2%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(334.85294117647055, 71%, 47%, 1)
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 81%
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(279.7894736842105, 67%, 27%, 1)
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 97%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8.392121895570533%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.58090142552271%
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 67%
}

@property --x-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --s-start-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 18%
}

@property --s-end-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 49.94408311488525%
}

@property --c-4 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217.68844221105527, 100%, 39%, 1)
}

@property --y-4 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 77%
}

@property --y-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 61%
}

@property --x-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 88%
}

@property --c-5 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217.59493670886076, 100%, 30%, 1)
}

@property --s-start-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 11.133917156423086%
}

@property --s-end-5 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 41.601566034303026%
}

@property --y-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 46%
}

@property --x-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 8%
}

@property --c-6 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(217.59336099585062, 100%, 47%, 1)
}

@property --s-start-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9.713086970899472%
}

@property --s-end-6 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 36.01800730950539%
}

/*-- gradient - 2 --*/
.visual-bg-1{
    --y-0: 80%;
    --c-0: hsla(150.8823529411765, 52%, 83%, 1);
    --x-0: 85%;
    --x-1: 60%;
    --c-1: hsla(219.99999999999997, 100%, 82%, 1);
    --y-1: 24%;
    --x-2: 13%;
    --y-2: 82%;
    --c-2: hsla(297.7941176470588, 100%, 65%, 0.49);
    --c-3: hsla(182, 72%, 68%, 1);
    --y-3: 7%;
    --x-3: 24%;
    ;
    background-color: hsla(358.0000000000001, 0%, 100%, 1);
    background-image: radial-gradient(circle at var(--x-0) var(--y-0), var(--c-0) var(--s-start-0), transparent var(--s-end-0)), radial-gradient(circle at var(--x-1) var(--y-1), var(--c-1) var(--s-start-1), transparent var(--s-end-1)), radial-gradient(circle at var(--x-2) var(--y-2), var(--c-2) var(--s-start-2), transparent var(--s-end-2)), radial-gradient(circle at var(--x-3) var(--y-3), var(--c-3) var(--s-start-3), transparent var(--s-end-3));
    animation: gradient-2 200s linear infinite alternate;
    background-blend-mode: normal, normal, normal, normal;
}

@keyframes gradient-2{
    0% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --y-0: 80%;
        --c-0: hsla(150.8823529411765, 52%, 83%, 1);
        --x-0: 85%;
        --x-1: 60%;
        --s-start-1: 5%;
        --s-end-1: 72%;
        --c-1: hsla(219.99999999999997, 100%, 82%, 1);
        --y-1: 24%;
        --x-2: 13%;
        --s-start-2: 5%;
        --s-end-2: 52%;
        --y-2: 82%;
        --c-2: hsla(297.7941176470588, 100%, 65%, 0.49);
        --c-3: hsla(182, 72%, 68%, 1);
        --y-3: 7%;
        --s-start-3: 13%;
        --s-end-3: 68%;
        --x-3: 24%;
    }

    100% {
        --s-start-0: 9%;
        --s-end-0: 55%;
        --y-0: 94%;
        --c-0: hsla(150.8823529411765, 52%, 83%, 1);
        --x-0: 31%;
        --x-1: 2%;
        --s-start-1: 5%;
        --s-end-1: 72%;
        --c-1: hsla(220, 82%, 95%, 1);
        --y-1: 25%;
        --x-2: 98%;
        --s-start-2: 5%;
        --s-end-2: 52%;
        --y-2: 20%;
        --c-2: hsla(297.7941176470588, 100%, 65%, 0.49);
        --c-3: hsla(182, 72%, 68%, 1);
        --y-3: 92%;
        --s-start-3: 13%;
        --s-end-3: 68%;
        --x-3: 95%;
    }
}

@property --s-start-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 9%
}

@property --s-end-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 55%
}

@property --y-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 80%
}

@property --c-0 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(150.8823529411765, 52%, 83%, 1)
}

@property --x-0 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 85%
}

@property --x-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 60%
}

@property --s-start-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 72%
}

@property --c-1 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(219.99999999999997, 100%, 82%, 1)
}

@property --y-1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}

@property --x-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-start-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 5%
}

@property --s-end-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%
}

@property --y-2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%
}

@property --c-2 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(297.7941176470588, 100%, 65%, 0.49)
}

@property --c-3 {
    syntax: '<color>';
    inherits: false;
    initial-value: hsla(182, 72%, 68%, 1)
}

@property --y-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 7%
}

@property --s-start-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 13%
}

@property --s-end-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 68%
}

@property --x-3 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 24%
}