.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-inline: var(--g8);
    /* gap: var(--g2); */
    z-index: 100;
    background: var(--bg) !important;
    pointer-events: none;
    transform: translateX(100%);
    transition: all 0.5s 2s ease, background 0s;
}
.loader.active{
    transform: translateX(0%);
    pointer-events: unset;
    background-color: var(--bg);
}
.loader .button{
    width: 60%;
    margin-top: -7.5vh;
}
section.login{
    gap: var(--g2);
    align-items: center;
    overflow: hidden;
}
section.login img.logo{width: 40%;margin-block: var(--g2);}
p.more{
    width: 100%;
    height: 1px;
    background-color: var(--tx-s1);
    margin-block: var(--g5);
}
p.more::before{
    content: "Or";
    position: absolute;
    font-size: var(--f2);
    color: var(--tx-s2);
    background-color: var(--bg);
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding-inline: var(--g4);
}

/* .popups .popup i{
    display: flex;
    align-items: center;
    gap: var(--g2);
    flex-shrink: 0;
    font-size: var(--f4);
    font-style: normal;
}
.popups .popup i::before{
    width: 10vw;
    aspect-ratio: 1;
    background-color: var(--bg);
    flex-shrink: 0;
    border-radius: 50% 80%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--f3);
} */
.popups .popup p:not(.button p){
    font-size: var(--f2);
    color: var(--tx-s3);
}
.popups .popup p span{
    color: var(--cp);
}

/* MAINPAGE CUSTOMIZATION */

section.main{
    overflow-x: hidden;
    overflow-y: scroll;
}
section.main .top-half{
    display: flex;
    flex-direction: column;
    gap: var(--g4);
    width: 100%;
    position: sticky;
    top: 0%;
}
.popup .userBadge,
section.main .top-half .header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.popup .userBadge{
    gap: var(--g2);
    /* border-bottom: 1px dotted var(--tx-s1); */
}
.popup .extraCopy{
    display: flex;
    align-items: center;
    padding: var(--g2) var(--g2);
    margin-bottom: var(--g2);
    gap: var(--g2);
    background-color: var(--tx-s0);
    border-radius: var(--g8);
    font-size: var(--f2);
    color: var(--tx-s3);
    box-shadow:
        inset -2px 2px 2px -3px var(--tx-s3),
        inset 2px -2px 2px -3px  var(--tx-s3);
}
.popup .extraCopy span{
    margin-left: calc(0rem  - var(--g2));
    color: var(--tx-s3);
    font-size: var(--f2);
}
.userBadge img,
section.main .top-half .header img{
    height: 5vh;
}
.userBadge img,
section.main .top-half .header img.dPic{
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
}
.userBadge i,
section.main .top-half .header i{
    height: 5vh;
    font-size: var(--f3);
    aspect-ratio: 1/1;
    background-color: var(--tx-s1);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.balance{
    display: flex;
    flex-direction: column;
    gap: var(--g2);
    padding-block: var(--g2);
    text-align: center;
}
.balance p.math{
    display: flex; 
    width: 100%;
    gap: var(--g1);
    justify-content: center;
    align-items: center;
}
.balance p.math *{
    color: var(--tx-s2);
    font-size: var(--f2);
}
.balance p.math span{
    color: var(--cp);
    filter: hue-rotate(250deg) brightness(1.8);
}
.balance p.math i{
    display: flex;
    gap: var(--g2);
    align-items: center;
    flex-direction: row-reverse;
    font-style: normal;
}
.balance p.math i::before{
    display: flex;
    align-items: center;
    padding-top: 3px;
}
.balance h2{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -0.25rem;
}
.balance h2 p{
    display: flex;
    flex-direction: column;
    word-break: break-all;
    width: var(--f7);
    /* letter-spacing: 2px; */
    line-height: 1;
    font-size: var(--f9) !important;
    font-weight: 400;
    max-height: var(--f9);
    overflow-x: hidden;
    overflow-y: scroll;
    pointer-events: none;
    text-align: left;
    transition: all 0.3s 0.1s ease, width 0.2s 0s ease;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
}
.balance h2 span:not(p span){
    font-size: var(--f9) !important;
    font-weight: 400;
    padding-top: 1px;
    /* display: flex;
    align-items: center; */
}
.balance h2 p.off{
    width: 0vw;
    opacity: 0;
    transition: all 0.2s ease, width 0.3s 0.1s ease;
}
.balance h2 p[state]{
    width: var(--f8);
}
.balance h2 p[state]:last-child{
    width: 0rem !important;
}
.balance h2 p span{
    scroll-snap-align: center;
    color: var(--tx) !important;
}
@keyframes stateIn{
    0%{opacity: 0;transform: translateX(-20%);}
    100%{opacity: 1;transform: translateX(0%);}
}
.balance h2 p[state]::after{
    content: attr(state);
    position: absolute;
    right: -0.35rem;
    top: calc(var(--topper) - 0.5rem);
    animation: stateIn 0.5s ease both;
}
.balance h2 p[state]:last-child:after{
    content: unset !important;
}

/* CARDS CUSTOMIZATION */

section.main .top-half .cards{
    display: flex;
    justify-content: center;
    gap: var(--g4);
    width: 100vw;
    margin-left: calc(0rem - var(--g4));
    margin-top: calc(0rem - var(--g4));
}
section.main .top-half .cards .card{
    display: flex;
    justify-content: space-between;
    width: 80vw;
    aspect-ratio: 16/9;
    background-image: 
        linear-gradient(50deg, var(--cp-s1), var(--gr)),
        radial-gradient(60% 80%, var(--bg), var(--cp-s2));
    border-radius: calc(var(--g4) + 3px);
    padding: var(--g4);
    overflow: hidden;
}
section.main .top-half .cards .card::before{
    content: "";
    position: absolute;
    left: 20%;
    top: 20%;
    transform: translate(-50%, -50%);
    height: 100%;
    width: 100%;
    background-image: radial-gradient(var(--bg) 50%, var(--cp-s2), var(--tx-s1), transparent);
    border-radius: 100%;
    filter: blur(20px);
    /* transform: rotateZ(40deg); */
}
section.main .top-half .cards .card::after,
section.main .top-half .cards::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--g4);
    box-shadow:
        inset 2px 2px 2px -2px var(--tx-s3),
        inset -3px -2px 2px -2px black;
    background-image: linear-gradient(to bottom, transparent, var(--bg-s3), var(--bg), var(--bg));
}
section.main .top-half .cards::after{box-shadow: none;}
section.main .top-half .cards .card *{
    font-size: var(--f2);
    /* color: var(--tx-s3); */
}


/* QUICK STATS CUSTOMIZATION */
section.main .top-half .quick-stats{
    display: flex;
    gap: var(--g4);
    width: fit-content;
    max-width: 100vw;
    overflow-y: hidden;
    overflow-x: scroll;
    margin-left: calc(0rem - var(--g4));
    margin-top: -35%;
    padding: var(--g4);
    scroll-snap-type: x mandatory;
    scroll-snap-align: center;
}
section.main .top-half .quick-stats .stat{
    display: flex;
    flex-direction: column;
    width: 42.5vw;
    aspect-ratio: 5/4;
    flex-shrink: 0;
    padding: var(--g4);
    border-radius: var(--g4);
    background-color: var(--bg);
    box-shadow:
        inset -2px 2px 2px -3px var(--tx-s3),
        inset 2px -2px 2px -3px  var(--tx-s3);
}
section.main .top-half .quick-stats .stat i{
    font-size: var(--f4);
    flex: 1;
}
.userBadge p,
section.main .top-half .quick-stats .stat p{
    font-size: var(--f2);
    color: var(--tx-s2);
}
section.main .top-half .quick-stats .stat p span{
    font-size: var(--f1);
    color: var(--tx-s3);
    padding-bottom: var(--g2);
}
.userBadge h3,
section.main .top-half .quick-stats .stat h3{
    font-size: var(--f3);
    font-weight: 400;
}

/* TRANSACTIONS CUSTOMIZATION */
section.main .transactions{
    width: 100vw;
    padding: var(--g2) var(--g4);
    padding-top: var(--g6);
    margin-inline: calc(0rem - var(--g4));
    margin-bottom: calc(0rem - var(--g8));
    min-height: 90vh;
    max-height: 90vh;
    overflow: hidden;
    background-color: var(--tx-s0);
    backdrop-filter: blur(15px);
    border-radius: var(--g8);
    box-shadow:
        inset 2px 2px 2px -3px var(--tx-s3),
        inset 2px -2px 2px -3px  var(--tx-s3);
    display: flex;
    flex-direction: column;
    gap: var(--g4);
}
section.main .transactions::before{
    content: "";
    width: 15%;
    height: 4px;
    position: absolute;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    background-color: var(--tx-s1);
    border-radius: 1rem;
    outline: 15px solid transparent;
}
section.main .transactions::after{
    width: 100vw;
    height: 50vh;
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    background-image: linear-gradient(to top, var(--bg), transparent, transparent);
    content: "";
}
section.main .transactions .tx-card{
    display: flex;
    align-items: center;
    gap: var(--g2);
}
section.main .transactions .tx-card img{
    height: 5vh;
    aspect-ratio: 1/1;
    object-position: center;
    object-fit: cover;
    border-radius: 50%;
}
section.main .transactions .tx-card p{
    font-size: var(--f3);
    display: flex;
    flex-direction: column;
    flex: 1;
}
section.main .transactions .tx-card p::before{
    content: attr(dt);
    color: var(--tx-s2);
    font-size: var(--f2);
}
section.main .transactions .tx-card h3{
    font-size: var(--f3);
    font-weight: 200;
    display: flex;
    align-items: center;
    color: var(--cp);
    filter: hue-rotate(250deg) brightness(1.8);
}
section.main .transactions .tx-card h3::before{
    content: "+";
}
section.main .transactions .tx-card h3.loss::before{
    content: "-";
}
section.main .transactions .tx-card h3.loss{
    filter: hue-rotate(100deg) brightness(1.8);
}

/* AMOUNT-STATS CUSTOMIZATION */
.popup.withdraw .amount-stats{
    display: flex;
    flex-direction: column;
    gap: var(--g1);
}
.popup.withdraw .amount-stats p{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: var(--f3) !important;
}
.popup.withdraw .amount-stats p:last-child{
    padding-top: var(--g1);
    margin-top: var(--g1);
    border-top: 2px dashed var(--tx-s1);
    color:  var(--tx);
}
.popup.withdraw .amount-stats p::before{
    content: attr(tag);
    font-size: var(--f2);
}



/* EXTRAS */

.balance.loaderBlc{
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
}
.balance.loaderBlc h2{
    scale: 0.5;
    margin-top: -2.5vh;
}
.balance.loaderBlc p:not(h2 p){
    color: var(--tx-s2);
    font-size: var(--f2);
}

.userStats .refCode{
    display: flex;
    align-items: center;
    gap: var(--g1);
}
.userStats .refCode::before{
    content: attr(code);
}
.userStats .refCode span{
    padding: 1px var(--g2);
    border-radius: var(--g4);
    margin-top: -2px;
    background-color: var(--tx-s1);
    color: var(--tx-s3) !important;
    box-shadow:
        inset 1px 1px 2px -1px var(--tx-s3),
        inset 1px -1px 1px -1px  var(--tx-s3);
    overflow: hidden;
}
.userStats .refCode span::before{
    content: attr(class);
    text-transform: capitalize;
}

@keyframes toRRR {
    0%{left: -100%;}
    25%{left: 250%;}
    100%{left: 250%;}
}

.userStats .refCode span::after{
    content: "";
    position: absolute;
    width: 50%;
    height: 200%;
    top: 50%;
    left: -100%;
    background-color: var(--tx-s2);
    transform: rotateZ(30deg) translateY(-50%);
    filter: saturate(1.5) contrast(1.2);
    animation: toRRR 4s ease infinite;
}
.userStats .refCode span.average{
    background-color: var(--cp-s1);
}
.userStats .refCode span.pro{
    background: linear-gradient(20deg, var(--rd), var(--cp-s2), var(--cp-s1));
}