* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: all var(--global-transition);
}

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

.scroller::-webkit-scrollbar {
    width: var(--scrollbar);
    background: var(--back);
}

.scroller::-webkit-scrollbar-thumb {
    background: var(--primary);
}


:root {
    --scrollbar: .5rem;
    --primary: #ffff;
    --primary-desc: #ffffffb2;
    --primary-more: #ffffff75;

    --global-transition: .15s ease;

    --back: #000000;
    --back-desc: rgba(0, 0, 0, 0.82);

    --shadow: rgba(255, 255, 255, 0.14);
    --shadow2: rgba(255, 255, 255, 0.237);
    --shadow3: rgba(255, 255, 255, 0.397);
    --shadow4: rgba(255, 255, 255, 0.569);

    --back-trans: #000000bd;


    --card-transition: cubic-bezier(0.83, 0.02, 0.17, 0.98);
    --card-transition-2: cubic-bezier(0.34, 0.78, 0, 0.97);

    --gradient1: linear-gradient(250deg, #ff9249 21%, #ff00ff 50%, #00eeff 100%);
    --gradient2: linear-gradient(250deg, rgba(255, 0, 255, 1) 30%, rgba(0, 234, 255, 1) 100%);






    --gradient1-c: linear-gradient(250deg, rgb(253, 126, 41) 21%, rgb(255, 0, 204) 50%, rgb(0, 229, 245) 100%);

    --gradient1-r: linear-gradient(260deg, rgb(255, 146, 73) 10%, rgba(255, 0, 255, 1) 40%, rgba(0, 234, 255, 1) 75%, rgb(255, 146, 73) 100%);

    --gc1: #ff9249;
    --gc2: #ff00ff;
    --gc3: #00eaff;

    --gr1: #f7a066;
    --gr2: #f344f3;
    --gr3: #39dae9;

    --grr1: rgb(249, 183, 140);
    --grr2: rgb(255, 120, 255);
    --grr3: rgb(174, 250, 255);

    --page-padding: 8rem;



    --gradient-smooth: linear-gradient(250deg, var(--gr1) 21%, var(--gr2) 50%, var(--gr3) 100%);
    --gradient-smooth2: linear-gradient(250deg, var(--grr1) 21%, var(--grr2) 50%, var(--grr3) 100%);

    --gradient-smooth-r: linear-gradient(90deg, var(--gr1) 25%, var(--gr2) 50%, var(--gr3) 75%, var(--gr1) 100%);


    --selection: rgb(0, 246, 209);



    /* Text sizes */
    --h1-big: 10rem;
    --h1: 4.5rem;
    --h2: 3.25rem;
    --h3: 2.25rem;
    --p: 1.05rem;
    --p-big: 1.5rem;

    --letter-spacing-multiplier: .01;

    --heading-font: 'Neue Hass';
    --p-font: 'Inter';

    --h1-fw: 700;
    --h2-fw: 700;
    --h3-fw: 700;
    --p-fw: 400;
}

/* 
.light:root {
    --primary: #000000;
    --primary-desc: #000000b2;
    --primary-more: #00000048;

    --back: #ffffff;
    --back-desc: rgba(255, 255, 255, 0.82);

    --shadow:rgba(0, 0, 0, 0.14); 

    --back-trans: #ffffffbd;

    --selection: rgb(0, 246, 209);
} */




/* Change in parametres depending on screen */
@media screen and (max-width: 1150px) {
    :root {
        --page-padding: 5rem;
        --h1-big: 8rem;
        --h1: 4rem;
    }
}

@media screen and (max-width:800px) {
    :root {
        --page-padding: 1rem;
        --h1-big: 4rem;
        --h1: 3rem;
        --h2: 2rem;
        --h3: 2rem;
        --p: 1rem;
        --p-big: 1.1rem;
    }


}

/* Header disable */
@media screen and (max-width: 1000px) {
    #header .menu {
        display: none;
    }

    #header .menu-btn {
        display: flex !important;
    }
}

body {
    background: var(--back);
    color: var(--primary);
    min-height: 100vh;
}

h1 {
    --font-size: var(--h1);
    font-size: var(--font-size);
    font-weight: var(--h1-fw);
    font-family: var(--heading-font);
    line-height: 1.05;
}

h1.special,
h2.special,
h3.special {
    background: linear-gradient(180deg, rgb(255, 255, 255), rgb(134 129 129) 90%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    line-height: 1 !important;

    text-shadow: 0 0 3rem var(--shadow4)
}

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

h2 {
    --font-size: var(--h2);
    font-size: var(--font-size);
    font-weight: var(--h2-fw);
    font-family: var(--heading-font);
    line-height: 1.05;
}

h3 {
    --font-size: var(--h3);
    font-size: var(--font-size);
    font-weight: var(--h3-fw);
    font-family: var(--heading-font);
    line-height: 1.05;
}

p {
    --font-size: var(--p);
    font-size: var(--font-size);
    font-weight: var(--p-fw);
    font-family: var(--p-font);
    line-height: 1.05;
    color: var(--primary-desc);
}

h1,
h2,
h3,
p {
    letter-spacing: calc(-1 * var(--font-size) * var(--letter-spacing-multiplier));
}

a {
    text-decoration: none;
    color: var(--primary);
}

a.underline {
    text-decoration: underline;
}




/* NBODY */

#nbody {
    padding: 0 var(--page-padding);
    overflow: hidden;
}




.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.hideoverflow {
    overflow: hidden;
}



/* Inputs */

input:focus {
    outline: none;

}

textarea {
    resize: none;
}

textarea:focus {
    outline: none;
}



/* Buttons */

button {
    border: none;
    outline: none;
    cursor: pointer;
    padding: .65rem 1.25rem;
    border-radius: .3rem;
    background: transparent;
    border: solid .1rem var(--primary);
    box-shadow: 0 0 0 var(--primary);

    position: relative;
}

button i {
    font-size: calc(var(--p) * 1.5);
}

button.noborder {
    border: solid .1rem transparent;
}

button.small {
    padding: .5rem 1rem;
    font-size: calc(var(--p) * .75);
}

button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--primary);
    opacity: 1;

    transition: all var(--global-transition);
    z-index: 90;
}



button * {
    color: var(--back);
    font-weight: 500;
    position: relative;
    z-index: 100;
}

button:hover::before {
    opacity: 0;
}

button.noborder:hover {
    border: solid .1rem var(--primary);
}

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



button.red::before {
    background: rgb(241, 6, 37);
}

button.red * {
    color: white;
}

button.red {
    border: solid .1rem rgb(241, 6, 37);
}


/* Logo */

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

.logo.medium img {
    --size: 4rem;
}

.logo.big img {
    --size: 6rem;
}



/* Inputs */

input {
    background: var(--primary-more);
    border: none;
    border-radius: .5rem;
    padding: 1rem;
}

textarea {
    background: var(--primary-more);
    border: none;
    border-radius: .5rem;
    padding: 1rem;

    font-family: var(--p-font);
}



/* Gradients */

.gradient {
    background: var(--gradient-smooth);
}

.gradient.animate {
    background: var(--gradient-smooth-r);
    background-size: 150% 100%;
    animation: scroll 2000s linear infinite;
}

span.gradient,
i.gradient {
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
}

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

    to {
        background-position: 300000% 0;
    }
}

.selected {
    background: var(--selection);
    color: var(--back);
}

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

    #v4_img {
        display: none;
    }

    .bubble {
        display: none;
    }

    .light_background_text {
        display: none;
    }

}


/* Social icons */

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

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

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

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



/* Selection */

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


/* Header */

#header {
    padding: 1rem var(--page-padding);
    position: fixed;
    top: 0;
    width: 100%;
    /* for mobile bc mobile is annoying */
    max-width: 100vw;


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

    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
    border-bottom: solid .1rem transparent;



    z-index: 9000;
}

#header.scroll {
    background: rgba(0, 0, 0, 0.518);
    border-bottom: solid .1rem var(--primary-more);
}

#header a {
    cursor: pointer;
}

#header a:hover p {
    color: var(--primary);
}

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





/* Rounded addition for slides */

.rounded-addition {
    background: var(--primary);
    color: var(--back);
    padding: 0.75rem 2rem;
    border-radius: 3rem;
}

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



.maxcontent {
    width: max-content;
}

.pageheight {
    height: 100vh;
}

.width100 {
    width: 100%;
}

.height100 {
    height: 100%;
}


/* Gradient bubble */


.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: 10rem;
    height: 10rem;
    box-shadow: inset 0 0 2rem white;
}

.gradient-bubble.supersmall {
    width: 5rem;
    height: 5rem;
    box-shadow: inset 0 0 2rem 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;
    }
}




/* Nitlix Laddition */

.laddition {
    background: var(--primary);
    color: var(--back);
    padding: 1rem;

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

    border-radius: 3rem;

    width: max-content;
}

.laddition * {
    color: var(--back) !important;
    font-weight: 700;
}



.link {
    position: relative;
}



.link.active:after {
    transform: scaleX(1);
    transform-origin: center left
}

@media screen and (hover: hover) {
    .link:focus,.link:hover {
        color: var(--primary);
    }

    .link:focus:after,.link:hover:after {
        transform: scaleX(1);
        transform-origin: center left
    }
}

@media(min-width: 800px) {
    .link:after {
        background-color: var(--primary);
        margin-top: .3rem;
        bottom: 0;
        content: "";
        display: block;
        height: 1px;
        left: 0;
        position: absolute;
        transform: scaleX(0);
        transform-origin: center right;
        transition: transform 1s cubic-bezier(0.19,1,0.22,1);
        width: 100%;
    }
}

.link--active {
    color: var(--primary);
}

.link--active:after {
    transform: scaleX(1);
    transform-origin: center left
}