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

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:var(--font);

    color:var(--text);

    background:var(--bg);

    overflow-x:hidden;

    min-height:100vh;

    -webkit-font-smoothing:antialiased;

    text-rendering:optimizeLegibility;

    position:relative;

}


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

body::before{

    content:"";

    position:fixed;

    inset:0;

    z-index:-3;

    background:

    radial-gradient(circle at 15% 20%,
        rgba(232,82,26,.12),
        transparent 28%),

    radial-gradient(circle at 82% 12%,
        rgba(56,189,248,.05),
        transparent 26%),

    radial-gradient(circle at 70% 90%,
        rgba(50,213,131,.05),
        transparent 24%),

    linear-gradient(
        180deg,
        #05080D,
        #081018 45%,
        #060A10 100%
    );

}


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

body::after{

    content:"";

    position:fixed;

    inset:0;

    z-index:-2;

    pointer-events:none;

    opacity:.035;

    background-image:

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

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

    background-size:40px 40px;

}


/* ==========================================================
   TYPOGRAPHY
========================================================== */

h1,h2,h3,h4,h5{

    font-weight:700;

    color:var(--text);

    letter-spacing:-.02em;

}

p{

    color:var(--text-secondary);

    line-height:1.7;

}

small{

    color:var(--text-muted);

}

a{

    color:inherit;

    text-decoration:none;

}


/* ==========================================================
   LISTS
========================================================== */

ul{

    list-style:none;

}


/* ==========================================================
   IMAGES
========================================================== */

img{

    display:block;

    max-width:100%;

}


/* ==========================================================
   BUTTONS
========================================================== */

button{

    font-family:inherit;

    cursor:pointer;

    border:none;

    background:none;

    color:inherit;

}


/* ==========================================================
   INPUTS
========================================================== */

input,
textarea,
select{

    font-family:inherit;

    color:inherit;

    outline:none;

}


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

::selection{

    background:rgba(232,82,26,.35);

    color:white;

}


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

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0B1119;

}

::-webkit-scrollbar-thumb{

    background:#26313D;

    border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

    background:var(--orange);

}


/* ==========================================================
   UTILITIES
========================================================== */

.container{

    width:min(100%,var(--container));

    margin:auto;

    padding-inline:32px;

}

.mono{

    font-family:var(--font-mono);

}

.orange{

    color:var(--orange);

}

.green{

    color:var(--green);

}

.yellow{

    color:var(--yellow);

}

.red{

    color:var(--red);

}

.glow{

    box-shadow:var(--shadow-orange);

}


/* ==========================================================
   SMOOTH ANIMATION
========================================================== */

*{

    transition:

    background .25s,

    border-color .25s,

    color .25s,

    box-shadow .25s;

}