*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;scroll-behavior:smooth}body{background:#000}.is-visible{opacity:1;transform:none;visibility:visible}main{height:300svh;position:relative}.main-content{z-index:99}header{display:grid;place-items:center;width:100%;padding:0 40px;height:100px;position:fixed;top:0;z-index:999}header nav{display:flex;color:#fff;width:100%;justify-content:space-between}.nav-btns{display:flex;gap:10px;transition:.3s ease}.nav-btn{padding:10px 40px;font-size:.8444rem;cursor:pointer;border:none;outline:none;background:transparent;color:#fff;font-weight:700;position:relative;transition:all .5s;z-index:1}.nav-btn:before{content:"";position:absolute;top:0;left:0;width:5px;height:100%;background-color:#fff;z-index:-1;transition:all .5s}.nav-btn:hover:before{width:100%}.nav-btn:hover{color:#000}.nav-btn:active:before{background:#b9b9b9}.logo-container{transition:.3s ease}.first-move{opacity:70%;margin-right:40px;transition:.3s ease}.second-move{opacity:57%;margin-right:60px;transition:.3s ease}.third-move{opacity:37%;margin-right:80px;transition:.3s ease}.fourth-move{margin-right:100px;opacity:14%;transition:.3s ease}.last-move{display:none}.first-move-logo{opacity:70%;margin-left:40px;transition:.3s ease}.second-move-logo{opacity:57%;margin-left:60px;transition:.3s ease}.third-move-logo{opacity:37%;margin-left:80px;transition:.3s ease}.fourth-move-logo{margin-left:100px;opacity:14%;transition:.3s ease}.last-move-logo{display:none}.glow{color:#fff;animation:glow 1s ease-in-out infinite alternate}@-webkit-keyframes glow{0%{text-shadow:0 0 10px #fff,0 0 20px #fff,0 0 30px #7fff00,0 0 40px #006400,0 0 50px #006400,0 0 60px #006400,0 0 70px #006400}to{text-shadow:0 0 20px #fff,0 0 30px #00ff40,0 0 40px #00ff40 0 0 50px #adff2f,0 0 60px #adff2f,0 0 70px #adff2f,0 0 80px #adff2f}}.menu-btn{display:none;width:30px}.menu-container{z-index:999;list-style:none;display:flex;flex-direction:column;gap:20px;position:absolute;background:#0000009c;border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(9.6px);-webkit-backdrop-filter:blur(9.6px);border:1px solid rgba(0,0,0,.3);width:100%;top:-1200px;left:0;height:100svh;transition:.5s ease}.menu-show{z-index:999;list-style:none;display:flex;flex-direction:column;gap:20px;position:absolute;background:#0000009c;border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(9.6px);-webkit-backdrop-filter:blur(9.6px);border:1px solid rgba(0,0,0,.3);width:100%;top:0;left:0;height:100svh;transition:.5s ease}.menu-container a,.menu-show a{text-decoration:none;z-index:999}.menu-container .menu-item,.menu-show .menu-item{color:#fff;z-index:999;display:block;text-align:center;padding:20px}.menu-container h1,.menu-show h1{color:red;font-size:2rem;align-self:flex-end;padding:10px}@media screen and (max-width: 940px){.nav-btns{display:none}.menu-btn{display:block}}.skills{font-size:.7555rem}.particles-container{position:relative;width:100%;height:100svh}:root{--hue: 140;--bg: oklch(35% .3 var(--hue));--text: oklch(85% .1 var(--hue));--shadow: oklch(25% .2 var(--hue));--highlight: oklch(98% .05 var(--hue))}.highlighted-text-shadow{text-shadow:0 .15ch 15px var(--shadow),0 -2px 0 var(--highlight)}.home-container{height:100svh;padding:10px;display:grid;place-items:center;color:#fff;z-index:100}.home-content{width:min(100% - 20px,400px);display:flex;flex-direction:column;justify-content:space-around;height:100%;z-index:100;align-items:center}.img-wrapper{display:flex;align-items:center;flex-direction:column}.img-container{height:250px;width:250px;background:#fff;border-radius:50%;outline:15px solid #353935;object-fit:cover;overflow:hidden}.img-container img{object-fit:cover;aspect-ratio:1/1;width:250px;-webkit-filter:grayscale(100%);filter:grayscale(100%)}.slider{width:380px;max-width:100%;position:relative;overflow:hidden;height:50px;z-index:2}.list{display:flex}.list .item{width:50px;height:50px;position:absolute;left:100%;animation:autoRun 10s linear infinite;animation-delay:calc((10s / 9) * (var(--position) - 1))}.item img{aspect-ratio:1/1;width:100%}.home-info{display:flex;flex-direction:column;align-items:center;gap:25px}.home-info h1{text-align:center;font-size:clamp(1.2rem 3vw,2rem);letter-spacing:4px}@keyframes autoRun{0%{left:100%}to{left:-250px}}.slider:hover .item{animation-play-state:paused!important}.ready{--green: #1bfd9c;font-size:15px;padding:.7em 2.7em;letter-spacing:.06em;position:relative;font-family:inherit;border-radius:.6em;overflow:hidden;transition:all .3s;line-height:1.4em;border:2px solid var(--green);background:linear-gradient(to right,rgba(27,253,156,.1) 1%,transparent 40%,transparent 60%,rgba(27,253,156,.1) 100%);color:var(--green);box-shadow:inset 0 0 10px #1bfd9c66,0 0 9px 3px #1bfd9c1a;z-index:100;display:flex;align-items:center;gap:15px}.ready:hover{color:#82ffc9;box-shadow:inset 0 0 10px #1bfd9c99,0 0 9px 3px #1bfd9c33}.ready:before{content:"";position:absolute;left:-4em;width:4em;height:100%;top:0;transition:transform .4s ease-in-out;background:linear-gradient(to right,transparent 1%,rgba(27,253,156,.1) 40%,rgba(27,253,156,.1) 60%,transparent 100%)}.ready:hover:before{transform:translate(15em)}.dot{width:15px;height:15px;background-color:green;border-radius:50%;display:inline-block}@media screen and (max-width: 940px){.home-content{justify-content:center;gap:25px;width:100%}.slider{width:400px}.list .item{height:40px;width:40px}}@media screen and (max-width: 600px){.home-content{justify-content:center;gap:25px}.slider{width:320px}.list .item{height:40px;width:40px}}:root{--width: min(100% - 10px, 600px);--height: 300px}.slider-container{width:100%;position:relative;overflow:hidden;height:360px;z-index:2;margin:40px 0}.list-container{display:flex}.list-container .item-container{width:var(--width);height:var(--height);position:absolute;right:100%;animation:autoRun2 20s linear infinite;animation-delay:calc((20s / 5) * (var(--positions) - 1));border-radius:20px;overflow:hidden}.item-container img{width:100%;height:100%}@keyframes autoRun2{0%{right:100%}to{right:-1800px}}@keyframes autoRun3{0%{right:100%}to{right:-2500px}}@keyframes autoRun4{0%{right:100%}to{right:calc(var(--width) * -4)}}@media screen and (max-width: 1154px){.list-container .item-container{width:var(--width);height:var(--height);animation:autoRun4 20s linear infinite;animation-delay:calc((20s / 5) * (var(--positions) - 1));border-radius:20px;overflow:hidden}.item-container img{width:100%;height:100%}}@media screen and (max-width: 850px){.list-container .item-container{width:min(100% - 10px,500px);height:360px;animation:autoRun3 20s linear infinite;animation-delay:calc((20s / 5) * (var(--positions) - 1));border-radius:20px;overflow:hidden}.item-container img{width:100%;height:100%}}.projects{z-index:999;color:#fff;padding:100px 0;margin-inline:auto}.projects-container{z-index:999;display:grid;grid-template-columns:repeat(auto-fill,minmax(500px,1fr));place-items:center;gap:100px 0}.project-container{z-index:999;width:min(100% - 10px,500px);height:100%;display:grid;place-items:center;overflow:hidden}.project-container p{color:#d3d3d3;font-size:.866rem}.project-container img{width:min(100% - 10px,500px);height:250px;transition:.5s ease}.project-container .project-content{background:#ffffff38;border-radius:16px;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(5.9px);-webkit-backdrop-filter:blur(5.9px);border:1px solid rgba(255,255,255,.3);width:min(100%,550px);position:relative;padding:20px;display:flex;flex-direction:column;height:150px;justify-content:space-between;gap:5px;left:0;bottom:10%}.stacks-container{display:flex;gap:10px}.stack{background:#28282b;padding:5px;font-size:.6999rem;outline:.7px solid #fff;border-radius:5px}.top-right{position:absolute;top:0;right:0;height:50px;margin:10px}.top-right img{aspect-ratio:1/1;height:40px;width:40px}.soon{background:#28282b;padding:3px}.project-container:hover .web{scale:1.2;transform:.5s ease}a .link{color:#1a73e8;text-decoration:underline;cursor:pointer}a .link:hover{color:#fff}@media screen and (max-width: 500px){.projects-container{display:flex;flex-direction:column}.project-container{width:100%;position:relative;padding:0 20px}.project-container .project-content{position:static;height:100%}.top-right{position:absolute;top:0}}.contact{z-index:100;color:#fff;height:100svh;display:flex;flex-direction:column;justify-content:space-between}@media screen and (max-width: 998px){.contact{height:100%}}.contact-container{z-index:120;color:#fff;display:flex;flex:1}a{text-decoration:none}.resume{flex:1;display:grid;place-items:center}.resume-contents{display:flex;flex-direction:column;gap:35px}.resume-contents h1{font-size:clamp(2rem,5vw,4rem)}.contact-container form{flex:1;padding:10px;display:flex;flex-direction:column;gap:20px}.contact-btns{display:flex;flex-direction:column;gap:20px}/*! FORMS CSS */.input{background:none;border:1px solid #353535;outline:none;padding:11px 23px;font-size:16px;border-radius:50px;color:#fff;box-shadow:#8888882b 0 -23px 25px inset,#5151513b 0 -36px 30px inset,#0000001a 0 -79px 40px inset,#0000000f 0 2px 1px,#00000017 0 4px 2px,#00000017 0 8px 4px,#00000017 0 16px 8px,#00000017 0 32px 16px}textarea{background:none;border:1px solid #353535;outline:none;padding:11px 23px;font-size:16px;border-radius:20px;color:#fff;box-shadow:#8888882b 0 -23px 25px inset,#5151513b 0 -36px 30px inset,#0000001a 0 -79px 40px inset,#0000000f 0 2px 1px,#00000017 0 4px 2px,#00000017 0 8px 4px,#00000017 0 16px 8px,#00000017 0 32px 16px;resize:none;height:100%}.pair-elements{display:flex;gap:15px;padding-top:15px}.form-element{flex:1;display:flex;flex-direction:column;align-items:stretch;gap:10px}.form-element span{font-weight:600;font-size:1.2333rem}.boton-elegante{padding:15px 30px;border:2px solid #2c2c2c;background-color:#1a1a1a;color:#fff;font-size:1.2rem;cursor:pointer;border-radius:30px;transition:all .4s ease;outline:none;position:relative;overflow:hidden;font-weight:700;z-index:200;display:flex;align-items:center;gap:0 20px}.boton-elegante img{aspect-ratio:1/1;width:25px}.boton-elegante:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#ffffff40,#fff0 70%);transform:scale(0);transition:transform .5s ease}.boton-elegante:hover:after{transform:scale(4)}.boton-elegante:hover{border-color:#666;background:#292929}@media screen and (max-width: 998px){.contact-container{flex-direction:column;gap:30px}.contact-container form{margin-bottom:40px}textarea{height:250px}}@media screen and (max-width: 670px){.pair-elements{flex-direction:column}.contact-container form{margin-bottom:40px}textarea{height:250px}}footer{display:flex;justify-content:space-between;padding:20px 30px}.top-btn{width:140px;height:56px;overflow:hidden;border:none;color:#fff;background:none;position:relative;padding-bottom:2em;cursor:pointer;z-index:999}.top-btn>div,.top-btn>svg{position:absolute;width:100%;height:100%;display:flex}.top-btn:before{content:"";position:absolute;height:2px;bottom:0;left:0;width:100%;transform:scaleX(0);transform-origin:bottom right;background:currentColor;transition:transform .25s ease-out}.top-btn:hover:before{transform:scaleX(1);transform-origin:bottom left}.top-btn .clone>*,.top-btn .text>*{opacity:1;font-size:1.3rem;transition:.2s;margin-left:4px}.top-btn .clone>*{transform:translateY(60px)}.top-btn:hover .clone>*{opacity:1;transform:translateY(0);transition:all .2s cubic-bezier(.215,.61,.355,1) 0s}.top-btn:hover .text>*{opacity:1;transform:translateY(-60px);transition:all .2s cubic-bezier(.215,.61,.355,1) 0s}.top-btn:hover .clone>:nth-child(1){transition-delay:.15s}.top-btn:hover .clone>:nth-child(2){transition-delay:.2s}.top-btn:hover .clone>:nth-child(3){transition-delay:.25s}.top-btn:hover .clone>:nth-child(4){transition-delay:.3s}.top-btn svg{width:20px;right:0;top:50%;transform:translateY(-50%) rotate(-50deg);transition:.2s ease-out}.top-btn:hover svg{transform:translateY(-50%) rotate(-90deg)}.icon-flex{display:flex;align-items:center;gap:25px}.icon-flex p{z-index:999;color:#fff}@media screen and (max-width: 800px){footer{flex-direction:column;align-items:center;gap:35px}.icon-flex{flex-direction:column}}ul{list-style:none}.example-2{display:flex;align-items:center}.example-2 .icon-content{margin:0 10px;position:relative}.example-2 .icon-content .tooltip{position:absolute;top:-30px;left:50%;transform:translate(-50%);color:#fff;padding:6px 10px;border-radius:5px;opacity:0;visibility:hidden;font-size:14px;transition:all .3s ease}.example-2 .icon-content:hover .tooltip{opacity:1;visibility:visible;top:-50px}.example-2 .icon-content a{position:relative;overflow:hidden;display:flex;justify-content:center;align-items:center;width:50px;height:50px;border-radius:50%;color:#4d4d4d;background-color:#fff;transition:all .3s ease-in-out}.example-2 .icon-content a:hover{box-shadow:3px 2px 45px #0000001f}.example-2 .icon-content a svg{position:relative;z-index:1;width:30px;height:30px}.example-2 .icon-content a:hover{color:#fff}.example-2 .icon-content a .filled{position:absolute;top:auto;bottom:0;left:0;width:100%;height:0;background-color:#000;transition:all .3s ease-in-out}.example-2 .icon-content a:hover .filled{height:100%}.example-2 .icon-content a[data-social=whatsapp] .filled,.example-2 .icon-content a[data-social=whatsapp]~.tooltip{background-color:#128c7e}.example-2 .icon-content a[data-social=facebook] .filled,.example-2 .icon-content a[data-social=facebook]~.tooltip{background-color:#3b5998}.example-2 .icon-content a[data-social=instagram] .filled,.example-2 .icon-content a[data-social=instagram]~.tooltip{background:linear-gradient(45deg,#405de6,#5b51db,#b33ab4,#c135b4,#e1306c,#fd1f1f)}.example-2 .icon-content a[data-social=youtube] .filled,.example-2 .icon-content a[data-social=youtube]~.tooltip{background-color:red}
