a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

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

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

html {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

.maxcontent {
    width: max-content;
}

/* Nitlix wrapper */
#nitlix-wrapper {
    --padding: 5rem;
    overflow-x: hidden;

    width: 100%;
    overflow-y: hidden;
    max-width: 150rem;
    margin: 0 auto;
    padding: 0 var(--padding);

    /* gap: 1rem;
 */
    position: relative;
    z-index: 50;
    /* backdrop-filter: blur(1.5rem);
    -webkit-backdrop-filter: blur(1.5rem); */

    background: var(--background-trans);
}

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

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


@media screen and (max-width: 700px) {
    #nitlix-wrapper {
        --padding: 1.5rem;
    }
}

/* New line at the top */

#stripe {
    background: var(--gradient-smooth-r);
    background-size: 150% 100%;
    animation-name: scroll;
    animation-duration: 10000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    height: 3rem;
    width: 100vw;
    margin-left: calc(-1 * var(--padding));
    z-index: 100;
}

#stripe h3 {
    font-size: 1rem;
    font-weight: 600;
    color: white;
}

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

h1.big {
    font-size: var(--h1-big);
    line-height: var(--h1-big);
}

/* Gradient highlight */

span.gradient, i.gradient, h1.gradient, h2.gradient, h3.gradient, p.gradient {
    background: var(--gradient-smooth);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

span.gradient.animate, i.gradient.animate {
    background: var(--gradient-smooth-r);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    background-size: 150% 100%;
    animation-name: scroll;
    animation-duration: 10000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

    font-weight: 800;
}




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

/* Header and Logo */

#header-wrapper {
    width: 100vw;
    margin-left: calc(-1 * var(--padding));
}

#header-wrapper #menu {
    height: 0;
    width: 100vw;
    overflow: hidden;
    padding: 0;
    gap: 1rem;
}

#header-wrapper #menu.active {
    height: 15rem;
}

#header {
    -webkit-backdrop-filter: blur(10px);
    /* width: 100%; */

    justify-content: space-between;
    z-index: 15;

    width: 100vw;
    padding: 1.5rem var(--padding);


}
.logo.roundspace {
    margin-left: 2rem;
    margin-right: 2rem;
}

.logo [class*='icon-'] {
    font-size: 3rem;
}

.logo img {
    --size: 3rem;
    width: var(--size);
    height: var(--size);
}

.logo.big img{
    --size: 4.5rem;
}
.logo h1 {
    font-family: Inter;
    font-weight: 900;
    font-size: 2rem;
}

#header .menu {
    gap: 2rem;
}

#header p, #menu p {
    font-size: 1.1rem;
    color: var(--text);
}

#header p:hover, #menu p:hover {
    color: var(--text-desc);
}

#header a.rounded *, #menu a.rounded * {
    padding: 0.75rem 1.5rem;
    border-radius: 0.25rem;
    background: var(--text);
    color: var(--background);
    font-weight: 500;
}

#header .menu-button {
    display: none;
}

#main h1 {
    font-size: var(--h1-big);
    line-height: var(--h1-big);
    letter-spacing: -.3rem;
}

@media screen and (max-width: 700px){
    #header .menu {
        gap: 1rem;
    }

    #main h1 {
        letter-spacing: -.1rem;
    }
}

@media screen and (max-width: 500px){
    #header {
        justify-content: space-between;
    }
    #header .menu a{
        display: none;
    }
    #header .menu-button {
        display: flex;
    }
}

/* Sexy background div */

#background-div {
    width: 120vw;
    height: 40rem;
    top: -18rem;
    left: -11vw;
    position: absolute;
    transform: rotateZ(-12deg);
    filter: blur(3rem);

    background: var(--gradient-smooth-r);
    background-size: 150% 100%;
    animation-name: scroll;
    animation-duration: 50000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    transition: none;
}

/* 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: 0.5rem;
}

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

/* Nitlix data-flex */
.data-flex,
.data-flex-v {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.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;
}

.data-flex.right,
.data-flex-v.right {
    justify-content: flex-end;
    align-items: flex-end;
}

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

/* Default buttons */

button {
    border: none;
    outline: none;
    cursor: pointer;

    padding: 0.5rem 1.5rem;
    border-radius: 0.25rem;

    font-family: Inter;
    font-size: var(--p);
    font-weight: 700;
    gap: calc(var(--p) / 2);
}

button p {
    font-weight: 600;
}

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

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

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

button.big i {
    transform: translateY(.1rem);
}

/* 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;
}



@media screen and (max-width: 1000px){
    button.big {
        padding: 0.5rem 1rem;
        font-size: calc(var(--p-big) / 1.25);

    }  

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




}


/* Custom buttons */

button.alt {
    background: var(--text);
    color: var(--background);
    box-shadow: 0 0 3rem var(--shadow);
}

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

button.gradient {
    background: var(--gradient1);
    color: white;
}

button.gradient.animate {
    background: var(--gradient-smooth-r);
    background-size: 150% 100%;
    animation-name: scroll;
    animation-duration: 10000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

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

button.transparent.gradient * {
    background: var(--gradient1);
    -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 {
    translate: 0.25rem;
}

/* Nitlix Sexy Laddition */

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

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

    border-radius: 0.25rem;
    margin-left: 0.5rem;
}

/* And a sexy rounded addition */




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

    place-items: center;
    position: relative;

    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;
    }

    #v4_img {
        display: none;
    }

    .bubble {
        display: none;
    }
    .light_background_text {
        display: none;
    }

}

.slide .text {
    gap: 2rem;
}

/* Slide image size control */

.slide img {
    width: 80%;
    z-index: 15;
}

/* Social icons */

.social-icon {
    background: var(--gradient1-c);
    background-size: 100% 100%;
    border-radius: 50%;
    padding: calc(var(--p));
    cursor: pointer;
}

.social-icon {
    font-size: calc(var(--p) * 2);
    color: white;
}

.social-icon:hover {
    background: var(--gradient-smooth-r);
    background-size: 200% 100%;
    animation-name: scroll;
    animation-duration: 10000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.social-icon:hover i {
    color: white;
}




/* Shadow for slides parallax */

.shadow {
    position: absolute;
    height: 100%;
    width: 10rem;
    z-index: 30;
    background: linear-gradient(90deg, var(--background), rgba(255, 255, 255, 0));
}

.shadow.left {
    left: calc(-1 * var(--padding));
}

.shadow.right {
    right: calc(-1 * var(--padding));
    background: linear-gradient(270deg, var(--background), rgba(255, 255, 255, 0));
}

.relative {
    position: relative;
}

#more_text, #more_img, #v4_text, #v4_img, #main, #knocks, #super_text, #super_img {
    transition: all .5s ease, transform 0s;
    z-index: 15;
}


#v4_img img{
    width: 20rem;
    aspect-ratio: 1.81;
    border-radius: 1rem;
    box-shadow: inset 0 0 3rem white;
}

#v4_img .data-flex {
    gap: 3rem;
}

#v4_img i {
    font-size: 3rem;
    line-height: 3rem;
    height: 3rem;
    font-weight: 300;
    margin-left: calc(var(--h2) * 1.3 + .5rem);
    color: rgba(0, 0, 0, 0.54);
}


/* Custom AOS Opacity Animation */

html:not(.no-js) [data-aos=opacity] {
    opacity: 0;
}

html:not(.no-js) [data-aos=opacity].aos-animate {
    opacity: 1;
}


/* OPPOSITE COLOUR SECTION */
.opposite {
    background: var(--text);
    width: calc(100% + 2 * var(--padding));
    color: var(--background);
    margin: 0 calc(-1 * var(--padding));
    padding: 5rem calc(var(--padding));
}

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

.opposite h1, .opposite h2, .opposite h3, .opposite i {
    color: var(--background);
}

.opposite p {
    color: var(--background-desc);
}

.opposite .rounded-addition {
    background: var(--background);
    color: var(--text);
}

.opposite .rounded-addition * {
    color: var(--text) !important;
}

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

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





/* Image stacker */

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

    --float-offset: 0rem;

    --img1-rotate: 0deg;
    --img2-rotate: 0deg;


    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));
}

@media screen and (min-width: 1000px){
    .img-stacker img {
        width: 70%;
    }
}

.img-stacker.animate {
    animation: floatIS 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 floatIS {
    0% {
        --float-offset: 0rem;
    }
    50% {
        --float-offset: 1rem;
    }

}





/* Opposite transition */

.opposite-transition {
    width: calc(100% + 2 * var(--padding));
    height: 10rem;
    margin: 0 calc(-1 * var(--padding));
    backdrop-filter: blur(1rem);
}

.opposite-transition.bottom {
    margin-bottom: -6rem;
}

.opposite-transition.top {
    margin-top: -6rem;
}






/* Gradient bubbles */


.gradient-bubble {
    position: absolute;
    width: 15rem;
    height: 15rem;
    object-fit: cover;
    border-radius: 50%;
    
    z-index: 10;
    /* animation: float 4s ease-in-out infinite; */

    transition: all .5s ease, transform 0s;

    box-shadow: inset 0 0 5rem white;
    background: var(--gradient1-c);
}

.gradient-bubble.small {
    width: 5rem;
    height: 5rem;
    box-shadow: inset 0 0 2rem white;
}

.gradient-bubble.supersmall {
    width: 1rem;
    height: 1rem;
    box-shadow: inset 0 0 .5rem white;
}


.gradient-bubble.animate {
    background: var(--gradient-smooth-r);
    background-size: 150% 100%;
    animation-name: scroll;
    animation-duration: 10000s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes float {
    0% {
        margin-top: 0rem;
    }
    50% {
        margin-top: -2rem;
    }
    100% {
        margin-top: 0rem;
    }
}

@media screen and (max-width: 900px){
    .gradient-bubble {
        transform: scale(0.6);
        transform-origin: center;
    }
}




/* Background Text */

.light_background_text {
    position: absolute; color: transparent; background: linear-gradient(360deg, rgb(221, 221, 221), rgb(255, 255, 255)); -webkit-background-clip: text; background-clip: text; font-size: 11vw; line-height: 11vw; pointer-events: none;z-index: 9;
}




/* THE BEST MAIN COMPONENT MUAWAHAHA */

#mainb {
    /* background: var(--gradient-smooth-r);
    background-size: 200% 100%;
    animation: scroll 100000s linear infinite; */
    height: 100vh;
    width: 100vw;
    transition: all .5s ease, height 0s, width 0s;
    display: grid;
    place-items: center;

    margin-left: calc(-1 * var(--padding));
}

#mainb * {
    color: white !important;
    font-family: Poppins;
    font-size: 5vw;
}

#mainb video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: -1;
}






/* Nitlix fade animation */

/* html:not(.no-js) [data-aos=nfade] {
    transform: translateY(1rem);
}

html:not(.no-js) [data-aos=nfade]::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: -0.5rem;
    background: linear-gradient(to bottom, rgb(255, 255, 255, 0), rgba(255, 255, 255) 50%);
    transition: transform 2s cubic-bezier(0.17, 0.67, 0, 1),opacity 0s 2s;
    pointer-events: none;

}


html:not(.no-js) [data-aos=nfade].aos-animate {
    transform: translateY(0rem);

}


html:not(.no-js) [data-aos=nfade].aos-animate::before {
    transform: translateY(100%);
    
}
 */


 



/* 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;
}



/* 3 Years of niltix correctino */
#tyon::after {
    content: "Celebrating 3 years of Nitlix. Now since 20th of February 2020. 🎂"
}
@media screen and (max-width: 500px) {
    #tyon::after {
        content: "Celebrating 3 Years of Niltix 🎂";
    }
}






/* Notifications */

.notification-wrapper {

    position: fixed;
    top: 1rem;
    left: 0;
    right: 0;

    z-index: 1000;
}

.notification {
    --color: rgb(14, 184, 40);
    border-radius: 3rem;
    border: solid 1px var(--shadow);
    background: var(--background);
    padding: 1rem 2rem;
    transform: translateY(1rem);
    opacity: 0;
    z-index: 1000;
    position: relative;
}


.notification.positive {
    --color: rgb(24, 224, 54);
}

.notification.negative {
    --color: rgb(232, 8, 56);
}

.notification.negative i::before{
    content: "\eda4" !important;
}

.notification::after {
    content: "";
    position: absolute;
    height: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 50%;
    left: 0rem;
    bottom: 0rem;
    
    z-index: -1;
    /* animation: float 4s ease-in-out infinite; */


    box-shadow: inset 0 0 2rem white;
    background: var(--gradient1-c);

}


.notification.active {
    transform: translateY(0rem);
    opacity: 1;
}

.notification.deactivating {
    margin-top: -100%;
    opacity: 0;
}


.notification i {
    font-size: 2.75rem;
    color: white;
    margin-left: -1rem;
    margin-right: 1rem;
    transform: translateX(.1rem);
}

.notification h3 {
    font-size: 1.5rem;
}


/* Lag studios image exception */

.lag-studios {
    height: 3.5rem !important;
}