@import url(https://fonts.googleapis.com/css2?family=Fasthand&display=swap);body{padding:0;margin:0;overflow-y:scroll;overflow-x:hidden;width:100vw}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;max-width:100vw}nav{display:none;padding:30px;background-color:blue}nav a{font-weight:700;color:#2c3e50}nav a.router-link-exact-active{color:#42b983}.bios{margin:0;flex-direction:row;flex-wrap:wrap;overflow:hidden}.bios,.content{display:flex;position:relative}.content{-o-object-fit:contain;object-fit:contain;z-index:1;width:100%;justify-content:space-between;align-items:center;padding:2% 5%}.foto-container{width:35%}.foto1{width:100%;height:100%;-o-object-fit:contain;object-fit:contain;margin:0;position:fixed;top:0;left:0;z-index:-1}.data{width:65%;color:#fff;font-size:30px;font-weight:700;text-align:left}@media only screen and (max-width:768px){.foto-container{width:50%}.video{display:none}.foto1{width:100vh;max-width:150px;margin:0 auto}.data{width:100%;font-size:medium;text-shadow:none}}@media only screen and (max-width:480px){.foto-container{width:100%}.video{display:none}.foto1{width:80%;max-width:120px;margin:0 auto}.data{width:100%;margin-top:10px}}.container{max-width:90vw;margin:auto;padding:0 3rem;-o-object-fit:contain;object-fit:contain}.titulo{text-align:center;margin:50px 0;color:azure}.iconos{flex-wrap:wrap;gap:15px;margin-bottom:50px}.iconos,.iconos a{display:flex;justify-content:center}.iconos a{-o-object-fit:contain;object-fit:contain;align-items:center;width:120px;height:120px;background-color:#f5f5f5;border-radius:10px;transition:transform .3s ease;box-shadow:0 3px 6px rgba(0,0,0,.16)}.iconos a:hover{transform:translateY(-5px)}.iconos img{max-width:80%;max-height:80%}@media (min-width:768px){.projects-container{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;margin:2rem auto;max-width:1200px;color:#fff}.project-card{background-color:#fff;border-radius:.5rem;box-shadow:0 0 15px rgba(0,0,0,.1);display:flex;flex-direction:column;overflow:hidden;position:relative;width:calc(33.333% - 1rem);transition:all .3s ease-in-out}.project-card:hover{box-shadow:0 0 20px rgba(0,0,0,.2);transform:translateY(-5px)}.image{height:200px;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;width:100%}.project-details{color:#000;padding:1rem;display:flex;flex-direction:column;justify-content:space-between;height:100%}.project-details h3{color:#000;margin-top:0;margin-bottom:.5rem}.project-details p{color:#000;margin-top:0;margin-bottom:1rem}.project-details a{background-color:#62d2df;border-radius:.5rem;color:#fff;display:inline-block;font-weight:700;padding:.5rem 1rem;text-decoration:none;text-align:center;transition:all .3s ease-in-out}.project-details a:hover{background-color:#1e63b8}.project-details .video-button{background-color:#e85d04;margin-left:1rem}.project-details .video-button:hover{background-color:#c84b00}}@media (max-width:767px){.projects-container{display:flex;flex-direction:column;gap:2rem;margin:2rem auto;max-width:100%;color:#fff}.project-card{width:100%}.image{height:150px}}.floating-buttons{position:fixed;bottom:20px;left:20px;z-index:9999}.floating-button{display:block;width:60px;height:60px;border-radius:50%;background-color:#d411c1;color:#fdfdfd;border:none;margin-bottom:10px;cursor:pointer;transition:all .3s ease-in-out;animation:jump 1s ease-in-out infinite}.floating-button.jump-delayed-0{animation-delay:.4s}.floating-button.jump-delayed-1{animation-delay:.7s}.floating-button.jump-delayed-2{animation-delay:1s}@keyframes jump{0%{transform:translateY(0)}50%{transform:translateY(5px)}to{transform:translateY(0)}}.floating-button:hover{background-color:#fff;color:#1a1a1a;box-shadow:0 0 10px #1a1a1a}.floating-button.linkedin:hover{box-shadow:0 0 10px #0077b5}.floating-button.github:hover{box-shadow:0 0 10px #333}.floating-button.cv:hover{box-shadow:0 0 10px #f44336}.floating-button i{font-size:24px;line-height:60px;text-align:center}.floating-button.linkedin i{color:#0077b5}.floating-button.github i{color:#333}.floating-button.cv i{color:#f44336}.contact-button{display:flex;justify-content:center;margin-bottom:10px}.contact-button button{display:block;width:120px;height:40px;background-color:#1a1a1a;color:#fff;border:none;border-radius:20px;font-weight:500;font-size:16px;cursor:pointer;transition:all .3s ease-in-out;box-shadow:0 5px 10px rgba(0,0,0,.3)}.contact-button button:hover{background-color:#fff;color:#1a1a1a;box-shadow:0 5px 10px rgba(0,0,0,.3),0 0 10px #1a1a1a}@media (max-width:600px){.floating-button{width:50px;height:50px}.floating-button i{font-size:20px}.floating-button.cv{width:50px}.contact-button button{width:100px;height:30px;font-size:14px;opacity:.5}}.home{height:100vh}.bounce-enter-active{animation:bounce-in 2s}.bounce-leave-active{animation:bounce-in 2s reverse}@keyframes bounce-in{0%{transform:scaleX(0)}80%{transform:scaleX(1.1)}to{transform:scaleX(1)}}.bio{width:60%;top:70%;left:20%;color:#fff}.bio,.tech{opacity:1;position:absolute;z-index:1;height:-moz-fit-content;height:fit-content;margin:auto}.tech{width:80%;top:150%;padding:8rem}.projects{opacity:1;position:absolute;z-index:1;width:90%;height:-moz-fit-content;height:fit-content;margin:auto;top:220%;left:5%}.nobio{opacity:.5}.image-container{position:relative;height:100vh}.background-image{transition:opacity .5s ease-out;position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:contain;object-fit:contain;opacity:1;transform-origin:center center;transform:translateZ(0);background-size:contain;background-position:50%;background-repeat:no-repeat}.foreground-image{z-index:-1;position:absolute;top:100%;left:50%;width:98vw;max-width:98vw;height:1000vh;transform:translate(-50%,-50%)}.title{top:25%;font-size:5rem}.title,.title2{position:fixed;left:60%;transform:translate(-50%,-50%);z-index:9999;text-shadow:0 0 20px blue;transition:transform .5s ease-out;color:azure;font-family:Fasthand,cursive}.title2{top:50%;font-size:3rem}.title3{position:fixed;top:5%;left:60%;z-index:9999;transition:transform .5s ease-out;font-size:1rem;color:azure;font-family:Arial,Helvetica,sans-serif}.scroll,.title3{transform:translate(-50%,-50%)}.scroll{width:5%;height:10%;position:relative;top:70%;left:50%;right:0;z-index:9989;border-radius:50%;background-color:#fff}@media screen and (max-width:768px){.title{font-size:2rem}.projects{top:420%;left:1%}.tech{padding:3rem}}@media screen and (max-width:480px){.title{font-size:3rem;top:20%}.title2{font-size:2rem;top:50%}.title3{top:1%}.projects{top:420%;left:1%}}