*{padding:0;margin:0;box-sizing:border-box;font-family:"Archivo"}
::selection{background-color:#3884c2;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:#3884c2;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, #3884c2 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:#3884c2}

#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:#3884c2;
    color:#fff;
    backdrop-filter:blur(10px);
    padding:20px 32px;
    max-width:250px;
    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:270px}

#s-home .grid-layout #home #logo{
    position:absolute;
    right:10vw;
    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("../image/foto-iuricode.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:#3884c2}
#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:#3884c2}
#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:#3884c2}
#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 #3884c2;color:#3884c2}
#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:#3884c2}
#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:#3884c2}
#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 #3884c2}
@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:#3884c2;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, #3884c2 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:#3884c2}
#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 #3884c2}
@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:#3884c2}
#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 #3884c2}
@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:#3884c2}
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:#3884c2}
@keyframes blink{100%{opacity:1}
50%{opacity:0}
}
.grid-layout{max-width:1140px;margin:0 auto}
/*# sourceMappingURL=style.css.map */