/*=================================
        ArenaOS
        BASE.CSS
=================================*/


/*=================================
        HTML & BODY
=================================*/

html{

    scroll-behavior:smooth;

}

body{

    position:relative;

    min-height:100vh;

    overflow-x:hidden;

    background:var(--background);

    color:var(--text);

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

    font-size:16px;

    font-weight:var(--font-regular);

    line-height:var(--line-height);

    text-rendering:optimizeLegibility;

}


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

body::before{

    content:"";

    position:fixed;

    inset:0;

    background-image:

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

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

    background-size:40px 40px;

    pointer-events:none;

    z-index:-2;

}

body::after{

    content:"";

    position:fixed;

    inset:0;

    background:

        radial-gradient(circle at 15% 10%,rgba(25,19,184,.22),transparent 35%),

        radial-gradient(circle at 85% 20%,rgba(79,140,255,.18),transparent 28%),

        radial-gradient(circle at 50% 100%,rgba(25,19,184,.10),transparent 35%),

        var(--background);

    pointer-events:none;

    z-index:-3;

}


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

h1,
h2,
h3,
h4,
h5,
h6{

    color:var(--text);

    line-height:1.1;

    font-weight:var(--font-bold);

    letter-spacing:-.03em;

}

h1{

    font-size:clamp(3.5rem,7vw,6.2rem);

    font-weight:800;

}

h2{

    font-size:clamp(2.6rem,5vw,4.3rem);

}

h3{

    font-size:1.6rem;

}

h4{

    font-size:1.3rem;

}

h5{

    font-size:1.1rem;

}

h6{

    font-size:1rem;

}

p{

    color:var(--text-light);

    font-size:1.08rem;

    line-height:1.9;

}

small{

    color:var(--text-muted);

}


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

a{

    color:inherit;

    text-decoration:none;

    transition:var(--transition);

}


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

ul,
ol{

    list-style:none;

}


/*=================================
        MEDIA
=================================*/

img{

    display:block;

    max-width:100%;

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}

svg{

    display:block;

    max-width:100%;

}


/*=================================
        TABLES
=================================*/

table{

    width:100%;

    border-collapse:collapse;

}


/*=================================
        FORMS
=================================*/

input,
textarea,
select{

    width:100%;

    color:var(--text);

}

textarea{

    resize:vertical;

}


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

::selection{

    background:var(--primary);

    color:#ffffff;

}


/*=================================
        FOCUS
=================================*/

:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:4px;

}