@charset "UTF-8";

/* ==========================================================
   Ambient Background
========================================================== */

.ambient-background {

    --g1x: 20%;
    --g1y: 25%;

    --g2x: 80%;
    --g2y: 20%;

    --g3x: 50%;
    --g3y: 80%;

    --g4x: 50%;
    --g4y: 50%;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%; 
    z-index: -1;

    pointer-events: none;

    background:

        radial-gradient(
            circle 48vw at var(--g1x) var(--g1y),
            rgba(100,100,100,.40) 0%,
            transparent 50%
        ),

        radial-gradient(
            circle 58vw at var(--g2x) var(--g2y),
            rgba(82,82,82,.32) 0%,
            transparent 55%
        ),

        radial-gradient(
            circle 54vw at var(--g3x) var(--g3y),
            rgba(65,65,65,.28) 0%,
            transparent 65%
        ),

        radial-gradient(
            circle 68vw at var(--g4x) var(--g4y),
            rgba(90,90,90,.18) 0%,
            transparent 75%
        ),

        radial-gradient(
            circle 80vw at center,
            rgba(70,70,70,.10) 0%,
            transparent 85%
        ),

        linear-gradient(
            135deg,
            #020202 0%,
            #080808 50%,
            #000000 100%
        );

    background-repeat: no-repeat;
}

/* ==========================================================
   Tablets
========================================================== */

@media (max-width: 1024px) {

    .ambient-background {

        background:

            radial-gradient(
                circle 60vw at var(--g1x) var(--g1y),
                rgba(100,100,100,.40) 0%,
                transparent 50%
            ),

            radial-gradient(
                circle 72vw at var(--g2x) var(--g2y),
                rgba(82,82,82,.32) 0%,
                transparent 55%
            ),

            radial-gradient(
                circle 68vw at var(--g3x) var(--g3y),
                rgba(65,65,65,.28) 0%,
                transparent 65%
            ),

            radial-gradient(
                circle 82vw at var(--g4x) var(--g4y),
                rgba(90,90,90,.18) 0%,
                transparent 75%
            ),

            radial-gradient(
                circle 100vw at center,
                rgba(70,70,70,.10) 0%,
                transparent 85%
            ),

            linear-gradient(
                135deg,
                #020202,
                #080808 50%,
                #000000
            );
    }

}

/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 768px) {

    .ambient-background {

        background:

            radial-gradient(
                circle 75vw at var(--g1x) var(--g1y),
                rgba(100,100,100,.40) 0%,
                transparent 45%
            ),

            radial-gradient(
                circle 90vw at var(--g2x) var(--g2y),
                rgba(82,82,82,.32) 0%,
                transparent 50%
            ),

            radial-gradient(
                circle 85vw at var(--g3x) var(--g3y),
                rgba(65,65,65,.28) 0%,
                transparent 55%
            ),

            radial-gradient(
                circle 100vw at var(--g4x) var(--g4y),
                rgba(90,90,90,.18) 0%,
                transparent 65%
            ),

            radial-gradient(
                circle 120vw at center,
                rgba(70,70,70,.10) 0%,
                transparent 80%
            ),

            linear-gradient(
                135deg,
                #020202,
                #080808 50%,
                #000000
            );
    }

}