/* =====================================
   NAT'S PROJECTS - THEME
   ===================================== */


/* ===== AURORA BACKGROUND ===== */

body {
    position: relative;
    background:
        radial-gradient(
            ellipse 80% 60% at 20% 10%,
            rgba(27,217,106,.18),
            transparent 70%
        ),
        radial-gradient(
            ellipse 70% 60% at 80% 20%,
            rgba(59,130,246,.15),
            transparent 70%
        ),
        radial-gradient(
            ellipse 80% 70% at 50% 90%,
            rgba(139,92,246,.15),
            transparent 70%
        ),
        #090909;
    background-size:
        140% 140%,
        140% 140%,
        140% 140%;
    animation:
        auroraMove 25s ease-in-out infinite alternate;
}


/* ===== AURORA ANIMATION ===== */

@keyframes auroraMove {
    0% {
        background-position:
            0% 0%,
            100% 0%,
            50% 100%;
    }
    50% {
        background-position:
            50% 30%,
            50% 50%,
            20% 80%;
    }
    100% {
        background-position:
            100% 100%,
            0% 100%,
            80% 20%;
    }
}

/* ===== LIGHT EFFECT ===== */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.025),
            transparent
        );
    animation:
        shine 8s linear infinite;
    z-index: -1;
}

@keyframes shine {
    from {
        transform:
            translateX(-100%);
    }
    to {
        transform:
            translateX(100%);
    }
}

/* ===== SCROLLBAR ===== */

::-webkit-scrollbar {
    width:
        10px;
}

::-webkit-scrollbar-track {
    background:
        #090909;
}

::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            var(--green),
            var(--blue),
            var(--purple)
        );
    border-radius:
        999px;
}

::-webkit-scrollbar-thumb:hover {
    background:
        var(--green);
}

/* ===== GLASS EFFECT ===== */

.glass {
    background:
        rgba(255,255,255,.05);
    backdrop-filter:
        blur(15px);
    border:
        1px solid var(--border);
}



/* ===== GLOW ===== */

.glow-green {
    box-shadow:
        0 0 35px rgba(27,217,106,.25);
}

.glow-blue {
    box-shadow:
        0 0 35px rgba(59,130,246,.25);
}

.glow-purple {
    box-shadow:
        0 0 35px rgba(139,92,246,.25);
}