body {
    background: #141414;
}

/* ===========================
   AURA ANIMATION
=========================== */

@keyframes aura-glow {
    0% {
        background-position: 0 100%;
    }

    100% {
        background-position: 0 300%;
    }
}

/* ===========================
   HERO SECTION
=========================== */

.hero {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
}

/* Dark overlay */

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 2;
    pointer-events: none;
}

/* Smooth fade to About */

.hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 260px;

    background: linear-gradient(
        to bottom,
        rgba(20,20,20,0) 0%,
        rgba(20,20,20,.15) 30%,
        rgba(20,20,20,.45) 60%,
        rgba(20,20,20,.75) 85%,
        #141414 100%
    );

    z-index: 6;
    pointer-events: none;
}

/* ===========================
   BACKGROUND CONTAINER
=========================== */

a-hole {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

a-hole canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ===========================
   VIGNETTE
=========================== */

a-hole::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 160%;
    height: 150%;

    transform: translate(-50%, -50%);

    background: radial-gradient(
        ellipse at center,
        transparent 15%,
        rgba(0,0,0,.55) 60%,
        rgba(0,0,0,.9) 100%
    );

    z-index: 2;
}

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

a-hole::after {
    content: "";

    position: absolute;
    inset: 0;

    background: radial-gradient(
    ellipse at 50% 75%,
    #a900ff 20%,
    transparent 75%
);

    mix-blend-mode: overlay;


    z-index: 3;
}

/* ===========================
   AURA
=========================== */

a-hole .aura {
    position: absolute;
    top: -71.5%;
    left: 50%;

    width: 30%;
    height: 140%;

    transform: translateX(-50%);

    border-radius: 0 0 100% 100%;

    background:
        linear-gradient(
            20deg,
            #00f8f1,
            #ffbd1e20 16.5%,
            #fe848f 33%,
            #fe848f20 49.5%,
            #00f8f1 66%,
            #00f8f160 85.5%,
            #ffbd1e
        )
        0 100% /100% 200%;

    filter: blur(50px);
    opacity: .75;

    mix-blend-mode: plus-lighter;

    animation: aura-glow 5s linear infinite;

    z-index: 4;
}

/* ===========================
   GRID OVERLAY
=========================== */

a-hole .overlay {
    position: absolute;
    inset: 0;

    background:
        repeating-linear-gradient(
            transparent,
            transparent 2px,
            rgba(255,255,255,.06) 3px
        );

    opacity: .35;

    mix-blend-mode: overlay;

    z-index: 5;
}

/* ===========================
   GALAXY
=========================== */

#galaxy-canvas {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    z-index: 1;

    pointer-events: none;
}

/* ===========================
   CONTENT ABOVE BACKGROUND
=========================== */

.hero-content,
.hero-image {
    position: relative;
    z-index: 10;
}

/* Navbar */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}