.btn-containers .iphone-btn{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#000;border:2px solid #1a1a1a;border-radius:1rem;box-sizing:border-box;color:#fff;cursor:pointer;display:inline-block;font-family:Roobert,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji",Segoe UI Symbol;font-size:16px;font-weight:600;line-height:normal;min-height:60px;min-width:0;outline:none;padding:8px 16px;text-align:center;text-decoration:none;transition:all .3s cubic-bezier(.23,1,.32,1);user-select:none;-webkit-user-select:none;touch-action:manipulation;will-change:transform}.btn-containers{width:fit-content;position:absolute;z-index:1;display:flex;gap:1rem;flex-direction:column;align-items:center;justify-content:center;top:30px;left:10px;transition:right .5s}@media (max-width: 768px){.btn-containers{flex-direction:row;top:93%;left:50%;transform:translate(-50%)}}.btn-containers .iphone-btn:disabled{pointer-events:none}.btn-containers .iphone-btn:hover{box-shadow:#00000040 0 8px 15px;transform:translateY(-2px)}.btn-containers .iphone-btn:active,.btn-containers .iphone-btn:focus{box-shadow:none;transform:translateY(0);background-color:#0fff95;color:#000;border:none}.btn-containers .iphone-btn.active{background-color:#0fff95;color:#000;border:none}@media (max-width: 768px){.btn-containers .iphone-btn{padding:3px 6px;font-size:12px;min-height:50px}}.mobile-container{position:relative;overflow-y:hidden;margin:.25rem auto;border-radius:2rem;transition:width,height 1.5s}.mobile-container__inner{overflow-y:scroll;border-radius:2rem;width:95%;height:100%;margin:0 auto;border:10px solid #000000;background:#cccccc}.mobile-container__inner .notch{position:absolute;top:15px;left:50%;transform:translate(-50%);width:35%;height:25px;border-radius:2rem;background-color:#000;z-index:3}.mobile-container__inner .home-indicator{width:145px;height:12px;border-radius:3rem;background:#ffffff;position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:1}header{position:sticky;top:0;width:100%;background:rgba(255,255,255,.51);box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(2.9px);-webkit-backdrop-filter:blur(2.9px);border:1px solid rgb(255,255,255);color:#fff;min-height:5vh;z-index:2}header nav ul.large{padding-top:2rem;display:flex;align-items:center;justify-content:space-around;width:100%}header nav ul.large li{list-style:none}header nav ul.large li a{text-decoration:none;color:#000;font-weight:700}header nav ul.large li a:hover{color:#fc0}header nav div.small-container{width:100%;position:relative}header nav div.small-container ul.smalls{width:100%;left:0;display:flex;justify-content:center;flex-direction:column;align-items:center;padding-top:1rem;position:absolute;top:-100%;transition:transform .5s ease-in-out;transform:translateY(-110%);background-color:#0fff95;box-shadow:0 4px 30px #0000001a;backdrop-filter:blur(2.9px);-webkit-backdrop-filter:blur(2.9px)}header nav div.small-container ul.smalls.active{padding-top:40px;transform:translateY(0);z-index:1}header nav div.small-container ul.smalls li{list-style:none}header nav div.small-container ul.smalls li a{text-decoration:none;color:#000;font-weight:700;margin-bottom:.5rem}header nav div.small-container ul.smalls li a:hover{color:#fc0}header nav div.small-container button.button-toggle-nav{position:absolute;top:4px;right:10px;font-size:1.5rem;background:none;border:none;color:#fff;cursor:pointer;z-index:2}header nav div.small-container button.button-toggle-nav:hover{color:#000}header nav div.small-container button.button-toggle-nav .hamburger-menu,header nav div.small-container button.button-toggle-nav .close-btn{width:30px;height:30px}header nav div.small-container button.button-toggle-nav .hamburger-menu path,header nav div.small-container button.button-toggle-nav .close-btn path{stroke:#000;stroke-width:6;transition:all .5s ease-in-out}header nav div.small-container button.button-toggle-nav .hamburger-menu:hover path,header nav div.small-container button.button-toggle-nav .hamburger-menu:hover,header nav div.small-container button.button-toggle-nav .hamburger-menu.active,header nav div.small-container button.button-toggle-nav .close-btn:hover path,header nav div.small-container button.button-toggle-nav .close-btn:hover,header nav div.small-container button.button-toggle-nav .close-btn.active{stroke:#ad332f;fill:red}header nav div.small-container button.button-toggle-nav .hamburger-menu path{animation:colorChange 1.5s infinite alternate}@keyframes colorChange{0%{stroke:#2dc137}30%{stroke:#00000080}70%{stroke:#f70606}to{stroke:#000}}header nav div.small-container button.button-toggle-nav .hamburger-menu:hover path{animation:none;stroke:#000}#root{margin:0;padding:0}main{background:url(/assets/background-5712d621.jpg) center/cover no-repeat fixed transparent;max-height:auto;height:100vh;max-height:100vh;display:grid;place-content:center}.device-container{width:100vw}.contact-container{min-height:50vh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2rem}.contact-container .mypic-image{width:30%;height:30%;border-radius:50%;object-fit:cover;padding:.5rem 0}.contact-container .content{text-align:center}.contact-container .social-icons{display:flex;align-items:center;justify-content:center;gap:16px}.contact-container .social-icons svg{width:25px;height:25px}.contact-container .social-icons svg.linkedin:hover,.contact-container .social-icons svg.linkedin:hover path{fill:#2fa8ff;stroke:#2fa8ff}.contact-container .social-icons svg.github:hover,.contact-container .social-icons svg.github:hover path{fill:#80817e;stroke:#80817e}.contact-container .social-icons svg.whatsapp:hover,.contact-container .social-icons svg.whatsapp:hover path{fill:#2fff55;color:#2fff55}.contact-container .social-icons svg.gmail:hover,.contact-container .social-icons svg.gmail:hover path{fill:#ff2f8d;stroke:#ff2f8d}.contact-container .github-container{padding:20px;border-radius:8px;box-shadow:0 4px 6px #0000001a}.contact-container .github-container p{margin:0;font-size:16px;line-height:1.5}.contact-container .github-container p:first-child{font-weight:700}.contact-container .github-container p a{color:#0366d6;text-decoration:none;transition:all .5s ease-in-out}.contact-container .github-container p a:hover{text-decoration:none;color:#0fff95}.projects-container{max-width:800px;margin:0 auto}.projects-container h2{font-size:2rem;margin-bottom:20px}.projects-container .project-card{display:flex;flex-direction:column;align-items:center;margin-bottom:40px;box-shadow:0 0 10px #0000001a;padding:20px;border-radius:8px}.projects-container .project-card img{max-width:100%;height:auto;border-radius:8px;margin-bottom:20px}.projects-container .project-card .project-details{text-align:center}.projects-container .project-card .project-details h3{font-size:1.5rem;margin-bottom:10px}.projects-container .project-card .project-details p{color:#555;text-align:left}.projects-container .project-card .project-details .tech-stack{display:flex;justify-content:center;margin-bottom:15px}.projects-container .project-card .project-details .tech-stack .tech-item{position:relative}.projects-container .project-card .project-details .tech-stack img.tech-icon{width:30px;height:30px;margin-right:10px}.projects-container .project-card .project-details .tech-stack .tech-skill{position:absolute;top:-30px;left:0;padding:.5rem 1rem;background-color:#00000080;border-radius:.5rem;color:#fff;font-size:.75rem;opacity:0;transition:opacity .5s ease-in-out}.projects-container .project-card .project-details .tech-stack .tech-item:hover .tech-skill{opacity:1}.projects-container .project-card .project-details .project-links a{display:inline-block;margin-right:15px;color:#fff;text-decoration:none;font-weight:700;padding:8px 16px;background-color:#000;transition:background-color,color 1s ease;border-radius:10px}.projects-container .project-card .project-details .project-links a:hover{background-color:#fff;color:#000}.tech-container{display:flex;flex-direction:column;align-items:center;padding:20px;background-color:#ecf0f1;min-height:65vh}.first-content{text-align:center;margin-bottom:20px}.tech-stack{color:#f7f9fb;font-size:2rem;margin-bottom:10px}.technology-content{color:#f7f9fb}.image-container-first{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}.image-container-first img{width:40px;height:40px}.second-content{text-align:center;margin:20px 0}.second-content .tools{color:#f7f9fb;font-size:1.6rem}.img-trigger{width:100px;height:auto;transition:transform .2s ease-in-out}.img-trigger:hover{transform:scale(1.1)}.image-container-second{display:flex;flex-wrap:wrap;justify-content:space-around;gap:10px}.image-container-second img{width:40px;height:40px}.hero{width:90%;margin:1rem auto}.hero h1{text-align:center}.hero p{text-align:center;margin-bottom:1rem}.hero img{margin:1rem 10%;width:80%;object-fit:cover;border-radius:1rem}.hero a{color:#fff;background-color:#000;padding:8px 16px;width:80%;margin:0 auto;display:block;text-align:center;text-decoration:none;transition:background-color,color 1s ease;border-radius:8px}.hero a:hover{color:#000;background-color:#fff}body,*{margin:0;padding:0;box-sizing:border-box;font-size:16px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5}html{background:url(/assets/background-5712d621.jpg) center/cover no-repeat fixed transparent}::-webkit-scrollbar-thumb{background:transparent;border:none}::-webkit-scrollbar-track{background:transparent}
