/* 2023 © Green-bot Inc. All rights reserved. */



/* Slides */


.slide {
    --gap: 5rem;
    display: grid;
    column-gap: var(--gap);
    grid-template-columns: repeat(2, calc(50% - calc(var(--gap) / 2)));

    min-height: 80vh;
    place-items: center;

    z-index: 20;
    position: relative;

}

@media screen and (max-width: 900px){
    .slide {
        grid-template-columns: 100%;
        grid-template-rows: repeat(2, auto);
    }

    .slide .image {
        display: none;
    }

}

.slide.center {
    grid-template-columns: 100%;
}

.slide .text {
    gap: 2rem;
}


.slide img {
    width: 80%;
    border-radius: var(--border);
}


.slide div.img {
    width: 80%;
    aspect-ratio: calc(16 / 9);
    border-radius: var(--border);
    position: relative;
}

.special::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border);
    background: linear-gradient(90deg, rgb(108, 254, 118), black, rgb(67, 255, 252));

    z-index: -1;
    filter: blur(3rem);
    animation: beat .54s ease infinite;


}

.special:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--border);
}

@keyframes beat {
    0% {
        opacity: 1;
    }

    20% {
        opacity: .5;
    }

    100% {
        opacity: 1;
    }

}

span.highlight {
    background: var(--gradient-light);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 900;
}



/* Custom background left and right */

#background-custom {
    width: 100vw;
    top: 0;
    left: 0;
    height: 100%;
    position: absolute;

    z-index: 10;
    background-image: url(../img/backg/abstract1.jpeg);
    background-size: cover;
}




#background-custom .trans {
    position: absolute;
    bottom: 0;
    height: 20rem;
    width: 100%;
    background: linear-gradient(180deg, transparent, var(--background));
}




.rounded-addition {
    background: var(--text);
    color: var(--background);
    padding: 1rem 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-size: .8;
    font-weight: 600;
}




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

    position: absolute;
    z-index: 5;
}


/* 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.green {
    background: linear-gradient(90deg, var(--main), var(--main-secondary));
    box-shadow: 0 0 calc(var(--default-size)) var(--main);
}

.glow.pink {
    background: linear-gradient(90deg, #ff00b7, #ff0066);
    box-shadow: 0 0 calc(var(--default-size)) #ff00ee;
}



/* 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.green {
    background: linear-gradient(90deg, var(--main), var(--main-secondary));
    box-shadow: 0 0 calc(var(--default-size)) var(--main);
}



.glow-bubble.lime {
    background: linear-gradient(90deg, rgb(32, 233, 6), rgb(65, 200, 7));
    box-shadow: 0 0 calc(var(--default-size)) rgb(32, 233, 6);
}






/* Header */

#header {
    width: 100vw;
    margin-left: calc(-1 * var(--page-padding));
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    
    padding: 1rem 4rem;
    justify-content: space-between;

    position: fixed;
    top: 0;
    z-index: 500;
}

.menu-button {
    display: none;
}

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


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

}

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


#header .flex {
    gap: 1.5rem;

}

#header .flex p {
    color: var(--text);
    cursor: pointer;
    font-size: calc(.9 * var(--p));
}

#header .flex p:hover {
    color: var(--text-desc);
}



.new {
    background: var(--gradient);
    border-radius: .25rem;
    padding: .5rem 1rem;
    color: white;
}


.flex.gradient {
    background: var(--gradient);
    border-radius: .25rem;
    padding: .5rem 1rem;
    color: white;
    width: max-content;
    font-size: 0.9rem;
}







/* 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: var(--gradient);


    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: var(--gradient-light);


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


#features {
    gap: 2rem;
    z-index: 100;
    height: max-content;
    margin-top: 5rem;
    position: relative;
    width: 100%;

}


@media screen and (max-width: 900px){
    #features {
        flex-direction: column;
    }
    #features h1.big {
        display: none;
    }
}

.feature {
    width: 100%;
    height: 100%;
    border-radius: var(--border);
    padding: 2rem;
    gap: 1.5rem;
    background: var(--background-secondary);

    max-width: 20rem;
    margin-top: 4rem;

    position: relative;
    

}

.feature * {
    z-index: 5;
}

.feature::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    border-radius: var(--border);
    background: var(--gradient);
    opacity: 0;
    transition: .5s ease all;
}
.feature:hover {
    cursor: pointer;
    transform: translateY(-.5rem);
}




/* .feature:hover img {
    filter: grayscale(100%);
} */

.feature:hover::before {
    opacity: 1;
}

.feature img {
    --size: 12.5rem;
    width: var(--size);
    height: auto;
    margin-top: calc(-2rem - var(--size) / 2.5);

}

.feature p {
    font-size: 1.25rem;
    line-height: 1.25rem;
}

#features >.flex.v {
    gap: 2rem;
    height: 100%;
    position: relative;
}

.feature .flex {
    gap: 1rem;
}

.circle {
    position: absolute;
    background: var(--gradient-light);
    border-radius: 50%;
    padding: 2rem;
    width: 0;
    height: 0;
    z-index: 100;
}

#features .star {
    position: absolute;
    background-image: url(../img/ui/icons/star.png);
    background-size: cover;
    width: 10rem;
    height: 10rem;
    z-index: -1;
}


.mascot {
    position: absolute;
    width: 15rem !important;
    height: auto;
    right: 0;
    bottom: 8rem;
}





/* trusted by these servers yes :) - also hi from nitlix */



.server-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 2 rows */
    grid-template-rows: repeat(2, 1fr);



}

@media screen and (max-width: 1400px) {
    .server-grid {
        grid-template-columns: repeat(2, 1fr);
        /* 3 rows */
        grid-template-rows: repeat(3, 1fr);
    }
}

@media screen and (max-width: 1000px) {
    .server-grid {
        grid-template-columns: repeat(1, 1fr);
        /* 3 rows */
        grid-template-rows: repeat(3, 1fr);
    }

    .server-grid .spare {
        display: none;
    }

    .server-grid .mascot {
        left: 0rem !important;
        z-index: 9 !important;
    }

    #servers button {
        z-index: 10;
        position: relative;
    }
}



.server {
    background: var(--background-secondary);
    border-radius: 1rem;

    padding: 1rem;
    z-index: 15;
    
}

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


.server img {
    width: 7.5rem;
    height: auto;
    border-radius: 50%;
}

.server i {
    font-size: 1.25rem;
    margin-right: .25rem;
    color: var(--text-desc);
}

.server p {
    font-size: 1rem;
    
}



.server-grid .circle {
    --size: 10rem;
    background: var(--gradient-light);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    position: absolute;
    z-index: -1;
}

.server-grid .circle.small {
    --size: 2.5rem;
}


.footer {
    margin-top: 20rem;
    padding: 4rem var(--page-padding);
    border-top: solid .1rem var(--background-secondary);

    width: 100vw;
    margin-left: calc(-1 * var(--page-padding))
}

.darkener {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background: rgba(0, 0, 0, 0.361);
    border-radius: 2rem;
    z-index: 100;
}

.darkener + * {
    z-index: 101;
}

.epic {
    background: url(../img/backg/greenbot_epic.webp); 
    background-size: cover; 
    background-position: 0 90%; 
    padding: 4rem 2rem;
    border-radius: 2rem; 
    min-height: 30rem; 
    margin-top: 20rem;
}

.footer .icons a {
    text-decoration: none;
    font-size: 2.5rem;
    width: 3.5rem;
    height: 3.5rem;
    position: relative;
}

.footer .icons a::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    
    border-radius: 50%;
    background: var(--gradient);
    transition: .5s ease all;
    z-index: 10;
}

.footer .icons i {
    z-index: 20;
    position: relative;
}

.footer .icons i.bxl-twitter {
    transform: translateY(.1rem) translateX(.1rem);

}



.footer .icons a:hover::after {
    opacity: 1;
}


.footer {
    display: grid;
    gap: 5rem;
    grid-template-columns: repeat(4, 1fr);
}


@media screen and (max-width: 1200px){
    .footer {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, auto);
    }
}

@media screen and (max-width: 800px){
    .footer {
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(4, auto);
        padding: 1.5rem;
    }
}

.footer > .flex.v > .flex.v > a {
    text-decoration: none;
    font-family: Gellix Normal;
    font-size: 1.3rem;
    color: var(--text-desc)
}

.footer p {
    font-size: 1.3rem;

}


[data-nitlixparallax-multiplier] {
    transition: all .25s ease, transform 0s;
}

/* Absolute mobile menu */

.absolutemenu {
    min-width: 20rem;
    background: rgba(0, 0, 0, 0.276);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    
    right: 0;
    top: 0;
    bottom: 0;

    z-index: 1000;


    transform: translateX(30rem);
    padding: 0 2rem;

}

.absolutemenu.active {
    transform: translateX(0);
}


/* Custom_bot Plans */

#plans {
    min-height: 80vh;
}

#plans .maingrid > * {
    height: 100%;
}

#plans .feature {
    max-width: 22rem;
}

@media screen and (max-width: 800px) {
    #plans .maingrid {
        flex-direction: column;
    }

    #quick_setup {
        margin-bottom: 15rem;
        margin-top: 15rem;
    }
}


#plans .feature .rounded-addition {
    padding: .5rem 1rem;
}
#plans .feature .rounded-addition p{
    font-size: 1rem;
}

#plans .save {
    font-size: 1rem;
}