*{color:#fff;margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif}html{scroll-behavior:smooth}:root{--primary-color:#00bfff;--secondary-color:#0080ff;--tertiary-color:oklch(65.476% .11501 213.794);--tertiary-color-bg:oklch(78.9% .154 211.53);--text-gray-color:#999;--border-color-buttons:#5f5f5f;--border-color-container:#2e2e2e;--border-color-container-hover:gray}body{background-color:#000;width:80%;margin:0 auto;padding-bottom:100px}.gm-icon{fill:#fff}header{z-index:1000;background-color:#0000;justify-content:center;width:100%;height:60px;transition:background-color .3s;display:flex;position:fixed;top:0;left:0}.header-right-side p{transition:-webkit-text-decoration 1s,text-decoration 1s;display:flex}.header-right-side p:hover{-webkit-text-decoration:underline gray;text-decoration:underline gray}header.scrolled{background-color:#141414d9}.header-container{justify-content:space-between;align-items:center;width:80%;height:100%;display:flex}.gm{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-size:1.8rem;font-weight:bolder}.header-right-side{color:#fff;flex-wrap:nowrap;justify-content:space-between;align-items:center;width:100%;max-width:400px;height:100%;font-size:1.1rem;display:flex}.header-right-side span{cursor:pointer}.header-right-side .btn-hire-me{color:#fff;background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));border:none;border-radius:5px;padding:7px 15px}@media (width<=768px){.header-container{justify-content:space-around;width:90%;display:flex}.gm{display:none}.header-right-side{width:80%;max-width:none;font-size:.9rem}.header-right-side .btn-hire-me{padding:5px 10px;font-size:.9rem}}.hero{color:#fff;padding-top:10%;display:flex}.hero-left-side{margin-right:15px}.contact-buttons-container{z-index:100}.availability{color:var(--tertiary-color);border:.5px solid;border-radius:20px;padding:8px;display:inline-block}.hero-title{margin-bottom:15px;font-size:5rem}.developer-name{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:bolder;display:inline-block}.profession{color:#a1a1a1;margin-top:10px;font-size:2rem}.about{color:#d3d3d3;width:80%;margin-top:25px;margin-bottom:25px;font-size:1.1rem}.btn-actions-container{margin-bottom:30px;display:flex}.btn-view-projects{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:space-around;align-items:center;width:140px;margin-right:10px;padding:15px 10px;font-size:.9rem;font-weight:700;transition:box-shadow .5s;display:flex}.btn-view-projects:hover{box-shadow:0px 10px 15px -2px var(--tertiary-color)}.btn-view-projects:hover .right-arrow-svg{transform:translate(3px)}.right-arrow-svg{width:18px;height:18px;transition:transform .5s}.get-in-touch{color:#fff;cursor:pointer;background-color:#000;border:1px solid gray;border-radius:10px;align-self:center;height:100%;padding:0 20px;font-weight:700;transition:border-color .5s,background .5s}.get-in-touch:hover{border-color:var(--tertiary-color);background:linear-gradient(135deg,#00bfff26,#0000)}.btn-github,.btn-linkedin,.btn-email{cursor:pointer;background-color:#000;border:1px solid #5f5f5f;border-radius:5px;margin-right:15px;padding:7px 10px;transition:border-color .5s,background .5s}.btn-github:hover,.btn-linkedin:hover,.btn-email:hover{border-color:var(--tertiary-color);background:linear-gradient(135deg,#00bfff26)}.github-icon,.linkedin-icon,.email-icon{stroke:#fff;width:20px;height:20px}.linkedin-icon{fill:#fff;stroke:#fff}.right-side{justify-content:center;align-items:center;width:100%;max-width:400px;display:flex}.user-profile-container{justify-content:center;align-items:center;display:flex}.user-profile{object-fit:contain;border-radius:20px;width:500px}@media (width<=1024px){.hero{text-align:center;flex-direction:column-reverse;align-items:center;padding-top:15%}.hero-left-side{flex-direction:column;align-items:center;margin-top:40px;margin-right:0;display:flex}.hero-title{font-size:3.5rem}.profession{font-size:1.5rem}.about{text-align:center;width:95%}.btn-actions-container{justify-content:center}.right-side{max-width:300px}.user-profile{width:300px;height:300px}}@media (width<=768px){.hero{padding-top:30%}.availability{display:none}.hero-title{font-size:2.5rem}.profession{font-size:1.2rem}.user-profile{width:240px;height:135px}.about{font-size:1rem}}main{color:#fff;margin-top:100px}.section-label{align-items:center;display:flex}.section-label:before{content:"";background:linear-gradient(90deg,#0000,gray);flex:1;height:1px;margin-right:15px}.section-label:after{content:"";background:linear-gradient(270deg,#0000,gray);flex:1;height:1px;margin-left:15px}.section-label span{color:var(--primary-color);letter-spacing:3px;text-transform:uppercase;white-space:nowrap;font-size:.8rem}.brief-description-container{flex-direction:column;justify-content:center;align-items:center;margin-top:20px;display:flex}.brief-description-container h1{font-size:3rem}.brief-description-container p{color:#d3d3d3;margin-top:15px}.projects-grid{grid-template-columns:repeat(2,1fr);gap:30px;margin-top:40px;display:grid}.project-card{border:1px solid #2e2e2e;border-radius:20px;transition:border-color .4s}.arrow-up-right-icon{cursor:pointer;stroke:#999;width:20px;height:20px;transition:transform .4s}.project-card:hover{border-color:gray}.project-card:hover .arrow-up-right-icon{stroke:var(--tertiary-color);transform:translate(4px,-4px)}.project-image-container{border-top-left-radius:20px;border-top-right-radius:20px;height:250px;position:relative;overflow:hidden}.project-card:hover .project-image{transition:transform .4s;transform:scale(1.05)}.project-image-container:after{content:"";background:linear-gradient(#1e1e1e1a 0% 70%,#1e1e1e99 100%);border-top-left-radius:20px;border-top-right-radius:20px;position:absolute;inset:0}.project-image{object-fit:cover;border-top-left-radius:20px;border-top-right-radius:20px;width:100%;height:250px;transition:transform .4s}.project-details{padding:20px 30px}.project-name-container{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.project-description{color:#999;margin-bottom:15px}.techs-container{margin-bottom:25px}.techs{color:#d3d3d3;background-color:#191919;border:1px solid #2e2e2e;border-radius:15px;margin-right:10px;padding:3px 10px;font-size:.9rem}.open-link-icon{width:20px;stroke:var(--tertiary-color);margin-right:7px}.project-buttons-container{align-items:center;display:flex}.project-buttons-container span{color:oklch(65.476% .11501 213.794)}.live-text{margin-right:4px}.btn-live-demo{color:var(--tertiary-color);border:none;border:1px solid var(--tertiary-color);cursor:pointer;background:linear-gradient(135deg,#00bfff26);border-radius:8px;align-items:center;margin-right:10px;padding:8px 17px;transition:background-color .4s;display:flex}.btn-live-demo:hover{background-color:#00bfff3d}.btn-git-link{color:#d3d3d3;cursor:pointer;background-color:#000;border:1px solid #2e2e2e;border-radius:8px;align-items:center;padding:8px 17px;transition:color .4s,border-color .4s;display:flex}.github-icon-code{stroke:#d3d3d3;width:20px;height:20px;margin-right:7px;transition:stroke .4s}.btn-git-link:hover{color:#fff;border-color:gray}.btn-git-link:hover .github-icon-code{stroke:#fff}a{text-decoration:none}.page-scroll-container{opacity:0;text-align:center;justify-content:center;align-items:center;display:flex}.page-circle{background-color:#fff;border-radius:50%;width:8px;height:8px;margin-right:10px;transition:background-color .3s,transform .3s}.page-circle.active{background-color:var(--tertiary-color);transition:background-color .3s,transform .3s;transform:scale(1.3)}@media (width<=1024px){.projects-grid{grid-template-columns:repeat(1,1fr)}}@media (width<=768px){.projects-grid{scroll-snap-type:x mandatory;scrollbar-width:none;perspective:1000px;gap:20px;padding:20px 10vw;display:flex;overflow:auto hidden}.projects-grid::-webkit-scrollbar{display:none}.project-card{scroll-snap-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#ffffff08;border:1px solid #ffffff1a;min-width:75vw}.project-image-container{height:180px}.live-text,.project-description{display:none}.brief-description-container h1{text-align:center;font-size:2.2rem}.brief-description-container p{text-align:center;font-size:1rem}.techs-container{flex-wrap:wrap;gap:10px;display:flex}.techs{margin-right:0}.project-buttons-container{justify-content:space-between;align-items:center;gap:15px;width:200px;display:flex}.btn-live-demo,.btn-git-link{justify-content:center;margin-right:0}.page-scroll-container{opacity:1}}.skills-expertise-title{text-align:center;margin-top:100px}.skills-description{text-align:center;color:var(--text-gray-color);margin:25px 0}.section-label-skills{margin-top:75px}.skills-grid{grid-template-columns:repeat(2,1fr);gap:30px;display:grid}.skill-card-frontend,.skill-card-tools,.skill-card-concepts-techniques{border-radius:10px;padding:20px;transition:background-color .4s}.skill-title-container{align-items:center;margin-bottom:25px;display:flex}.skill-tags-container{flex-wrap:wrap;justify-content:center;row-gap:10px;display:flex}.skill-card-frontend{border:1px solid var(--tertiary-color);background:linear-gradient(135deg,#00bfff26)}.skill-card-frontend:hover{background-color:oklab(71.5% -.116822 -.0824726/.1)}.skill-card-tools{background-color:#1a1023;border:1px solid #b158ff}.skill-card-tools:hover{background-color:#251433}.skill-card-concepts-techniques{border:1px solid var(--primary-color);background-color:#0d1623}.skill-card-concepts-techniques:hover{background-color:#11213c}.code-icon,.tools-icon,.method-icon{border-radius:5px;width:25px;height:25px;margin-right:15px;padding:10px}.code-icon{stroke:var(--tertiary-color);background-color:#00bfff26}.tools-icon{fill:#c179fe;background-color:#281539}.method-icon{fill:var(--primary-color);background-color:#102139}.react-icon,.js-icon,.html-icon,.css-icon,.vite-icon,.axios-icon,.git-icon,.github-icon-skill,.vercel-icon,.vscode-icon,.npm-icon{width:40px;height:40px;margin-right:30px}.axios-icon{width:70px}.npm-icon{width:50px;height:50px}.vercel-icon,.github-icon-skill{stroke:#fff}.skill-tag{border:1px solid var(--border-color-buttons);color:#d3d3d3;background-color:#191919;border-radius:5px;margin-right:10px;padding:5px 8px;font-size:.8rem}.page-scroll-skills{opacity:0;justify-content:center;align-items:center;display:flex}.skills-dot{background-color:#fff;border-radius:50%;width:8px;height:8px;margin-right:10px;transition:background-color .3s,transform .3s}.skills-dot.active{background-color:var(--tertiary-color);transform:scale(1.3)}@media (width<=1024px){.skills-grid{grid-template-columns:1fr}}@media (width<=768px){.page-scroll-skills{opacity:1;margin-top:8px}.skills-expertise-title{text-align:center;margin-top:70px}.skills-grid{scrollbar-width:none;scroll-snap-type:x mandatory;perspective:1000px;gap:20px;padding-bottom:10px;display:flex;overflow:auto hidden}.skill-card-frontend,.skill-card-tools,.skill-card-concepts-techniques{scroll-snap-align:center;background-color:#080808;background-image:none;flex-direction:column;flex-shrink:0;justify-content:space-around;align-items:center;width:250px;display:flex}.skill-card-frontend:hover,.skill-card-tools:hover,.skill-card-concepts-techniques:hover{background-color:#080808}.skill-title-container{text-align:center;flex-direction:column;margin-bottom:15px}.code-icon,.tools-icon,.method-icon{margin-bottom:10px;margin-right:0}.skill-tags-container{grid-template-columns:repeat(2,1fr);justify-items:center;row-gap:15px;width:100%;display:grid}.skill-tag{text-align:center;align-items:center;margin-right:0;padding:5px;display:flex}.react-icon,.js-icon,.html-icon,.css-icon,.vite-icon,.axios-icon,.git-icon,.github-icon-skill,.vercel-icon,.vscode-icon,.npm-icon{width:30px;height:30px;margin-right:0}.axios-icon{width:50px;height:50px}}.section-label-contact{z-index:100;align-items:center;margin-top:100px;display:flex}.section-label-contact span{color:var(--primary-color);letter-spacing:3px;text-transform:uppercase;white-space:nowrap;font-size:.8rem}.section-label-contact:before{content:"";background:linear-gradient(90deg,#0000,gray);flex:1;height:1px;margin-right:15px}.section-label-contact:after{content:"";background:linear-gradient(270deg,#0000,gray);flex:1;height:1px;margin-left:15px}.contact-title{text-align:center;margin-top:30px;font-size:3rem}.amazing{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;font-weight:bolder}.contact-description{text-align:center;color:var(--text-gray-color);margin-top:30px;font-size:1.3rem}.contact-container{justify-content:space-between;margin-top:50px;padding-left:8%;padding-right:8%;display:flex}.contact-left-side{flex:1;margin-right:25px}.get-in-touch-tag{font-size:1.2rem;font-weight:700}.email-container,.phone-container,.location-container{border:1px solid var(--border-color-container);background-color:#0c0f10;border-radius:10px;flex-direction:row;align-items:center;margin-top:20px;padding:15px;transition:border-color .4s;display:flex}.email-container:hover,.phone-container:hover,.location-container:hover{border-color:#1c616e}.email-container:hover .email-icon-contact,.phone-container:hover .phone-icon,.location-container:hover .location-icon{background-color:#0f343b}.email-icon-contact,.phone-icon,.location-icon{width:25px;height:25px;stroke:var(--primary-color);background-color:#00bfff26;border-radius:5px;margin-right:15px;padding:10px;transition:background-color .4s}.email-tag,.phone-tag,.location-tag{color:var(--text-gray-color);margin-bottom:2px;font-size:.9rem}.follow-me{color:var(--text-gray-color);margin-top:25px}.follow-me-buttons-container{margin-top:10px}.btn-github-contact,.btn-linkedin-contact,.btn-threads-contact{border:1px solid, var(--border-color-container);cursor:pointer;background-color:#0c0f10;border-radius:5px;margin-right:15px;padding:8px;transition:transform .4s,border-color .4s}.btn-github-contact:hover,.btn-linkedin-contact:hover,.btn-threads-contact:hover{border-color:var(--border-color-container-hover);transform:scale(1.1)}.github-icon-contact,.linkedin-icon-contact,.threads-icon-contact{width:20px;height:20px}.start-a-project-tag{margin-bottom:20px;font-size:1.2rem;font-weight:700}.contact-form-description{color:var(--text-gray-color);margin-bottom:25px}.contact-right-side{box-sizing:border-box;background-color:#111;border:1px solid #ffffff1a;border-radius:15px;flex-direction:column;flex:1;justify-content:space-between;margin-left:25px;padding:25px;transition:border-color .4s;display:flex}.contact-right-side:hover{border-color:#464646}.inputs-container{flex-direction:column;flex:1;justify-content:space-between;gap:12px;display:flex}.inputs-container input,.inputs-container textarea{color:#fff;box-sizing:border-box;background-color:#1a1a1a;border:1px solid #ffffff1a;border-radius:10px;outline:none;width:100%;padding:14px;font-size:1rem;transition:border-color .4s,box-shadow .4s}.inputs-container input:focus,.inputs-container textarea:focus{border-color:var(--primary-color);outline:none;box-shadow:0 0 8px #00bfff4d}.inputs-container textarea{resize:none}.inputs-container input::placeholder,.inputs-container textarea::placeholder{color:gray}.btn-send-message{background:linear-gradient(135deg, var(--primary-color), var(--secondary-color));color:#fff;cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;width:100%;padding:14px;font-size:1rem;transition:box-shadow .3s;display:flex}.btn-send-message:hover{box-shadow:0px 10px 15px -8px var(--tertiary-color)}.send-message-icon{stroke:#fff;width:20px;height:20px;margin-left:10px;transition:transform .3s}.btn-send-message:hover .send-message-icon{transform:translate(4px)}@media (width<=1024px){.contact-container{flex-direction:column;align-items:center}.contact-left-side{width:100%;max-width:600px;margin-bottom:40px;margin-right:0}.contact-right-side{width:100%;max-width:600px;margin-left:0}}@media (width<=768px){.contact-container{padding-left:0;padding-right:0}.contact-title{font-size:2rem}.contact-description{padding:0 15px;font-size:1rem}.get-in-touch-tag,.follow-me{text-align:center}.follow-me-buttons-container{justify-content:center;display:flex}.btn-github-contact,.btn-linkedin-contact,.btn-threads-contact{margin:0 10px}.section-label-contact{margin-top:70px}}@media (width<=370px){.email-left-side,.phone-left-side,.location-left-side{display:none}}hr{background-color:var(--border-color-container);border:none;height:1px;margin-top:80px}.footer-description{text-align:center;color:var(--text-gray-color);margin-top:30px;font-size:1.1rem}@media (width<=768px){hr{margin-top:50px}.footer-description{font-size:.9rem}}
