/* ==========================================================
   GLOBAL
========================================================== */

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Manrope',sans-serif;

    color:var(--pz-white);

    background:var(--pz-dark);

    overflow-x:hidden;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

}

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

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-3;

    background:var(--pz-dark);

}

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

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    opacity:.035;

    background-image:

        linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),

        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);

    background-size:64px 64px;

}

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

#app{

    position:relative;

    overflow:hidden;

}

#app::before{

    content:"";

    position:absolute;

    top:-250px;

    right:-180px;

    width:900px;

    height:900px;

    border-radius:50%;

    background:

        radial-gradient(circle,

            rgba(255,122,26,.18),

            rgba(255,122,26,.06),

            transparent 72%

        );

    z-index:-1;

    pointer-events:none;

}

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

section{

    position:relative;

}

/* ==========================================================
   SELECTION
========================================================== */

::selection{

    background:var(--pz-primary);

    color:white;

}

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

::-webkit-scrollbar{

    width:12px;

}

::-webkit-scrollbar-track{

    background:#111315;

}

::-webkit-scrollbar-thumb{

    background:#2D3138;

    border-radius:999px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--pz-primary);

}

/* ==========================================================
   IMG
========================================================== */

img{

    user-select:none;

    -webkit-user-drag:none;

}

/* ==========================================================
   LINKS
========================================================== */

a{

    transition:var(--pz-transition);

}