/* =================================
   RYVOX PROFILE CSS
   DARK CINEMATIC UI
================================= */


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


body {

    min-height: 100vh;

    background: #01010f;

    color: white;

    font-family:
    'Gill Sans',
    'Gill Sans MT',
    Calibri,
    sans-serif;


    display:flex;

    justify-content:center;

    align-items:center;


    overflow:hidden;

}



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


body::before,
body::after {

    content:"";

    position:fixed;

    width:500px;

    height:500px;

    border-radius:50%;

    filter:blur(130px);

    opacity:.35;

    z-index:-2;

    animation:lightMove 12s infinite alternate;

}



body::before {

    background:#008cff;

    top:-200px;

    left:-200px;

}



body::after {

    background:#a000ff;

    bottom:-200px;

    right:-200px;

    animation-delay:3s;

}



@keyframes lightMove {

    from {

        transform:translate(0,0);

    }

    to {

        transform:translate(150px,100px);

    }

}



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


.grid {

    position:fixed;

    inset:0;

    z-index:-1;


    background-image:

    linear-gradient(#ffffff08 1px, transparent 1px),

    linear-gradient(90deg,#ffffff08 1px, transparent 1px);


    background-size:80px 80px;


    animation:gridMove 20s linear infinite;

}



@keyframes gridMove {

    from {

        background-position:0 0;

    }

    to {

        background-position:80px 80px;

    }

}



/* =========================
   PROFILE BOX
========================= */


.profile-box {


    width:520px;


    padding:45px;


    border-radius:25px;


    background:

    rgba(255,255,255,.04);



    backdrop-filter:

    blur(25px);



    border:

    1px solid rgba(255,255,255,.15);



    box-shadow:

    0 0 60px rgba(0,140,255,.15);



    text-align:center;



    animation:

    profileIn 1s ease;


}



@keyframes profileIn {


    from {

        opacity:0;

        transform:

        translateY(60px)

        scale(.9);


        filter:blur(10px);

    }


    to {

        opacity:1;

        transform:

        translateY(0)

        scale(1);


        filter:blur(0);

    }

}



/* =========================
   SETTINGS ICON
========================= */


.profile-logo {


    width:90px;

    height:90px;


    margin:auto;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:45px;


    border-radius:50%;


    background:

    linear-gradient(

    135deg,

    #008cff,

    #8a2be2

    );


    box-shadow:

    0 0 35px #008cffaa;


    animation:

    gearRotate 6s linear infinite;


}



@keyframes gearRotate {

    from {

        transform:rotate(0);

    }


    to {

        transform:rotate(360deg);

    }

}



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


.profile-box h1 {


    margin-top:25px;


    font-size:35px;


    text-shadow:

    0 0 15px #008cff;


}



.username {

    margin-top:10px;

    color:#888;

}





/* =========================
   INFO CARDS
========================= */


.profile-info {


    margin-top:35px;


    display:flex;


    flex-direction:column;


    gap:15px;


}



.info-card {


    padding:18px;


    display:flex;


    justify-content:space-between;


    align-items:center;



    border-radius:14px;



    background:

    rgba(0,0,0,.35);



    border:

    1px solid rgba(255,255,255,.12);



    transition:.35s ease;


}



.info-card:hover {


    transform:

    translateX(-8px);



    border-color:#008cff;



    box-shadow:

    0 0 25px #008cff33;


}



.info-card span {


    color:#777;

}



.info-card b {


    color:white;

}



.active {


    color:#00ff88 !important;


    text-shadow:

    0 0 10px #00ff88;


}





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


.profile-buttons {


    margin-top:35px;


    display:flex;


    gap:15px;


}



.profile-btn,
.logout-btn {


    flex:1;


    height:45px;



    display:flex;


    justify-content:center;


    align-items:center;



    border-radius:10px;



    background:

    rgba(255,255,255,.05);



    border:

    1px solid rgba(255,255,255,.2);



    color:white;



    text-decoration:none;



    cursor:pointer;



    transition:.35s ease;


}



.profile-btn:hover,
.logout-btn:hover {


    transform:

    translateY(-5px);



    border-color:#008cff;



    box-shadow:

    0 0 30px #008cff55;


}





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


::-webkit-scrollbar {

    width:7px;

}


::-webkit-scrollbar-track {

    background:#000;

}


::-webkit-scrollbar-thumb {

    background:#008cff;

    border-radius:10px;

}





/* =========================
   MOBILE
========================= */


@media(max-width:600px){


    .profile-box {

        width:90%;

        padding:30px;

    }



    .profile-box h1 {

        font-size:28px;

    }



    .profile-buttons {

        flex-direction:column;

    }


}