@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Inter:wght@100;200;300;400;500;600;700;800;900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Source+Code+Pro:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
    font-family: basier;
    src: url('../fonts/basiersquaremono.ttf');
}

@font-face {
    font-family: gallient;
    src: url('../fonts/Gallient.ttf');
}


html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}


.thick-7 {
    background:
        linear-gradient(#0000002a 0 0) left /var(--d, 0%) 100% no-repeat;
    transition: 0.5s;
    border-radius: 1rem;
}

.thick-7:hover {
    --d: 100%;
    color: #fff;
}

.fading-1 {
    background:
        linear-gradient(90deg, transparent, #ffffff, transparent) bottom /var(--d, 0) 2px no-repeat;
    transition: 0.5s;
    padding-bottom: 0.3rem;
}

.fading-1:hover {
    --d: 100%;
}

.fancy-3 {
    background:
        radial-gradient(circle, rgb(70, 21, 99) 50%, transparent) center/var(--d, 0) var(--d, 0) no-repeat,
        linear-gradient(rgb(50, 26, 77) 0 0) bottom -12px left 50% /15px 15px no-repeat;
    transition: 0.1s, background-position 0.1s 0.3s
}

.fancy-3:hover {
    transition: 0.3s, background-size 0.4s 0.3s, color 0.3s 0.3s;
    background-position: center;
    --d: 180%;
    color: #fff
}

.basic-4 {
    padding-bottom: 0.2rem;
    background:
        linear-gradient(currentColor 0 0) var(--p, 0) 100% /var(--d, 0) 1px no-repeat;
    transition: 0.3s, background-position 0s 0.3s;
}

.basic-4:hover {
    --d: 100%;
    --p: 100%;
}

.fading-5 {
    background:
        linear-gradient(-45deg, transparent calc(100%/3), rgba(123, 6, 158, 0.5), transparent calc(200%/3)) bottom right/350% 100% no-repeat;
    transition: 0.8s linear, background-size 0s 0.8s;
}

.fading-5:hover {
    background-position: bottom left;
    background-size: 0 0;
}



#cursor1 {
    background-color: white;
    height: 0.85rem;
    aspect-ratio: 1;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    /* background: linear-gradient(to right, aquamarine, rgb(85, 0, 255)); */
    /* background: linear-gradient(to right, rgb(52, 10, 77), rgb(32, 16, 63)); */
    background-color: #ffffff;
    z-index: 100000;
    pointer-events: none;
    mix-blend-mode: difference;
}

#cursor2 {
    border: 2px solid #ffffff;
    height: 7rem;
    aspect-ratio: 1;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    animation: rotate 20s infinite;
    z-index: 100000;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: height 0.3s ease;
}

/* #circle_0 {
    background-color: #b01ceb;
    filter: blur(150px);
    -webkit-filter: blur(70px);
    border-radius: 50%;
    height: 12rem;
    width: 12rem;
    position: fixed;
    top: 35%;
    left: 50%;
    z-index: -90;
    opacity: 0.4;
    pointer-events: none;
    transform: translate(-50%, -50%);
} */

.morphing-svg {
    filter: blur(65px);
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    width: 100%;
}

.morphing-svg path {
    visibility: hidden;
}

.morphing-svg [data-morph-targets] {
    fill: #30205e;
    visibility: visible;
}


html {
    scroll-behavior: smooth;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

::selection {
    background-color: #6332a3;
    color: #ffffff;
}



body {
    background-color: #0d0d1a;
    font-family: 'Inter', sans-serif;
    position: relative;
    overflow-x: hidden;
    /* font-family: 'basier', sans-serif; */
    /* font-family: 'gallient', sans-serif; */
    /* font-family: 'Space Mono', monospace; */
    /* font-family: 'Source Code Pro', monospace; */
    /* font-family: 'Libre Baskerville', serif; */
    /* font-family: 'Chakra Petch', sans-serif; */
}



a {
    font-family: 'Space Mono', monospace;
    font-family: 'Source Code Pro', monospace;
    font-family: 'basier', sans-serif;
    text-decoration: none;
    color: #ffffff;
}

.screen_border {
    width: 100%;
    height: 100vh;
    border: 10px solid #0c0e2e;
    position: fixed;
    border-radius: 1.5rem;
}

.screen_border_bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    border: 10px solid #080a27;
}

.main {
    position: relative;
    /* width: 90%; */
    padding-inline: 10rem;
    margin: auto;
    overflow: hidden;
    z-index: 100;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    padding-inline: 10rem;
    z-index: 10001;
    backdrop-filter: blur(10px);
    border-radius: 0.25rem;
    /* background-color: #2a2a2a38; */
    /* padding: 0.2rem 1rem; */

}

.label {
    color: #c4c4c4;
    /* font-family: 'Source Code Pro', monospace; */
    font-family: 'basier', sans-serif;
}

.logo {
    width: 7rem;
}

.logo img {
    width: inherit;
}

.logo_text {
    color: #ffffff;
    font-family: 'Source Code Pro', monospace;
    font-weight: 200;
    line-height: 1;
}

.logo_text span {
    font-weight: 500;
    display: block;

}

/* .links,.logo_text{
    backdrop-filter: blur(10px);
    border-radius: 0.25rem;
    background-color: #2a2a2a38;
    padding: 0.2rem 1rem;
} */

.links a {
    margin-inline: 0.2rem;
}

.separator {
    height: 25vh;
}

.separator_m {
    height: 15vh;
}

.separator_xl {
    height: 32vh;
}

.hero {
    position: relative;
    width: 65%;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.hero img {
    width: 10rem;
}

.title {
    overflow: hidden;
}

.hero h1 {
    color: #ffffff;
    font-size: max(2rem, 3.7vw);
    ;
    text-shadow: 0px 0px 5px rgb(122 77 138 / 20%), 0px 0px 19px rgb(170 35 206 / 36%);
    text-align: center;
    margin: auto;
    overflow: hidden;
    font-family: 'inter', sans-serif;
    /* font-family: 'basier', sans-serif; */
    /* font-family: 'Space Mono', monospace; */
    /* font-family: 'Source Code Pro', monospace; */
    /* font-family: 'Libre Baskerville', serif; */
    /* font-family: 'gallient', sans-serif; */
    /* font-weight: 900; */
}

.hero .label {
    align-self: flex-start;
    margin-left: 0.7rem;
}

@keyframes purpling {
    0% {
        background-color: #9900a1;
    }

    25% {
        background-color: #b8005c;
    }

    50% {
        background-color: #9200be;
    }

    65% {
        background-color: #5c00b3;
    }

    85% {
        background-color: #1f07a8;
    }

    100% {
        background-color: #9900a1;
    }
}

.circle_1 {
    background-color: #49007e;
    filter: blur(150px);
    -webkit-filter: blur(150px);
    border-radius: 50%;
    /* height: 20rem;
    width: 20rem; */
    height: 8rem;
    width: 45rem;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -11;
    opacity: 0.7;

    transform: translate(-50%, -50%);
    animation: purpling 15s infinite;
}

.circle_2 {
    background-color: #f400ff;
    filter: blur(150px);
    -webkit-filter: blur(70px);
    border-radius: 50%;
    height: 6rem;
    width: 9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -9;
    opacity: 0.4;
    transform: translate(-50%, -50%);
}


.circle_4 {
    background-color: #f400ff;
    filter: blur(150px);
    -webkit-filter: blur(70px);
    border-radius: 50%;
    height: 6rem;
    width: 9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -9;
    opacity: 0.4;
    transform: translate(-50%, -50%);
}

.hero .blur {
    backdrop-filter: blur(40px);
    filter: blur(150px);
    -webkit-filter: blur(150px);
    border-radius: 50%;
    height: 90rem;
    width: 90rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -10;
    /* border: 100px solid #090c4c; */
}

@keyframes blur_bounce {
    from {
        transform: translate(-50%, -50%);
    }

    to {
        transform: translate(-50%, -55%);
    }
}

.blursy1 {
    backdrop-filter: blur(40px);
    border-radius: 50%;
    height: 25rem;
    width: 25rem;
    position: absolute;
    top: 12%;
    left: 8%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #381e6e1c;
    animation: blur_bounce 3s infinite alternate;
}

.blursy2 {
    backdrop-filter: blur(40px);
    border-radius: 50%;
    height: 15rem;
    width: 15rem;
    position: absolute;
    top: 25%;
    left: 99%;
    transform: translate(-50%, -50%);
    z-index: 1000;
    background-color: #381e6e1c;
    animation: blur_bounce 3s infinite alternate;
}

.blursy3 {
    backdrop-filter: blur(40px);
    border-radius: 50%;
    height: 50rem;
    width: 50rem;
    position: absolute;
    top: 65%;
    left: 1%;
    transform: translate(-50%, -50%);
    z-index: 100;
    background-color: #381e6e1c;
    animation: blur_bounce 3s infinite alternate;
}



.projects .blur {
    backdrop-filter: blur(40px);
    filter: blur(150px);
    -webkit-filter: blur(40px);
    border-radius: 50%;
    height: 90rem;
    width: 90rem;
    position: absolute;
    top: 90%;
    left: 75%;
    transform: translate(-50%, -50%);
    z-index: -10;
    /* border: 100px solid #090c4c; */
}

.down_arrow {
    display: block;
    text-align: center;
    animation: bounce 3s infinite alternate;
    transition: 0.5s ease;
    width: fit-content;
    margin: auto;
}

.down_arrow:hover {
    transform: translateY(10px);
}

@keyframes bounce {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(10px);
    }
}

@media screen {
    @media (max-width: 1200px) {

        .circle_1,
        .circle_2 {
            top: 30%;
        }

        .main,
        nav {
            padding-inline: 2rem;
        }

        nav {
            align-items: flex-start;
        }

        #cursor1,
        #cursor2,
        #circle_0,
        .blursy1,
        .blursy2,
        .blursy3 {
            display: none;
        }

    }

    @media (max-width: 900px) {
        .hero {
            width: 100%;
        }

        .circle_1,
        .circle_2 {
            top: 25%;
        }
    }

    @media (max-width: 600px) {

        .main,
        nav {
            padding-inline: 0.75rem;
        }

        .links a {
            display: block;
        }
    }
}


.about {
    /* height: 70vh; */
    margin-block: 10rem;
    overflow: hidden;
}

.about .header {
    margin-bottom: 2rem;
}

.about .header .label {
    position: relative;
}

.about .header .label::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 0;
    width: 100vw;
    margin-left: 1rem;
    border-top-width: 1px;
    border-top-style: solid;
    color: #383838;
}

.about .header p {
    color: #ffffff;
    width: 70%;
    font-size: 2.4rem;
    margin-top: 1rem;
    line-height: 1.5;
}

.about .header p span {
    font-weight: 400;
    font-size: 2rem;
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
}

.about_items {
    display: flex;
    justify-content: flex-end;
    gap: 2rem;
    margin-top: 4rem;
}

.about_item {
    position: relative;
    color: #ffffff;
    flex-basis: 22.5%;
    padding: 1.8rem;
    border-radius: 0.9rem;
    backdrop-filter: blur(2px);
    /* opacity: 1; */
    background: rgb(26, 19, 32);
    background: linear-gradient(90deg, rgba(25, 17, 32, 0.452) 0%, rgba(0, 0, 0, 0) 100%);
    transition: 1s ease;
    z-index: 10000;
}

.about_item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: linear-gradient(45deg, #2e154b3a, #3f2a3d3f, #64008b48, #24173500, #311b5a, #281430da) border-box;
    -webkit-mask:
        linear-gradient(#fff 0 0) padding-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: destination-out;
    mask-composite: exclude;
    animation: gradient 2s infinite;
    z-index: -1;
    transition: background 1.3s ease-in-out;
}


.about_item:hover::before {
    background: linear-gradient(45deg, #8c4cd63a, #3f2a3d3f, #cf7df048, #100e1300, #1d1727, #17111ada) border-box;
    transition: background 0.3s ease-in-out;
}

.about_item:hover {
    transform: translateY(-3px);
}

.about_item div {
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
}

.about_item p {
    font-weight: 300;
    font-size: 1.05rem;
    color: #c4c4c4;
    line-height: 1.5;
}

@media screen {
    @media (max-width: 1350px) {
        .about_item {
            flex-basis: 30%;
        }
    }

    @media (max-width: 1000px) {
        .about_items {
            flex-direction: column;
            align-items: flex-end;
        }

        .about .header p {
            width: 100%;
        }

        .about_item {
            width: 100%;
        }
    }

    @media (max-width: 800px) {
        .about .header p {
            font-size: 1.3rem;
        }

    }

}

.projects {
    margin-top: 5rem;
    margin-bottom: 3rem;
}

.projects h2 {
    font-size: 4rem;
    font-weight: 400;
    text-transform: uppercase;
    color: #ffffff;
    font-family: 'gallient', sans-serif;

}

.project_items {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2.5rem;
    margin-top: 2rem;
}

.project_item {
    color: #ffffff;
    display: flex;
    /* width: 70%; */
    width: fit-content;
}

.project_item .img {
    position: relative;
    width: 10rem;
    height: 7rem;
    display: flex;
    /* gap: 1rem; */
    flex-direction: column;
    overflow-y: scroll;
    border-radius: 0.35rem;
    margin: auto;
    overflow-x: hidden;
}

.project_item .img::-webkit-scrollbar {
    display: none;
}

.img_scroll {
    position: relative;
    width: 10rem;
    height: 7rem;
    margin-right: 1rem;
}

.img_scroll::before {
    content: "";
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 4.44444vh;
    border-radius: 0.35rem;
    background: linear-gradient(0deg, rgb(14 14 18) 0%, rgba(12, 8, 15, 0.686) 26%, rgba(9, 9, 16, 0) 78%);
    background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #71548c);
    z-index: 1;
    pointer-events: none;
}

.project_item .img img {
    object-fit: cover;
    object-position: top;
    width: inherit;
    height: inherit;
    border-radius: 0.3rem;
    aspect-ratio: 16/11;
    margin-bottom: 0.5rem;
}

.project_item .img img:hover {
    cursor: pointer;
}

.project_item .scroll {
    text-orientation: sideways-right;
    writing-mode: vertical-rl;
    /* transform: rotate(179deg); */
    align-self: flex-start;
    font-size: 0.8rem;
    color: #B67DFF;
    margin-right: 0.2rem;
}

.project_item h3 {
    font-size: 1.2rem;
    font-weight: 500;
    width: fit-content;
}

.project_item p {
    color: #9D9D9D;
    max-width: 40rem;
    line-height: 1.5;
    /* font-size: 1.15rem; */
}

.project_item .tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
    gap: 0.5rem;
    width: fit-content;
}

.project_item .tags span {
    background-color: #29194A;
    color: #c08fff;
    display: block;
    padding: 0.25rem;
    border-radius: 1.5rem;
    padding-inline: 0.75rem;
    font-size: 0.8rem;
}

.image_viewer {
    display: none;
    justify-content: center;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 99999;
    background-color: #080a276c;
    backdrop-filter: blur(3px);
}

.image_viewer .relative {
    position: relative;
}

.imagg {
    overflow-y: scroll;
}

.image_viewer img {
    height: 100%;
    width: 100%;
    margin: auto;
    /* padding: 5rem; */
    border-radius: 1rem;
    object-fit: contain;
}

.image_viewer .wrap {
    height: 100%;
    width: 100%;
    margin: auto;
    padding: 5rem;
    object-fit: contain;
}

.image_viewer a {
    position: absolute;
    display: block;
    top: 5%;
    right: 5%;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    color: black;
    background-color: #ffffff;
    box-shadow:
        0px 2.1px 2.1px rgba(0, 0, 0, 0.008),
        0px 5px 5.1px rgba(0, 0, 0, 0.012),
        0px 9.3px 9.5px rgba(0, 0, 0, 0.015),
        0px 16.5px 17px rgba(0, 0, 0, 0.018),
        0px 31.3px 31.8px rgba(0, 0, 0, 0.021),
        0px 79px 76px rgba(0, 0, 0, 0.03);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: 0.3s ease;
}

.image_viewer a:hover {
    width: 6rem;
    height: 6rem;
}

.image_viewer a:hover svg{
    width: 40px;
    height: 40px;
    transition: 0.3s  ease;
}

.image_viewer a svg {
    vertical-align: middle;
    transition: 0.3s ease;
}

footer{
    margin-top: 3rem;
    padding: 2rem;
    display: grid;
    place-items: center;
    color: #b6b6b6;
    background-color: #0d113b33;
    backdrop-filter: blur(3px);
}

.social_links{
    position: fixed;
    top: 95%;
    left: 97%;
    transform: translate(-95%,-95%);
    padding: 1rem;
    z-index: 1100;
    background-color: #6861c20e;
    backdrop-filter: blur(71px);
    border-radius: 0.25rem;
}

.social_link{
    display: block;
    margin-block: 0.5rem;
}

.social_link svg {
    fill: #ffffff !important;
}

@media screen {
    @media (max-width: 1200px) {
        .project_item {
            width: 100%;
        }

        .project_item h3 {
            font-size: 1.1rem;
            font-weight: 500;
            width: fit-content;
        }

        .project_item p {
            color: #9D9D9D;
            width: auto;
            line-height: 1.5;
            font-size: 0.9rem;
        }


    }

    @media (max-width: 800px) {
        .project_item .img {
            width: 8rem;
            height: 5rem;
        }

        .img_scroll {
            width: 8rem;
            height: 5rem;
        }

        .image_viewer .wrap {
            padding: 1.5rem;
        }
    }

    @media (max-width: 650px) {
        .project_item {
            flex-direction: column;
        }

        .project_item .scroll {
            text-orientation: unset;
            writing-mode: unset;
            align-self: flex-start;
            margin-bottom: 0.2rem;
        }

        .project_item .img_scroll,
        .project_item .img {
            width: 15rem;
            height: 10rem;
        }

        .projects h2 {
            font-size: 2.5rem;
        }
    }
}