html {
    scroll-behavior: smooth;
}

body {
    background-color: #000000;
    color: #e2e2e2;
    overflow-x: hidden;
    position: relative;
}


body::before {
    content: "";

    position: absolute;
    inset: 0;

    background-image:
        linear-gradient(
            rgba(168, 85, 247, 0.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(168, 85, 247, 0.08) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

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


body::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at top,
            rgba(168,85,247,0.10),
            transparent 30%
        ),

        radial-gradient(
            circle at bottom,
            rgba(168,85,247,0.05),
            transparent 35%
        );

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

main {
    position: relative;
    z-index: 1;
}

.glass {
    background: rgba(8, 8, 8, 0.55);

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, 0.06);
}


.neon-glow {
    box-shadow:
        0 0 30px rgba(168, 85, 247, 0.18),
        0 0 60px rgba(168, 85, 247, 0.08);
}

.neon-border-hover:hover {
    border-color: rgba(168, 85, 247, 0.5);

    box-shadow:
        0 0 25px rgba(168, 85, 247, 0.15);
}



.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}