/* =========================================
   VRChatCustom 2.0
   Global Styles
========================================= */



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


body {

    position: relative;

    background:

    var(--bg-primary);

    color:

    var(--text-primary);

}





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


body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: var(--z-background);

    pointer-events: none;


    background-image:

    linear-gradient(
        rgba(255,255,255,0.025) 1px,
        transparent 1px
    ),

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


    background-size:

    50px 50px;


    mask-image:

    radial-gradient(
        circle at center,
        black,
        transparent 75%
    );


}






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


.container {

    width: 100%;

    max-width:

    var(--container-width);

    margin: 0 auto;

    padding-left: 30px;

    padding-right: 30px;

}






/* ===============================
   SECTIONS
================================ */


section {

    width: 100%;

    padding-top:

    var(--section-space);

    padding-bottom:

    var(--section-space);

}






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


.section-title {

    text-align: center;

    margin-bottom: 60px;

}



.section-title h2 {

    font-family:

    var(--font-title);


    font-size:

    clamp(32px,5vw,48px);


    letter-spacing:

    1px;


}





.section-title p {

    margin-top: 15px;


    color:

    var(--text-secondary);


    font-size:

    18px;

}






/* ===============================
   GRADIENT TEXT
================================ */


.gradient-text {

    background: linear-gradient(
        135deg,
        var(--primary),
        var(--accent)
    );

    color: transparent;

    background-clip: text;
    -webkit-background-clip: text;

}






/* ===============================
   GLASS EFFECT
================================ */


.glass {


    background:

    var(--glass-bg);


    border:

    1px solid var(--glass-border);


    backdrop-filter:

    blur(20px);


    -webkit-backdrop-filter:

    blur(20px);


}






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


.background-glow {


    position:

    fixed;


    width:

    500px;


    height:

    500px;


    border-radius:

    50%;


    filter:

    blur(120px);


    opacity:

    .35;


    pointer-events:

    none;


    z-index:

    -1;


}





.glow-one {


    top:

    -200px;


    left:

    -200px;


    background:

    var(--primary);


}





.glow-two {


    bottom:

    -200px;


    right:

    -200px;


    background:

    var(--accent);


}







/* ===============================
   FLEX HELPERS
================================ */


.flex {

    display:

    flex;

}



.center {

    display:

    flex;

    align-items:

    center;

    justify-content:

    center;

}





.between {

    display:

    flex;

    align-items:

    center;

    justify-content:

    space-between;

}







/* ===============================
   HIDDEN
================================ */


.hidden {

    display:

    none;

}





/* ===============================
   BADGE
================================ */


.badge {


    display:

    inline-flex;


    align-items:

    center;


    gap:

    8px;


    padding:

    8px 16px;


    border-radius:

    var(--radius-full);


    background:

    rgba(0,245,212,0.1);


    border:

    1px solid rgba(0,245,212,0.25);


    color:

    var(--primary);


    font-size:

    13px;


    font-weight:

    600;


}







/* ===============================
   DIVIDER
================================ */


.divider {


    width:

    100%;


    height:

    1px;


    background:

    var(--border);


    margin:

    40px 0;


}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Orbitron:wght@600;800&display=swap');


body{

font-family:Inter,sans-serif;

}


.mod-title{

font-family:Orbitron,sans-serif;

}