@import"https://fonts.googleapis.com/css2?family=Anta&family=Workbench&display=swap";@import"https://fonts.cdnfonts.com/css/sprite-graffiti";.content{position:relative;height:91vh;display:flex;justify-content:center;padding-top:5rem;text-align:center}.content h1{font-family:Workbench,sans-serif}.content .personalContainer{display:flex;flex-direction:column;align-items:center;height:fit-content;width:100%}.content .personalContainer .lastName{text-transform:uppercase;color:#c9f1c5;padding:1rem 0;font-weight:700;height:fit-content;text-shadow:5px 5px #33857c;color:#151533;display:flex;flex-direction:column;text-align:center}.content .personalContainer .lastName span{font-size:4rem;text-shadow:6px 8px rgb(241,196,111);padding:5px;letter-spacing:2px}.content .personalContainer .logoIcon{padding:1rem 0}.content .personalContainer .logoIcon .spinnerLogoIcon{transform-origin:center center;font-size:5rem;color:#151533}.content .personalContainer .animatedText{font-size:1.1rem;font-family:Workbench,"sans-serif",cursive;padding:5px 0;text-shadow:3px 2px #33857c;letter-spacing:1px;height:100px;display:flex;flex-direction:column;gap:1rem;text-transform:uppercase}.content .personalContainer .animatedText .firstName{overflow:hidden;word-wrap:break-word;white-space:nowrap;animation:typing 4s steps(60) forwards}.content .personalContainer .animatedText .title{overflow:hidden;word-wrap:break-word;white-space:nowrap;animation:typingTitle 8s steps(60) forwards infinite;animation-delay:4s;opacity:0}@keyframes typing{0%{width:0}to{width:100%}}@keyframes typingTitle{0%{opacity:1;width:0}to{opacity:1;width:100%}}.content .shadowBlackImg{position:absolute;z-index:2;width:100%;bottom:0;left:0;height:300px}.content .rightImg{position:absolute;z-index:1;right:0;bottom:0;width:700px;height:400px}.content .tiger{width:400px;height:200px;position:absolute;bottom:10%;transform:rotateY(180deg)}.parallaxRowLine{display:flex;justify-content:center;align-items:center;padding-top:.5rem}.parallaxRowLine .parallaxLine{position:relative;height:1px;background-color:#33857c;filter:brightness(150%);transform-origin:center center;width:40vw}.parallaxRowLine .parallaxSpace{position:absolute;height:max-content;width:60px;display:flex;justify-content:center;align-items:center;background-color:#151533}.parallaxRowLine .parallaxSpace .BsTriangleHalfIcon{color:#33857c;filter:brightness(150%)}@media(max-width:567px){.shadowBlackImg{max-height:300px}.rightImg{max-height:350px}}.navList{z-index:2;background-color:#151533;align-items:center;display:flex;font-size:1rem;padding:1rem;position:absolute;bottom:0}.navList .logo{color:#c9f1c5;display:flex;align-items:center;font-family:Workbench,sans-serif}.navList .logo a{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem}.navList .logo a .logoIcon{width:50px;height:50px;color:#c9f1c5;transform-origin:center center}.navList .logo a span{font-size:1.3rem}.navList nav{width:80%;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;column-gap:4rem}.navList nav a{color:#c9f1c5;text-decoration:none;letter-spacing:2px;font-weight:700;font-size:1rem}.navList nav a:first-letter{font-size:1.5rem}.navList nav a:hover{cursor:pointer;transform:scale(1.2)}.navList .burgerMenu{transition:all .3s ease;position:sticky;left:100%;width:50px;height:50px;display:none}.navList .burgerMenu .menuIcon{cursor:pointer;width:50px;height:50px}.navList .menuOpen{transform:translate(0);width:50%;padding-right:1rem;background-color:#151533;transition:all .3s linear}.navList .menuOpen div{position:absolute;top:2%;right:10%}.navList .menuOpen div .menuIcon{cursor:pointer;width:30px;height:30px;color:#c9f1c5}.navList .menuOpen div .menuIcon:hover{transform:scale(1.2)}.navList .menuOpen a{font-size:1.4rem;position:relative}.navList .menuOpen a:first-letter{font-size:1.8rem}.navList .menuOpen a:after{content:"";position:absolute;height:1px;width:100%;bottom:0;left:0;background-color:#c9f1c5}.sticky{position:sticky;top:0}@media(max-width:768px){.navList .burgerMenu{display:block}.navList .burgerMenu .menuIcon{color:#c9f1c5}.menu{display:flex;flex-direction:column;justify-content:center;align-items:center;width:50%;height:110%;position:fixed;row-gap:3rem;top:0;right:0;transition:all step-start;transform:translate(100%)}}.pageProjects{padding:1rem 2rem;background-color:#151533;text-align:center;padding:0}.pageProjects .projects{place-items:center;height:90vh;display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem;margin:1rem;text-align:center;overflow-x:hidden}.pageProjects .projects .project{background-color:#242457;height:100px;width:100%;display:flex;justify-content:center;align-items:center;border-radius:5px;color:#c9f1c5;box-shadow:-5px 5px 3px -4px gray inset;font-family:Anta;cursor:pointer}.pageProjects .projects .project h4{padding:5px;font-size:.9rem}.pageProjects .projects .project:active{box-shadow:5px -5px 3px -4px gray inset}@media not (max-width:950px){.pageProjects .projects{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.pageProjects .projects .project{height:100%}.pageProjects .projects .project h4{font-size:1.2rem}}.popupContainer{display:flex;flex-direction:column;justify-content:center;align-items:center}.popupContainer h3{padding:10px 0;color:#fad02c}.popupContainer .popUpImage{height:150px;width:300px;border-radius:10px}.popupContainer .popUpImage img{height:150px;width:100%;border-radius:10px}.popupContainer .tags{display:flex;gap:1rem;padding:1rem;flex-wrap:wrap;justify-content:center;font-family:Workbench,sans-serif}.popupContainer .tags .tag{border-radius:10px;text-align:center;font-weight:700;padding:10px;font-size:20px}.popupContainer .tags .tag.typescript{color:#2e8bc0;background-color:#2e8bc033}.popupContainer .tags .tag.react{color:#0ff;background-color:#0ff3}.popupContainer .tags .tag.express{color:#b1d4e0;background-color:#b1d4e080}.popupContainer .tags .tag.scss{color:#ffaebc;background-color:#ffaebc80}.popupContainer .tags .tag.sqlite{color:#4f0;background-color:#44ff0080}.popupContainer .tags .tag.mongodb{color:#18a558;background-color:#18a55880}.popupContainer .tags .tag.html5{color:#e55b13;background-color:#e55b1380}.popupContainer .tags .tag.css3{color:#5082ef;background-color:#5082ef4d}.popupContainer .tags .tag.javascript{color:#fad02c;background-color:#fad02c80}.popupContainer .tags .tag.ejs{color:#cb0e55;background-color:#cb0e554d}.popupContainer .tags .tag.tailwind{color:#1592b4;background-color:#1592b480}.popupContainer .tags .tag.nextJs{color:#f26127;background-color:#f2612780}.popupContainer .tags .tag.cypress{color:#beb1b0;background-color:#beb1b080}.popupContainer .tags .tag.vitest{color:#f8d210;background-color:#76b94780}.popupContainer .tags .tag.postgres{color:#f36187;background-color:#f3618780}.popupContainer .tags .tag.strapi{color:#beb9c0;background-color:#beb9c080}.popupContainer .row{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem}.popupContainer .row .icons{display:flex;justify-content:space-evenly;width:100%}.popupContainer .row .icons .icon{display:flex;font-size:2.5rem;color:#5082ef}.popupContainer .row .icons .icon.ic1:hover,.popupContainer .row .icons .icon.ic2:hover{color:#c9f1c5;cursor:pointer}.popupContainer .row .icons .notUrl{color:red;cursor:auto}.popupContainer .row .description{color:gray;font-weight:700;font-family:Anta}.pageSkills{padding:1rem 2rem;background-color:#151533;padding:10px}.pageSkills .skills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding-bottom:1rem}.pageSkills .skills .skill{display:flex;flex-direction:column;align-items:center;text-transform:uppercase}.pageSkills .skills .skill .skillImg{display:flex;gap:1rem;justify-content:center;align-items:center;flex-wrap:wrap;width:100%;padding:20px 0}.pageSkills .skills .skill .skillImg img{width:60px;aspect-ratio:1}.pageSkills .skills .skill .title{font-size:1.7rem;font-weight:700;padding:1rem;background-color:#80808026;width:100%}.pageSkills .skills .frameworks{background-color:#5082ef4d;grid-column-start:1;grid-column-end:3;grid-row-start:5;grid-row-end:10}.pageSkills .skills .technologies{background-color:#4f03;grid-column-start:1;grid-column-end:4;grid-row-start:1;grid-row-end:5}.pageSkills .skills .database{background-color:#f003;grid-column-start:2;grid-column-end:4;grid-row-start:10;grid-row-end:15}.pageSkills .skills .devops{background-color:#fad02c80;grid-column-start:3;grid-column-end:4;grid-row-start:5;grid-row-end:10}.pageSkills .skills .testing{background-color:#ffaebc1a;grid-column-start:1;grid-column-end:2;grid-row-start:10;grid-row-end:15}.pageSkills .skills .devtools{background-color:#0ff3;grid-column-start:1;grid-column-end:3;grid-row-start:15;grid-row-end:20}.pageSkills .skills .devtools .skillImg img{width:60px;height:60px}.pageSkills .skills .devtools .skillImg .netlify,.pageSkills .skills .devtools .skillImg .vercel,.pageSkills .skills .devtools .skillImg .render{width:90px}.pageSkills .skills .devtools .skillImg .vercel{height:40px}.pageSkills .skills .libraries{background-color:#18a55880;grid-column-start:3;grid-column-end:4;grid-row-start:15;grid-row-end:20}.pageSkills .skills .others{background-color:#b1d4e033;grid-column-start:1;grid-column-end:4;grid-row-start:20;grid-row-end:25}.pageContact{background-color:#151533;display:flex;flex-direction:column;align-items:center}.pageContact .messageRowContainer{padding:10px}.pageContact .messageRowContainer .messageRow{font-size:1.5rem;text-align:center;font-family:Workbench,sans-serif}.pageContact .messageRowContainer .messageRow span{display:flex;justify-content:center;align-items:center;gap:1rem;padding:10px 0}.pageContact .messageRowContainer .messageRow .messageTrue{color:#adff2f}.pageContact .messageRowContainer .messageRow .messageFalse{color:tomato}.pageContact .messageRowContainer .messageRow .msgIcon{font-size:2rem}.pageContact form{display:flex;flex-direction:column;gap:.5rem;width:70%}.pageContact form .nameEmailContent{display:flex;align-items:center;column-gap:1rem;row-gap:.5rem}.pageContact form input{height:80px;padding:10px;color:#c9f1c5;background-color:#151533;font-weight:700;font-family:Anta;font-size:1.5rem;filter:brightness(150%);outline:none;border:none;width:100%}.pageContact form .textAreaMessage{height:265px}.pageContact form .textAreaMessage textArea{font-size:1.5rem;font-family:Anta;height:260px;padding:10px;color:#c9f1c5;background-color:#151533;filter:brightness(150%);outline:none;border:none;resize:none;width:100%}.pageContact form .row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;padding:1rem 0}.pageContact form .row .capture{display:flex;justify-content:center;align-items:center;height:56px;width:220px;background:linear-gradient(to right,#151533,#c9f1c5,#33857c,#151533);padding:0 1rem}.pageContact form .row .capture input{width:60px;height:45px;text-align:center;font-weight:700;font-size:1.3rem;background-color:#c9f1c54d;color:#5082ef}.pageContact form .row .capture .numbers{font-size:2rem;font-weight:700;letter-spacing:10px;color:#151533;padding-top:10px}.pageContact form .row .msgButton{background-color:#33857c;height:56px;width:220px;display:flex;justify-content:center;align-items:center;filter:brightness(150%)}.pageContact form .row .msgButton button{height:50px;width:210px;cursor:pointer;background-color:#151533;color:#33857c;border:none;font-size:16px;font-weight:700;letter-spacing:1px;overflow:hidden;transition:all 1.3s ease;display:inline-block;position:relative}.pageContact form .row .msgButton button:after{content:"";display:block;position:absolute;top:0;right:100%;width:100%;height:100%;background-color:#33857c4d;transition:all 1s ease}.pageContact form .row .msgButton button:hover{color:#151533;background-color:#33857c}.pageContact form .row .msgButton button:hover:after{right:0}.pageContact .inputName,.pageContact .inputEmail,.pageContact .inputSubject,.pageContact .textAreaMessage{height:84px;width:100%;overflow:hidden;transition:all .5s ease;display:inline-block;position:relative;background-color:#151533}.pageContact .inputName:after,.pageContact .inputEmail:after,.pageContact .inputSubject:after,.pageContact .textAreaMessage:after{content:"";background-color:#151533;position:absolute;height:6px;width:100%;bottom:0;left:0;transition:all 1s ease}.pageContact .inputName:focus-within,.pageContact .inputEmail:focus-within,.pageContact .inputSubject:focus-within,.pageContact .textAreaMessage:focus-within{background-color:#33857c}.pageContact .inputName:focus-within:after,.pageContact .inputEmail:focus-within:after,.pageContact .inputSubject:focus-within:after,.pageContact .textAreaMessage:focus-within:after{right:0;transform:translate(100%)}.pageContact .messageNotValid,.pageContact .subjectNotValid,.pageContact .nameNotValid,.pageContact .emailNotValid{background-color:tomato}.pageContact .messageNotValid:focus-within,.pageContact .subjectNotValid:focus-within,.pageContact .nameNotValid:focus-within,.pageContact .emailNotValid:focus-within{background-color:tomato}.pageContact .contactIcons{display:flex;padding:3rem 0;font-size:3rem;justify-content:space-evenly;width:100%}.pageContact .contactIcons .linkedIn{padding:5px;color:#2e8bc0}.pageContact .contactIcons .whatsApp{padding:5px;color:#18a558}.pageContact .contactIcons .gitHub{padding:5px;color:#c9f1c5}.pageContact .contactIcons .gitHub:hover,.pageContact .contactIcons .whatsApp:hover,.pageContact .contactIcons .linkedIn:hover{transform:scale(1.2)}@media(max-width:967px){form{min-width:90%}}@media(max-width:767px){.pageContact .nameEmailContent{flex-wrap:wrap}}@media(max-width:567px){.row{flex-direction:column;row-gap:.5rem}}*{padding:0;margin:0;box-sizing:border-box}body{font-family:Sprite Graffiti,sans-serif;background-color:#151533}body .line{padding-top:2rem}body h1{color:#33857c;padding:2rem 0;text-align:center;font-size:3rem}body .App .loadingPage{display:flex;justify-content:center;align-items:center;gap:1rem;height:100vh;background-color:#151533e6;font-family:Workbench,sans-serif}body .App .loadingPage .spinnerLogoIcon{animation:spinner 1.2s linear infinite;transform-origin:center center;font-size:5rem;color:#c9f1c5}body .App .loadingPage span{font-size:3rem;color:#c9f1c5}@media(max-width:567px){body .shadowBlackImg{max-height:300px}body .rightImg{max-height:350px}}@keyframes spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}