@import url(https://fonts.googleapis.com/css2?family=Mulish:wght@400;500;600;700&family=Poppins:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,300&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap);
.hero-container{color:white;display:flex;flex-direction:column;align-items:center;height:100vh;width:100%;padding-top:3rem;justify-content:space-around}.hero-img-container{width:70%}.hero-img-container svg{width:100%}.hero-name-container{width:100%;display:flex;flex-direction:column;align-items:center}.hero-name-container h1{text-align:center;width:50%;font-size:3rem;color:#14ffec}.hero-name-container h2{font-family:'Press Start 2P', cursive;width:50%;text-align:center;font-size:3rem;color:#f6f980;letter-spacing:1.6rem;text-shadow:0 0 4px #f6f980,0 0 0.35rem #f6f980;text-align:center;margin-top:1.6rem}.hero-img-indicator-container svg{width:3rem;cursor:pointer;animation:breath 2s ease-in-out infinite}@keyframes breath{0%{transform:scale(1)}50%{transform:translateY(1rem)}100%{transform:scale(1)}}.hero-description-container{width:100%;display:flex;flex-direction:column;align-items:center}@media screen and (min-width: 768px){.hero-name-container h1{font-size:5rem}.hero-name-container h2{font-size:5rem}.hero-img-indicator-container svg{width:4rem}.hero-description-container h3{font-size:2.4rem}.hero-description-container h4{font-size:2rem}}@media screen and (min-width: 1200px){.hero-container{display:grid;grid-template-rows:1fr 1fr 0.5fr;grid-template-columns:2fr 1fr 1fr}.hero-container .hero-name-container{grid-column:1/2;justify-self:start}.hero-container .hero-name-container h1{font-size:7rem}.hero-container .hero-name-container h2{font-size:7rem}.hero-container .hero-img-container{grid-column:2/4;grid-row:1/3;justify-self:end;margin-right:20%;width:100%}.hero-container .hero-img-indicator-container{grid-row:2;grid-column:1/2;justify-self:center}.hero-container .hero-img-indicator-container svg{width:6rem}.hero-container .hero-description-container{grid-row:3;grid-column:span 4;display:grid;grid-template-columns:1fr 1fr;align-items:center}.hero-container .hero-description-container h3{font-size:4rem;text-align:center}.hero-container .hero-description-container h4{font-size:4rem;text-align:center}}

nav{position:fixed;height:10vh;width:100%;z-index:1}.list{margin-top:0.5rem;width:14rem;height:25vh;background-color:#30054c;padding:2rem 0;display:flex;justify-content:center;align-items:center;visibility:hidden;position:absolute;right:5%;top:25%;transform:translate(-5%, 20%)}.list.hidden{visibility:hidden}.list.display{visibility:visible}.list.display .list-item{list-style:none;display:flex;flex-direction:column;align-items:center;justify-content:center}.list.display .list-item a{text-decoration:none;color:#fff}.list.display .list-item li{transition:all 0.5s ease-in-out;margin-bottom:1rem;cursor:pointer}.list.display .list-item a:hover{text-shadow:0 0 5px #51fff1,0 0 5px #14ffec,0 0 40px #14ffec,0 0 25px #14ffec,0 0 25px #14ffec,0 0 20px #14ffec,0 0 10px #14ffec}.list.display .list-item li:hover{transform:scale(1.2);color:#14ffec}.hamburger{cursor:pointer;position:absolute;right:5%;top:50%;display:flex;justify-content:center;transform:translate(-5%, -50%);align-items:center;height:4.2rem;transition:all 0.5s ease-in-out}.hamburger .hamburger-line{height:0.2rem;background:white;width:3rem;transition:all 0.8s ease-in-out}.hamburger .hamburger-line::before{content:'';position:absolute;bottom:1rem;height:0.2rem;background:white;width:3rem;transition:all 0.5s ease-in-out}.hamburger .hamburger-line::after{content:'';position:absolute;top:1rem;height:0.2rem;background:white;width:3rem;transition:all 0.5s ease-in-out}.false .hamburger-line{transform:translateX(-10%);background:transparent;box-shadow:none}.false .hamburger-line::before{transform:rotate(45deg) translate(1rem, 0.5rem);box-shadow:0 0 5px #51fff1,0 0 5px #14ffec,0 0 40px #14ffec,0 0 25px #14ffec,0 0 25px #14ffec,0 0 20px #14ffec,0 0 10px #14ffec}.false .hamburger-line::after{transform:rotate(-45deg) translate(0.85rem, -0.5rem);box-shadow:0 0 5px #51fff1,0 0 5px #14ffec,0 0 40px #14ffec,0 0 25px #14ffec,0 0 25px #14ffec,0 0 20px #14ffec,0 0 10px #14ffec}

.about-me-container{display:grid;grid-template-columns:repeat(4, 1fr);grid-template-rows:repeat(3, 1fr);align-content:center;width:100%;height:100vh}.lateral-title-container{grid-row:1/3;justify-self:end;color:#f6f980;transform:rotate(180deg);writing-mode:vertical-rl;margin-left:10%;text-align:center;letter-spacing:0.2rem;align-self:end}.lateral-title-1{font-weight:700;font-size:2.5rem}.about-me-img-container img{object-fit:contain;object-position:center;width:100%;margin-right:10%}.fix-img{width:80%}.about-me-img-container{grid-row:1/3;grid-column:2/5;align-self:end;justify-self:end;display:flex;justify-content:flex-end;align-items:flex-end;width:100%;max-height:100%;max-width:80%}.title-container{padding:4rem 0;display:flex;color:#14ffec;justify-content:center;width:100%;grid-row:1;grid-column:1/5}.title{font-size:3rem}.description-container{grid-row:3/4;grid-column:1/5;column-gap:1.6rem;justify-self:center;align-self:center;color:#fff;bottom:0;width:80%;display:flex;flex-direction:column;margin-bottom:10%;align-items:center;font-family:'Mulish', sans-serif;font-size:1.8rem}.description-container span{padding-top:1.6rem}.social-logo-container{display:flex;margin-top:3.2rem;margin-left:60%}.social-logo-child{font-size:2em;color:#fff;margin-right:3.2rem;transition:text-shadow 0.4s ease-in-out}.social-logo-child:hover{cursor:pointer;text-shadow:0 0 5px #51fff1,0 0 5px #14ffec,0 0 40px #14ffec,0 0 25px #14ffec,0 0 25px #14ffec,0 0 20px #14ffec,0 0 10px #14ffec}.fix-about{margin-top:3.2rem;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}@media screen and (min-width: 460px){.lateral-title-1{font-size:3rem}}@media screen and (min-width: 680px){.about-me-img-container{align-self:center;overflow:hidden}.about-me-img-container img{width:90%;max-height:100%}.lateral-title-1{font-size:5rem}.description-container{margin-bottom:5%}.description-container span{padding-top:0;font-size:2rem}.social-logo-child{font-size:5rem}}@media screen and (min-width: 820px){.about-me-img-container img{width:80%}}@media screen and (min-width: 980px){.lateral-title-container{grid-row:1/2;grid-column:1/3;transform:rotate(0deg);writing-mode:horizontal-tb;margin-left:20%}.description-container{grid-column:1/3;grid-row:2/4;justify-self:end;align-self:center;text-align:end}.description-container .social-logo-container{margin:10rem auto}.about-me-img-container img{width:60%}}@media screen and (min-width: 1200px){.lateral-title-container{grid-row:1;grid-column:1/3;transform:rotate(0deg);writing-mode:horizontal-tb;margin-left:0;align-self:end}.description-container{grid-column:1/3;grid-row:2/4;justify-self:end;align-self:center;text-align:end}.description-container .social-logo-container{margin-right:0}.description-container .social-logo-container i{font-size:6rem}.description-container span{font-size:3.2rem}.about-me-img-container{grid-row:1/4}.about-me-img-container img{width:60%}}@media screen and (min-width: 1650px){.about-me-img-container{align-self:center}.about-me-img-container img{width:50%}}

@keyframes focus-in-expand-fwd{0%{letter-spacing:-0.1em;-webkit-transform:translateZ(-800px);transform:translateZ(-800px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}10%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:blur(0);filter:blur(0);opacity:1}20%{opacity:1}30%{opacity:1}50%{letter-spacing:0;opacity:1}70%{opacity:1}80%{opacity:1}100%{letter-spacing:0;opacity:0}}@keyframes focus-in-expand-fwd2{0%{letter-spacing:-0.1em;-webkit-transform:translateZ(-800px);transform:translateZ(-800px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}10%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:blur(0);filter:blur(0);opacity:1}20%{opacity:1}30%{opacity:1}50%{letter-spacing:0;opacity:1}70%{opacity:1}80%{opacity:1}100%{letter-spacing:0;opacity:0}}@keyframes scale-in-ver-bottom{0%{transform:scaleY(0);transform-origin:0% 100%;opacity:1}100%{transform:scaleY(1);transform-origin:0% 100%;opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-100px);opacity:0;filter:blur(5px)}100%{transform:translateY(0);opacity:1}}.skills-container{display:flex;height:100vh}.skills-lateral-container{display:flex;flex-direction:column;padding-left:14%;margin-right:5%;justify-content:center;align-items:center;color:#14ffec}.skills-lateral-container .skills-lateral-text-container{margin-bottom:3.2rem}.skills-lateral-container .skills-lateral-h1{font-family:'Press Start 2P', cursive;font-size:4rem}.skills-icons-container{display:grid;grid-template-columns:6rem 6rem;grid-template-rows:repeat(4, 10.6rem);align-items:center;align-content:center;justify-content:center;column-gap:25%;width:70vw}.skills-icon-container{text-align:center}.skills-icon-container .skills-icon{font-size:5.5rem;color:#fff;cursor:pointer}.icon-glow-html,.icon-glow-css,.icon-glow-js,.icon-glow-sass,.icon-glow-git,.icon-glow-npm,.icon-glow-node,.icon-glow-react{transition:all 3.7s ease-in-out}.icon-glow-html:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #e44d26,0 0 5px #e44d26,0 0 25px #e44d26,0 0 5px #e44d26,0 0 20px #e44d26,0 0 10px #e44d26}.icon-glow-css:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #2299f8,0 0 5px #2299f8,0 0 25px #2299f8,0 0 5px #2299f8,0 0 20px #2299f8,0 0 10px #2299f8}.icon-glow-js:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #f7df1e,0 0 5px #f7df1e,0 0 25px #f7df1e,0 0 5px #f7df1e,0 0 20px #f7df1e,0 0 10px #f7df1e}.icon-glow-react:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #00c8ff,0 0 5px #00c8ff,0 0 25px #00c8ff,0 0 5px #00c8ff,0 0 20px #00c8ff,0 0 10px #00c8ff}.icon-glow-sass:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #cd6799,0 0 5px #cd6799,0 0 25px #cd6799,0 0 5px #cd6799,0 0 20px #cd6799,0 0 10px #cd6799}.icon-glow-git:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #ff4e21,0 0 5px #ff4e21,0 0 25px #ff4e21,0 0 5px #ff4e21,0 0 20px #ff4e21,0 0 10px #ff4e21}.icon-glow-npm:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #c53031,0 0 5px #c53031,0 0 25px #c53031,0 0 5px #c53031,0 0 20px #c53031,0 0 10px #c53031}.icon-glow-node:hover{transition:all 0.2s ease-in-out;text-shadow:0 0 5px #e44d26,0 0 5px #8f0,0 0 5px #8f0,0 0 25px #8f0,0 0 5px #8f0,0 0 20px #8f0,0 0 10px #8f0}.skills-description{display:flex;align-items:center;justify-content:center;text-align:center;font-weight:500;font-family:'Press Start 2P', cursive;font-size:1rem;padding-top:1rem;color:#f6f980;opacity:0}.show-skill{animation:focus-in-expand-fwd 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}.bucle{animation:focus-in-expand-fwd2 2.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both}@media screen and (min-width: 768px){.skills-icons-container{grid-template-columns:12rem 12rem;grid-template-rows:repeat(4, 16rem)}.skills-icon-container .skills-icon{font-size:9rem}.skills-description{font-size:1.6rem}.skills-lateral-container .skills-lateral-text-container{margin-bottom:4rem}.skills-lateral-container .skills-lateral-h1{font-size:7rem}}@media screen and (min-width: 1200px){.skills-icons-container{grid-template-rows:12rem 12rem;grid-template-columns:repeat(4, 16rem);column-gap:10%;row-gap:20%}.skills-lateral-container .skills-lateral-text-container{margin-bottom:5rem}.skills-lateral-container .skills-lateral-text-container .skills-lateral-h1{font-size:8rem}.skills-icon-container .skills-icon{font-size:12rem}.skills-description{font-size:2rem}}

@keyframes focus-in-expand-fwd{0%{letter-spacing:-0.1em;-webkit-transform:translateZ(-800px);transform:translateZ(-800px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}10%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:blur(0);filter:blur(0);opacity:1}20%{opacity:1}30%{opacity:1}50%{letter-spacing:0;opacity:1}70%{opacity:1}80%{opacity:1}100%{letter-spacing:0;opacity:0}}@keyframes focus-in-expand-fwd2{0%{letter-spacing:-0.1em;-webkit-transform:translateZ(-800px);transform:translateZ(-800px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}10%{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-filter:blur(0);filter:blur(0);opacity:1}20%{opacity:1}30%{opacity:1}50%{letter-spacing:0;opacity:1}70%{opacity:1}80%{opacity:1}100%{letter-spacing:0;opacity:0}}@keyframes scale-in-ver-bottom{0%{transform:scaleY(0);transform-origin:0% 100%;opacity:1}100%{transform:scaleY(1);transform-origin:0% 100%;opacity:1}}@keyframes slide-in-top{0%{transform:translateY(-100px);opacity:0;filter:blur(5px)}100%{transform:translateY(0);opacity:1}}.portfolio-container{display:flex;align-items:center;flex-direction:column}.portfolio-item-container{margin-bottom:1.6rem}.portfolio-item{margin:10% 0;position:relative;width:90%;transition:all 0.6s ease-in}.portfolio-img-container img{width:100%;opacity:0.4;filter:blur(4px);transition:all 0.6s linear}.show img{opacity:1;filter:blur(0px)}.portfolio-description{display:flex;flex-direction:column;position:absolute;bottom:0;margin-left:1.6rem;color:#fff;cursor:pointer;transition:all 0.6s ease}.portfolio-description h1{font-size:2rem;font-weight:600;color:#14ffec}.portfolio-description h2{font-size:1.6rem;font-weight:400;color:#f6f980}.portfolio-name-container{display:flex;justify-content:space-between;color:#fff;opacity:0;transition:all 0.6s ease;font-size:1.6rem}.portfolio-name-container .portfolio-name-icons{width:30%;display:flex;align-items:center;justify-content:flex-end;font-size:2.2rem}.portfolio-name-container .portfolio-name-title{width:70%;text-align:left}.portfolio-name-container span{cursor:pointer}.portfolio-name-container i{margin-left:1.6rem}.hidden-web-name{opacity:0}.show-web-name{opacity:1}@media screen and (min-width: 768px){.portfolio-description h1{font-size:3rem}.portfolio-description h2{font-size:2.6rem}.portfolio-name-container{font-size:3rem}.portfolio-name-container .portfolio-name-icons{font-size:4rem}}@media screen and (min-width: 1200px){.portfolio-item{width:80%}.portfolio-description h1{font-size:5rem}.portfolio-name-container{margin-top:2rem}.portfolio-name-container .portfolio-name-icons{font-size:5rem}.portfolio-name-container span{font-size:3rem}.portfolio-name-container i{margin-left:3.2rem}}@media screen and (min-width: 1500px){.portfolio-item{width:70%}}

.footer-container{display:flex;flex-direction:column;margin-top:10%;margin-bottom:5%;align-items:center;color:#fff}.footer-container .primary-footer-text{font-weight:600}.footer-container .secondary-footer-text{font-weight:400;margin-top:1.6rem}

*{margin:0;padding:0;box-sizing:border-box}html{font-size:62.5%;scroll-behavior:smooth}body{font-family:'Poppins', sans-serif;font-size:1.6rem;background:#0d0227;background:-moz-linear-gradient(180deg, #0d0227 0%, #1d1160 50%, purple 100%);background:-webkit-linear-gradient(180deg, #0d0227 0%, #1d1160 50%, purple 100%);background:linear-gradient(180deg, #0d0227 0%, #1d1160 50%, purple 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#0d0227",endColorstr="#800080",GradientType=1)}.body-overflow{overflow-y:hidden}