/* 
███████╗██╗░░░░░██╗░░░██╗██╗██████╗░  ░█████╗░██╗░░░░░██╗███████╗███╗░░██╗████████╗
██╔════╝██║░░░░░██║░░░██║██║██╔══██╗  ██╔══██╗██║░░░░░██║██╔════╝████╗░██║╚══██╔══╝
█████╗░░██║░░░░░██║░░░██║██║██║░░██║  ██║░░╚═╝██║░░░░░██║█████╗░░██╔██╗██║░░░██║░░░
██╔══╝░░██║░░░░░██║░░░██║██║██║░░██║  ██║░░██╗██║░░░░░██║██╔══╝░░██║╚████║░░░██║░░░
██║░░░░░███████╗╚██████╔╝██║██████╔╝  ╚█████╔╝███████╗██║███████╗██║░╚███║░░░██║░░░
╚═╝░░░░░╚══════╝░╚═════╝░╚═╝╚═════╝░  ░╚════╝░╚══════╝╚═╝╚══════╝╚═╝░░╚══╝░░░╚═╝░░░

Copyright © 2022 Fluid Client S.T. All rights reserved.

Fluid client is not affiliated with Mojang AB. Minecraft is a trademark of Mojang AB. All rights reserved.
The new era of Minecraft. 

Built by nitlix.pro 
*/





/* Default settings for the UI */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Poppins;
    transition: ease .5s;
}

body {
    background: var(--background);
    overflow-x: hidden;
}

::selection {
    background: var(--text);
    color: var(--background);
}


.maxcontent {
    width: max-content;
    max-width: 100%;
}

/* .object {
    background: var(--background-light);
    border-radius: 1.25rem;
    padding: 1rem;

    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    z-index: 100;
    position: relative;

    width: 100%;

    border: solid 1px var(--shadow-medium);
    box-shadow: 0 0 3rem var(--shadow-medium);
}


 */


/* Default text settings  */
h1 {
    font-size: var(--h1);
    line-height: var(--h1);
    font-weight: 900;
    color: var(--text);
}

h2 {
    font-size: var(--h2);
    line-height: var(--h2);
    font-weight: 700;
    color: var(--text);
}

h3 {
    font-size: var(--h3);
    line-height: var(--h3);
    font-weight: 700;
    color: var(--text);
}

p {
    font-size: var(--p);
    line-height: var(--p);
    font-weight: 500;
    color: var(--text-desc);
}



/* Very beautiful code below (Text configuration) */
h1.center,h2.center,h3.center,p.center {
    text-align: center;
}

h1.right,h2.right,h3.right,p.right {
    text-align: right;
}

span {
    font-family: inherit;
}


/* AYO!??!?!?? */
p.big {
    font-size: var(--p-big);
    line-height: var(--p-big);
}



/* Lag animation */

/* .lag {
    animation: lag 1s infinite;
}

@keyframes lag {
    0% {
        transform: rotate(10deg) scale(1.1);
        text-decoration: line-through;
    }
    50% {
        transform: rotate(-10deg) scale(0.9);
        text-decoration: none;
    }
    100% {
        transform: rotate(10deg) scale(1.1);
        text-decoration: line-through;
    }
} */


/* Fluid client website wrapper */
#fluid-wrapper {

    --padding: 5rem;
    overflow-x: hidden;

    width: 100%;
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 var(--padding);
    padding-top: 1rem;

    gap: 1rem;

    z-index: 100;
    position: relative;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);

    min-height: 510vh;

    animation: flare 5s infinite;
    transition: all ease .5s, background ease 2.5s;

}


@keyframes flare {
    0% {
        background: var(--background-trans);
    }
    50% {
        background: var(--background-trans2);
    }
    100% {
        background: var(--background-trans);
    }
}

@media screen and (max-width: 1500px) {
    #fluid-wrapper {
        --padding: 3rem;
    }
}

@media screen and (max-width: 1000px) {
    #fluid-wrapper {
        --padding: 2rem;
    }
}




/* Sexy lil typing animation */
#cursor {
    animation: type 1s infinite;
}

@keyframes type {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}


/* Scroller object configuration */
.scroller::-webkit-scrollbar-thumb
{
    background: var(--text);
    background-size: cover;
    background-position: center,center;
}

.scroller::-webkit-scrollbar-thumb:hover
{
    background-size: cover;
    cursor: pointer;
}


.scroller::-webkit-scrollbar {
    width: .5rem;
}



.scroller::-webkit-scrollbar-track {
    transition: all .5s;
    background-color: var(--background);
    background-size: cover;
    background-position: center,center;
}




/* Notifications */
#notif-wrapper {
    width: 100%;
    position: fixed;
    top: -8rem;
    z-index: 1500;

    display: grid;
    place-items: center;
}

#notif-wrapper.active {
    top: 1rem;
}

#notif {
    background: var(--background);
    border-radius: 4rem;
    padding: 1rem 4rem;

    border: solid 1px var(--shadow-medium);
}

.darkmode #notif {
    box-shadow: 0 0 2rem var(--shadow-medium);
}  

#notif #notif-title {
    font-size: 1.5rem;
    line-height: 1.5rem;
}

#notif img {
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 2rem;
}






/* Nitlix data-flex */
.data-flex, .data-flex-v {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .25rem;
}

.data-flex {
    flex-direction: row;
}

.data-flex-v {
    flex-direction: column;
}

.data-flex.nocenter , .data-flex-v.nocenter {
    justify-content: flex-start;
    align-items: flex-start;
}


/* Default buttons */

button {
    border: none;
    outline: none;
    cursor: pointer;
    
    padding: .5rem 1.5rem;
    border-radius: .25rem;


    font-family: Poppins;
    font-size: var(--p);
    font-weight: 700;

}

button i {
    font-size: var(--p);
    color: var(--text);

}




/* Big button hahah */
button.big {
    padding: calc(var(--p-big) / 2) calc(var(--p-big) * 2);
    border-radius: calc(var(--p-big) / 3);

    font-size: var(--p-big);
    font-weight: 600;
    gap: calc(var(--p-big) / 2);
}

button.big p {
    font-size: var(--p-big);
    line-height: var(--p-big);
    font-weight: 600;
}


button.big.bold {
    font-weight: 700;
}

button.big i{
    font-size: 2.25rem;
}


/* Custom buttons */


button.alt {
    background: var(--text);
    color: var(--background);
    
}

button.alt * {
    color: var(--background);
}








button.gradient {
    background: linear-gradient(90deg, var(--main), var(--main-dark));
    color: white;
}


button.transparent {
    background: transparent;
    color: var(--text);
    padding: 0;
}

button.transparent.gradient *{
    background: linear-gradient(90deg, var(--main), var(--main-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

}

button.transparent.main * {
    color: var(--main);
}

button.transparent.gradient i {
    color: var(--main-dark)
}

button.movei:hover i {
    margin-left: .25rem;
}

/* Nitlix Sexy Laddition */

.laddition {
    background: linear-gradient(90deg, var(--main), var(--main-dark));
    color: white;
    padding: .5rem 1.25rem;

    font-size: var(--p-big) !important;
    line-height: var(--p-big) !important;

    border-radius: .25rem;
    margin-left: .5rem;
}



/* And a sexy rounded addition */


.rounded-addition {
    background: var(--text);
    color: var(--background);
    padding: .75rem 2rem;
    border-radius: 3rem;

    font-size: var(--p-big) !important;
    line-height: var(--p-big) !important;

}

.rounded-addition * {
    color: var(--background) !important;
    font-family: Poppins !important;
    font-weight: 600;
}


/* One more strip showing the content */


#strip {
    background: linear-gradient(90deg, var(--main), var(--main-dark) 50%, var(--main) 100%);
    background-size: 150%;
    animation: scroll 20000s linear infinite;

    color: white;
    width: 100%;
    min-height: 4rem;   
    
    display: grid;
    place-items: center;
    z-index: 50;
    position: relative;
}

#strip * {
    color: white;
}

#strip b {
    padding: .25rem .5rem;
    background: white;
    color: rgb(3, 9, 41);
    border-radius: 2rem;
}


@keyframes scroll {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1000000% 0;
    }
}

/* Text stripe highlight */


.stripe {
    background: linear-gradient(90deg, var(--main), var(--main-dark) 90%);
    
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    
}


/* Fluid Client Header */
#header {
    justify-content: space-between;
    padding: 1rem;
    width: 100%;
    margin-top: 1rem;

    
}

.logo img {
    --size: 4rem;
    width: var(--size) !important ;
    height: var(--size) !important ;
}

.logo h3 {
    font-size: 2rem;
    line-height: 2rem;
    font-family: Poppins;
    font-weight: 900;
}

.logo {
    gap: .5rem;
}

#header #menu p:hover {
    cursor: pointer;
    color: var(--text);
}

#header #menu p.selected {
    position: relative;
    color: var(--text);
}

#header #menu p.selected::after {
    content: '';
    display: block;
    position: absolute;

    
    width: 100%;
    height: 2px;
    background: var(--main);
    border-radius: .25rem;
    margin-top: .5rem;
}


#header #menu {
    gap: 2rem;
}


#header #menu-button {
    color: var(--text);
    font-size: var(--h1);
    line-height: var(--h1);
    cursor: pointer;
}


@media screen and (max-width: 1000px) {
    #header #menu{
        display: none;
    }
    #header #menu-button {
        display: block;
    }
}

@media screen and (max-width: 600px){
    #header #button-menu {
        display: none;
    }
    #header #logo-text {
        display: none;
    }
}

@media screen and (min-width: 1000px) {
    #header #menu-button {
        display: none;
    }
}


/* Slides */
.slide {
    display: grid;
    width: 100%;

    place-items: center;

    margin: 15rem 0;
}

@media screen and (max-width: 1200px){
    .slide.split.max1200 {
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        gap: 3rem;
        margin: 5rem 0;
    }
}

@media screen and (min-width: 800px) {
    .slide.split {
        grid-template-columns: 50% 50%;
    }
}
.slide.default {
    place-items: center;
}

@media screen and (max-width: 800px) {
    .slide.split {
        grid-template-columns: auto;
        grid-template-rows: auto auto;
        gap: 3rem;
        margin: 9rem 0;
    }
}

.slide .text {
    gap: 2rem;
}
    


/* Slide image size control */

.slide img {
    width: 80%;
}


/* Glowing objects */
.glow {
    --default-size: 20rem;
    width: var(--default-size);
    height: var(--default-size);
    
    filter: blur(5rem);
    border-radius: 50%;

    position: absolute;
    z-index: 50;
}


/* Different colours for glowing objects */

.glow.aqua {
    background: linear-gradient(90deg, rgb(7, 192, 239), rgb(7, 253, 204));
    box-shadow: 0 0 calc(var(--default-size)) rgb(7, 192, 239);
}

.glow.red {
    background: linear-gradient(90deg, rgb(255, 0, 0), rgb(221, 2, 2));
    box-shadow: 0 0 calc(var(--default-size)) rgb(255, 0, 0);
}

.glow.purple {
    background: linear-gradient(90deg, #8400ff, #6f00ff);
    box-shadow: 0 0 calc(var(--default-size)) #aa00ff;
}



/* Different sizes for glowing objects */
.glow.small {
    --default-size: 10rem;
}

.glow.medium {
    --default-size: 20rem;
}

.glow.large {
    --default-size: 30rem;
}

.glow.xl {
    --default-size: 40rem;
}

.glow.xxl {
    --default-size: 50rem;
}



/* Glowing bubbles */

.glow-bubble {
    --default-size: 20rem;
    width: var(--default-size);
    height: var(--default-size);
    
    border-radius: 50%;

    position: absolute;
    z-index: 50;
}

.glow-bubble.aqua {
    background: linear-gradient(90deg, rgb(7, 239, 239), rgb(175, 7, 253));
    box-shadow: 0 0 calc(var(--default-size)) rgb(7, 192, 239);
}

.glow-bubble.red {
    background: linear-gradient(90deg, rgb(255, 0, 0), rgb(109, 5, 5));
    box-shadow: 0 0 calc(var(--default-size)) rgb(255, 0, 0);
}

.glow-bubble.purple {
    background: linear-gradient(90deg, #8400ff, #6f00ff);
    box-shadow: 0 0 calc(var(--default-size)) #aa00ff;
}




/* Image stacker */

.img-stacker {
    position: relative;
    --offset: 3.5rem;

    --float-offset: 0rem;

    --img1-rotate: 5deg;
    --img2-rotate: -5deg;


    width: 100%;
    height: 100%;
}

.img-stacker img:nth-child(1){
    transform: translateY(var(--float-offset)) rotate(var(--img1-rotate));
}
.img-stacker img:nth-child(2) {
    position: absolute;
    transform: translateX(calc(-100% + var(--offset))) translateY(calc(-1 * var(--offset) + var(--float-offset))) rotate(var(--img2-rotate));
}

.img-stacker.animate {
    animation: float 3s ease infinite;
}

.img-stacker.animate * {
    transition: 1.5s ease all;
}


.img-stacker.specialhover img:nth-child(1):hover {
    --img1-rotate: 10deg;
    cursor: pointer;
}

.img-stacker.specialhover img:nth-child(2):hover {
    --img2-rotate: -10deg;
    cursor: pointer;
}


@keyframes float {
    0% {
        --float-offset: 0rem;
    }
    50% {
        --float-offset: 1rem;
    }

}



/* Custom FPS Thing */


#fps {
    background: var(--background-light);
    padding: 6rem 6rem;
    border-radius: 5rem;
    box-shadow: inset 0 0 3rem var(--main), 0 0 5rem var(--main);
}

#fps p.big {
    color: var(--main);
    font-family: Sora;
    margin-top: 2rem;
}

@media screen and (max-width: 800px) {
    #fps {
        padding: 4rem 3rem;
    }
}





/* Zoomer */

#zoomer-wrapper {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    opacity: 0;
    pointer-events: none;

    display: grid;
    place-items: center;
}

#zoomer-wrapper.active {
    opacity: 1;
    pointer-events: all;
}

#zoomer1 {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;

    width: 0;
    height: 0;

    background: #08a1d8;
    background: linear-gradient(90deg, #6e0cde, #590877);


    transition: 1s ease all;
}

#zoomer1.active {
    width: 200vw;
    height: 200vw;
}

#zoomer2 {
    position: absolute;
    display: grid;
    place-items: center;
    border-radius: 50%;

    width: 0;
    height: 0;

    background: #bd06dd;
    background: linear-gradient(90deg, var(--main), var(--main-dark));


    transition: 1s ease all;
}

#zoomer2.active {
    width: 200vw;
    height: 200vw;
}

#zoomer3 {
    position: absolute;
    display: grid;
    place-items: center;

    width: 0;
    height: 0;


    transition: 1s ease all;

    overflow: hidden;
}

#discord {
    width: 100%;
    height: 100%;
}

#zoomer3.active {
    width: 20rem;
    height: 20rem;
}