* {
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family:"Archivo"
}

::selection {
    background-color:#986dff;
    color:#fff
}

ul,ol {
    list-style:none;
    margin:0;
    padding:0
}

a {
    text-decoration:none
}

img {
    max-width:100%;
    height:auto;
    display:block
}

p,h1,h2,h3,h4,h5,h6 {
    margin:0
}

button,input {
    border:0;
    font-family:"Archivo"
}

button:focus,input:focus {
    border:0
}

body {
    font-family:"Archivo";
    background-color:#fff;
    overflow-x:hidden
}

html {
    scroll-behavior:smooth;
    font-size:62.5%
}

::-webkit-scrollbar {
    width:8px
}

::-webkit-scrollbar-track {
    background-color:#111
}

::-webkit-scrollbar-thumb {
    background-color:#986dff;
    border-radius:8px
}

header {
    padding:0px 50px;
    background:#111;
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border-bottom:1px solid #101013;
    z-index:999;
    width:100%;position:fixed;
    top:0;
    left:0
}

@media screen and (max-width: 992px) {
    header {
        padding:0px 24px
    }
}

header .grid-layout nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    height:100px;
    padding:0px 8px
}

header .grid-layout nav img {
    width:150px
}

header .grid-layout nav .nav-list {
    list-style:none;
    display:flex
}

header .grid-layout nav .nav-list li {
    margin-left:48px
}

@media screen and (max-width: 992px) {
    header .grid-layout nav .nav-list li {
        margin-left:0px
    }
}

header .grid-layout nav .nav-list li a {
    color:#9ca3af;
    position:relative;
    font-size:1.8rem
}

header .grid-layout nav .nav-list li a::after {
    content:"";
    position:absolute;width:100%;
    transform:scaleX(0);
    height:1px;
    bottom:-7px;
    left:0;
    background:linear-gradient(270deg, #986dff 0%, #17161d 100%);
    transform-origin:bottom right;transition:transform .5s cubic-bezier(0.86, 0, 0.07, 1)
}

header .grid-layout nav .nav-list li a:hover::after {
    transform:scaleX(1);
    transform-origin:bottom left
}

header .grid-layout nav .nav-list li a:hover {
    color:#fff
}

.mobile-menu {
    display:none
}

.mobile-menu div {
    width:32px;
    height:1px;
    background-color:#fff;
    margin:8px;
    transition:.4s
}

.nav-list.active {
    visibility:initial;
    transition:1s all ease
}

@keyframes navLinkFade {
    from {
        opacity:0;
        transform:translateX(100px)
    }
    
    to {
        opacity:1;
        transform:translateX(0)
    }
}

.mobile-menu.active .line1 {
    transform:rotate(-45deg) translate(-8px, 8px)
}

.mobile-menu.active .line2 {
    opacity:0
}

.mobile-menu.active .line3 {
    transform:rotate(45deg) translate(-5px, -5px)
}

@media screen and (max-width: 992px) {
    body {
        overflow-x:hidden
    }
    
.nav-list {
    text-align:center;
    position:absolute;
    top:100px;
    right:0;
    width:100vw;
    height:100vh;
    z-index:999;
    background-color:#151515;
    flex-direction:column;
    padding-top:96px;
    visibility:hidden
}

header .grid-layout nav .nav-list li {
    opacity:0;margin-bottom:48px
}

header .grid-layout nav .nav-list li a {
    font-size:2.4rem
}

.mobile-menu {
    display:block
}
}

#s-home {
    padding:0px 50px;
    background-color:#111;
    position:relative
}

@media screen and (max-width: 992px) {
    #s-home {
        padding:100px 20px 0px 20px }
    }
    
    #s-home .grid-layout #home {
        display:flex;
        align-items:center;
        min-height:90vh;
        padding:200px 0px;
        overflow:hidden;
        width:100%
    }
    
    @media screen and (max-width: 992px) {
        #s-home .grid-layout #home {
            padding:0px}
        }
        
        #s-home .grid-layout #home #home-container-text {
            width:100%;
            flex-direction:column
        }
        
        @media screen and (max-width: 992px) {
            #s-home .grid-layout #home #home-container-text {
                display:flex;
                flex-direction:column;
                align-items:center;
                width:100%;
                text-align:center;
                padding:0px
            }
        }
        
        #s-home .grid-layout #home #home-container-text h1 {
            color:#fff;
            max-width:650px;
            line-height:140%;
            font-size:4rem;
            font-weight:500
        }
        
        @media screen and (max-width: 992px) {
            #s-home .grid-layout #home #home-container-text h1 {
                font-size:3.2rem
            }
        }

        #s-home .grid-layout #home #home-container-text h1 span {
            color:#986dff 
        }
        
        #s-home .grid-layout #home #home-container-text p {
            color:#9ca3af;
            font-size:2rem;
            max-width:600px;
            margin:40px 0px;
            font-weight:300;
            line-height:160%
        }
        
        #s-home .grid-layout #home #home-container-text a {
            display:flex;
            justify-content:center;
            align-items:center;
            background:#986dff;
            color:#fff;
            backdrop-filter:blur(10px);
            padding:20px 32px;
            max-width:300px;
            border-radius:4px;
            transition:all .4s ease;
            margin-top:30px;
            font-size:18px;
            font-weight:400
        }
        
        #s-home .grid-layout #home #home-container-text a:hover {
            padding:20px 45px;
            max-width:325px
        }
        
        #s-home .grid-layout #home #logo {
            position:absolute;
            right:-50px;
            top:50%;
            transform:translate(0%, -50%)
        }
        
        @media screen and (max-width: 1200px) {
            #s-home .grid-layout #home #logo {
                display:none
            }
        }
        
        #s-about {
            padding:72px 0px;
            background-color:#111
        }
        
        @media screen and (max-width: 1200px) {
            #s-about {
                padding:72px 20px
            }
        }
        
        #s-about .grid-layout>div {
            background-color:#151515;
            border:2px solid #1f1f1f;
            padding:24px;
            border-radius:4px;
            display:flex;
            justify-content:space-between;
            align-items:center;
            height:auto
        }
        
        @media screen and (max-width: 1200px) {
            #s-about .grid-layout>div {
                flex-wrap:wrap;
                gap:32px
            }
        }
        
        #s-about .grid-layout>div #creator-photo {
            width:47%;
            background-image:url("/assets/image/anime.svg");
            background-repeat:no-repeat;
            background-position:center;
            background-size:cover;
            border-radius:4px;
            height:500px
        }
        
        @media screen and (max-width: 1200px) {
            #s-about .grid-layout>div #creator-photo {
                width:100%;
                height:400px
            }
        }

        @media screen and (max-width: 992px) {
            #s-about .grid-layout>div #creator-photo {
                height:350px
            }
        }
        
        @media screen and (max-width: 768px) {
            #s-about .grid-layout>div #creator-photo {
                height:300px
            }
        }
        
        #s-about .grid-layout>div #creator-photo h3 {
            color:#111;
            background-color:#fff;
            padding:8px;
            border-radius:16px;
            width:180px;
            text-align:center;
            font-size:1.4rem;
            font-weight:500;
            margin:16px
        }
        
        #s-about .grid-layout>div div:nth-child(2) {
            width:49%
        }
        
        @media screen and (max-width: 1200px) {
            #s-about .grid-layout>div div:nth-child(2) {
                width:100%
            }
        }
        
        #s-about .grid-layout>div div:nth-child(2) h2 {
            font-size:4rem;
            font-weight:500;
            margin:16px 0px;
            color:#fff
        }
        
        @media screen and (max-width: 992px) {
            #s-about .grid-layout>div div:nth-child(2) h2 {
                font-size:3.2rem
            }
        }
        
        #s-about .grid-layout>div div:nth-child(2) h3 {
            font-size:1.8rem;
            font-weight:300;
            margin-bottom:16px;
            color:#fff
        }
        
        #s-about .grid-layout>div div:nth-child(2) h4 {
            font-size:2rem;
            font-weight:500;
            color:#986dff
        }
        
        #s-about .grid-layout>div div:nth-child(2) p {
            font-size:1.8rem;
            color:#9ca3af;
            line-height:160%;
            margin:32px 0px 48px 0px
        }
        
        #s-about .grid-layout>div div:nth-child(2) nav ul {
            display:flex;
            align-items:center;
            gap:16px
        }
        
        @media screen and (max-width: 1200px) {
            #s-about .grid-layout>div div:nth-child(2) nav ul {
                flex-wrap:wrap
            }
        }
        
        #s-about .grid-layout>div div:nth-child(2) nav ul a {
            background-color:#111;
            border:2px solid #1f1f1f;
            border-radius:6px;
            padding:16px
        }


        @media screen and (max-width: 1200px) {
            #s-about .grid-layout>div div:nth-child(2) nav ul a img {
                width:40px
            }
        }
        
        #s-about .grid-layout>div div:nth-child(2) nav ul a:hover {
            border-color:#986dff
        }
        
        #s-experience {
            background-color:#151515;
            color:#fff;
            padding:96px 48px
        }
        
        @media screen and (max-width: 992px) {
            #s-experience{padding:48px 24px
            }
        }


        #s-experience .grid-layout h2 {
            padding-bottom:24px;
            color:#fff;
            font-size:4rem;
            font-weight:500
        }
        
        #s-experience .grid-layout h2 span {
            color:#986dff
        }
        
        #s-experience .grid-layout #experience {
            margin-top:32px;
            display:flex;
            gap:40px
        }

        @media screen and (max-width: 1200px) {
            #s-experience .grid-layout #experience {
                flex-wrap:wrap
            }
        }
        
        #s-experience .grid-layout #experience .option-experience {
            display:flex;
            width:25%;
            flex-direction:column
        }
        
        @media screen and (max-width: 1200px) {
            #s-experience .grid-layout #experience .option-experience {
                width:100%
            }
        }
        
        #s-experience .grid-layout #experience .option-experience .activeExperience {
            border-left:4px solid #986dff;
            color:#986dff
        }
        
        #s-experience .grid-layout #experience .option-experience .activeExperience h3 {
            font-weight:600
        }
        
        #s-experience .grid-layout #experience .option-experience>div {
            padding:24px 32px;
            text-align:left;
            background-color:#111;
            border-left:4px solid #111
        }
        
        #s-experience .grid-layout #experience .option-experience>div:hover {
            cursor:pointer
        }
        
        #s-experience .grid-layout #experience .option-experience>div h3 {
            font-size:1.8rem;
            font-weight:400
        }
        
        #s-experience .grid-layout #experience .text-experience {
            width:75%
        }
        
        @media screen and (max-width: 1200px) {
            #s-experience .grid-layout #experience .text-experience {
                width:100%
            }
        }
        
        #s-experience .grid-layout #experience .text-experience>div {
            display:flex;
            align-items:center;
            justify-content:space-between
        }
        
        @media screen and (max-width: 1200px) {
            #s-experience .grid-layout #experience .text-experience>div {
                flex-wrap:wrap;
                gap:32px
            }
        }
        
        #s-experience .grid-layout #experience .text-experience>div h4 {
            font-size:2.4rem;font-weight:400
        }

        #s-experience .grid-layout #experience .text-experience>div p {
            font-size:1.8rem;
            color:#9ca3af
        }
        
        #s-experience .grid-layout #experience .text-experience h5 {
            font-size:2rem;margin:32px 0px;font-weight:500;color:#986dff
        }
        
        #s-experience .grid-layout #experience .text-experience p {
            font-size:2rem;
            line-height:160%;
            color:#9ca3af;
            font-weight:400
        }
        
        #s-projects {
            padding:96px 48px;
            text-align:center;
            background-color:#111
        }
        
        @media screen and (max-width: 992px) {
            #s-projects {
                padding:48px 24px
            }
        }
        
        #s-projects .grid-layout h2 {
            padding-bottom:24px;
            color:#fff;
            font-size:4rem;
            font-weight:500
        }
        
        #s-projects .grid-layout h2 span {
            color:#986dff
        }
        
        #s-projects .grid-layout #projects {
            margin:24px 0px;
            display:flex;
            justify-content:space-between;
            align-items:stretch;
            flex-wrap:wrap;
            text-align:left
        }
        
        #s-projects .grid-layout #projects .teslabank {
            border:1px solid #e51d37
        }
        
        #s-projects .grid-layout #projects .teslabank:hover {
            border:1px solid #e51d37
        }
        
        #s-projects .grid-layout #projects .naped {
            border:1px solid #00a3ff
        }
        
        #s-projects .grid-layout #projects .naped:hover {
            border:1px solid #00a3ff
        }
        
        #s-projects .grid-layout #projects .efront {
            border:1px solid #a6fb98
        }
        
        #s-projects .grid-layout #projects .efront:hover {
            border:1px solid #a6fb98
        }
        
        #s-projects .grid-layout #projects .steam {
            border:1px solid #536fed
        }
        
        #s-projects .grid-layout #projects .steam:hover {
            border:1px solid #536fed
        }
        
        #s-projects .grid-layout #projects>article {
            height:auto;
            padding:32px;
            margin:8px;
            flex-basis:calc(33% - 20px);
            flex-grow:1;
            border:1px solid #111;
            transition:1s all ease;
            background-color:#151515;
            height:auto
        }
        
        #s-projects .grid-layout #projects>article:hover {
            border:1px solid #986dff
        }
        
        @media screen and (max-width: 1200px) {
            #s-projects .grid-layout #projects>article {
                flex-basis:calc(50% - 20px)
            }
        }
        
        @media screen and (max-width: 768px) {
            #s-projects .grid-layout #projects>article {
                flex-basis:calc(100% - 20px)
            }
        }
        
        #s-projects .grid-layout #projects>article h3 {
            color:#fff;
            font-size:2.4rem;
            font-weight:500
        }
        
        #s-projects .grid-layout #projects>article p {
            line-height:24px;
            margin:24px 0px;
            color:#9ca3af;
            line-height:3.2rem;
            font-size:1.8rem
        }
        
        #s-projects .grid-layout #teslabank {
            color:#e51d37
        }
        
        #s-projects .grid-layout #teslabank::after {
            background:linear-gradient(270deg, #e51d37 0%, #17161d 100%)
        }
        
        #s-projects .grid-layout #naped {
            color:#00a3ff
        }
        
        #s-projects .grid-layout #naped::after {
            background:linear-gradient(270deg, #00a3ff 0%, #17161d 100%) 
        }
        
        #s-projects .grid-layout #efront {
            color:#a6fb98
        }
        
        #s-projects .grid-layout #efront::after {
            background:linear-gradient(270deg, #a6fb98 0%, #17161d 100%) 
        }
        
        #s-projects .grid-layout #steam {
            color:#536fed
        }
        
        #s-projects .grid-layout #steam::after {
            background:linear-gradient(270deg, #536fed 0%, #17161d 100%)
        }
        
        #s-projects .grid-layout a {
            color:#986dff;
            position:relative;
            font-size:2rem;
            font-weight:400
        }
        
        #s-projects .grid-layout a::after {
            content:"";
            position:absolute;
            width:100%;
            transform:scaleX(0);
            height:1px;
            bottom:-7px;
            left:0;
            background:linear-gradient(270deg, #986dff 0%, #17161d 100%);
            transform-origin:bottom right;
            transition:transform .5s cubic-bezier(0.86, 0, 0.07, 1)
        }
        
        #s-projects .grid-layout a:hover::after {
            transform:scaleX(1);
            transform-origin:bottom left
        }
        
        #s-projects .grid-layout a::after {
            content:"";
            position:absolute;
            width:100%;
            transform:scaleX(0);
            height:1px;
            bottom:-7px;
            left:0;
            transform-origin:bottom right;
            transition:transform .5s cubic-bezier(0.86, 0, 0.07, 1)
        }
        
        
        #s-projects .grid-layout a:hover::after {
            transform:scaleX(1);
            transform-origin:bottom left
        }
        
        #s-services {
            padding:96px 48px;
            background-color:#151515 
        }
        
        @media screen and (max-width: 992px) {
            #s-services {
                padding:48px 24px
            }
        }
        
        #s-services .grid-layout h2 {
            text-align:center;
            padding-bottom:24px;
            color:#fff;
            font-size:4rem;
            font-weight:500
        }
        
        #s-services .grid-layout h2 span {
            color:#986dff
        }
        
        #s-services .grid-layout #services {
            display:flex;
            height:auto;
            flex-wrap:wrap;
            margin:24px 0px
        }
        
        #s-services .grid-layout #services article {
            background-color:#111;
            height:auto;
            padding:32px;
            margin:8px;
            flex-basis:calc(33% - 20px);
            flex-grow:1;
            border:1px solid #111;
            transition:1s all ease;
            border:1px solid #1f1f1f;
            border-radius:4px
        }
        
        #s-services .grid-layout #services article:hover {
            border:1px solid #986dff
        }
        
        @media screen and (max-width: 1200px) {
            #s-services .grid-layout #services article {
                flex-basis:calc(50% - 20px)
            }
        }
        
        @media screen and (max-width: 768px) {
            #s-services .grid-layout #services article {
                flex-basis:calc(100% - 20px)
            }
        }
        
        #s-services .grid-layout #services article div {
            height:90px
        }
        
        #s-services .grid-layout #services article div img {
            width:70px
        }
        
        #s-services .grid-layout #services article h3 {
            padding:24px 0px;color:#fff;
            font-size:2.4rem;
            font-weight:500
        }

        #s-services .grid-layout #services article p {
            line-height:3.2rem;
            color:#9ca3af;
            font-size:1.8rem
        }
        
        #s-skills {
            padding:96px 48px;
            background-color:#111
        }
        
        @media screen and (max-width: 992px) {
            #s-skills {
                padding:48px 24px
            }
        }
        
        #s-skills .grid-layout #skills {
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap:wrap;
            height:auto;
            padding:8px
        }
        
        #s-skills .grid-layout #skills div,#s-skills .grid-layout #skills article {
            width:50%
        }
        
        @media screen and (max-width: 1200px) {
            #s-skills .grid-layout #skills div,#s-skills .grid-layout #skills article {
                width:100%
            }
        }
        
        #s-skills .grid-layout #skills #skills-text {
            min-height:400px
        }
        
        @media screen and (max-width: 768px) {
            #s-skills .grid-layout #skills #skills-text {
                min-height:auto
            }
        }
        
        #s-skills .grid-layout #skills #skills-text h2 {
            margin-bottom:32px; color:#fff;
            font-size:3.2rem;
            font-weight:500
        }
        
        #s-skills .grid-layout #skills #skills-text h2 span {
            color:#986dff
        }
        
        #s-skills .grid-layout #skills #skills-text .changeDescription {
            transition:2s all ease
        }
        
        @media screen and (max-width: 768px) {
            #s-skills .grid-layout #skills #skills-text .changeDescription {
                display:none
            }

        }
        
        #s-skills .grid-layout #skills #skills-text p {
            max-width:500px;
            line-height:3.2rem;
            color:#9ca3af;
            font-size:1.8rem
        }
        
        #s-skills .grid-layout #skills #skills-cards
        {
            display:flex;
            flex-wrap:wrap;
            gap:24px
        }
        
        @media screen and (max-width: 1200px) {
            #s-skills .grid-layout #skills #skills-cards {
                margin-top:48px
            }
        }
        
        #s-skills .grid-layout #skills #skills-cards article {
            display:flex;
            justify-content:space-between;
            align-items:center;
            flex-wrap:wrap;
            justify-content:center;
            width:20%;
            flex-grow:1;
            height:130px;
            background-color:#151515;
            position:relative;
            border:1px solid #1f1f1f;
            border-radius:4px;
            transition:1s all ease
        }
        
        #s-skills .grid-layout #skills #skills-cards article:hover {
            border:1px solid #986dff
        }
        
        @media screen and (max-width: 768px) {
            #s-skills .grid-layout #skills #skills-cards article {
                width:40%
            }
        }

        footer {
            width:100%;
            height:auto;
            background-color:#151515;
            color:#fff;
            padding:24px 0px
        }

        footer .grid-layout {
            display:flex;
            align-items:center;
            justify-content:space-between;
            width:100%
        }

        footer p {
            font-size:1.8rem
        }

        footer p a {
            font-weight:500;
            color:#986dff
        }
        
        footer img {
            width:32px
        }
        
        footer div {
            display:flex;
            align-items:center;
            gap:16px
        }
        
        @media screen and (max-width: 1200px) {
            footer .grid-layout {
                text-align:center;
                justify-content:center;
                flex-wrap:wrap;
                gap:48px
            }
            
            footer .grid-layout div {
                display:none
            }
        }
        
        .typewriter:after {
            content:"|";
            margin-left:8px;
            opacity:1;
            animation:blink 1s infinite;
            color:#986dff
        }
        
        @keyframes blink {
            100% {
                opacity:1
            }
            
            50% {
                opacity:0
            }
        }
        
        .grid-layout {
            max-width:1140px;
            margin:0 auto
        }
        /*# sourceMappingURL=style.css.map */