@import"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap";header{width:100%;height:4rem;position:fixed;top:0;left:0;right:0;color:var(--primary);color:#fff;transition:all .5s ease-in-out;z-index:100}header nav{width:100%;height:4rem;padding-inline:5%;display:flex;justify-content:space-between;align-items:center}header nav ul{position:absolute;width:100%;min-height:100vh;left:-100%;right:0;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;background:var(--nav-bg);transition:all .5s ease-in-out;z-index:-1}@media screen and (min-width: 900px){header nav ul{min-height:0;position:relative;flex-direction:row;inset:0;width:auto;height:auto;background:transparent;z-index:1}}header nav ul li a{font-weight:600;font-size:1rem}header nav ul.open{left:0}header nav ul.open a{color:#fff;font-size:1.5rem}@media screen and (min-width: 900px){header nav .menu-toggle{display:none}}header nav .menu-toggle fa-icon{font-size:1.2rem;z-index:1000;cursor:pointer}header nav fa-icon{cursor:pointer}header nav.scroll{background:var(--gradient);background-image:radial-gradient(circle,rgba(121,80,242,.5098039216) 5%,rgba(77,171,247,.5019607843) 95%);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}header.open{color:#fff}body.dark nav.scroll{background-image:radial-gradient(circle,rgba(88,124,222,.4823529412) 5%,rgba(37,37,61,.2431372549) 95%)}body{--gradient: linear-gradient(110deg, rgba(147, 246, 251, .6549019608), rgba(88, 124, 222, .8392156863), rgba(35, 211, 217, .8196078431));--gradient-2: linear-gradient(110deg, rgba(88, 124, 222, .8392156863), rgba(35, 211, 217, .8196078431), rgba(88, 124, 222, .8392156863));--gradient-alpha: linear-gradient(110deg, rgba(35, 211, 217, .1529411765), rgba(88, 124, 222, .2117647059), rgba(35, 211, 217, .1529411765));--primary: #587cde;--primary-alpha: rgba(88, 124, 222, .6117647059);--color: #23d3d9;--color-alpha: rgba(35, 211, 217, .1529411765);--bg: #fff;--nav-bg: #587cde;--text-color: #343333}body.dark{--gradient: linear-gradient(110deg, #587cde, #33335d, #587cde);--gradient-2: linear-gradient(110deg, #b5b5ff, #587cde, #587cde, #5454bc);--gradient-alpha: linear-gradient(110deg, #587cde, #33335d, #587cde);--primary: #587cde;--primary-alpha: #587cde;--color: #587cde;--color-alpha: #587cde;--bg: #33335d;--nav-bg: #33335d;--text-color: #d6d5d5}*{box-sizing:border-box;padding:0;margin:0;font-family:Montserrat,sans-serif}html{scroll-behavior:smooth}img{max-width:100%}ul{list-style:none}li{cursor:pointer}a{text-decoration:none;cursor:pointer}h1,h2,h4{text-align:center}h2{margin-bottom:2rem}h3:not(.logo-h3){margin-bottom:1.5rem}p{line-height:2em}button{outline:none;border:1px solid var(--primary);padding:.6em 3em;border-radius:2rem;background:none;margin-top:1em;color:var(--primary);font-size:.85em;cursor:pointer}button:hover{background:var(--primary);color:var(--bg)}button:hover a{color:var(--bg)}.gradient-text{font-weight:800;margin-bottom:.2rem;background-clip:text;background:var(--gradient-2);background-size:100%;background-repeat:repeat;-webkit-background-clip:text;-webkit-text-fill-color:transparent;-moz-background-clip:text;-moz-text-fill-color:transparent}body{width:100%;min-height:100vh;display:flex;justify-content:center;align-items:center;color:var(--text-color);font-size:1rem}@media screen and (max-width: 374px){body{font-size:.85rem}}@media screen and (min-width: 1200px){body{font-size:1.1rem}}@media screen and (min-width: 1900px){body{font-size:1.2rem}}app-root{width:100%;min-height:100vh;background:var(--bg);transition:all .3s ease-in-out}main{width:100%}section{width:100%;min-height:50vh;padding-top:4rem}section .container{width:100%;padding-inline:5%;padding-block:1.5rem;max-width:2000px;margin-inline:auto}.body-fade-out{height:100vh;width:100%}.body-fade-out app-root{position:relative;background:var(--primary)}nav{opacity:0;animation:navFadeIn 2s ease-in-out;animation-delay:.4s;animation-fill-mode:forwards}.hero h1,.hero h4,.hero button{opacity:0;animation:heroFadeIn 2s ease-in-out;animation-fill-mode:forwards}.hero .social ul li:nth-of-type(1){animation:socialFadeIn1 2s ease-in-out;translate:-100% 60%;opacity:0;animation-fill-mode:forwards;animation-delay:.4s}.hero .social ul li:nth-of-type(2){animation:socialFadeIn2 2s ease-in-out;translate:-30% -100%;opacity:0;animation-fill-mode:forwards;animation-delay:.4s}.hero .social ul li:nth-of-type(3){animation:socialFadeIn3 2s ease-in-out;translate:30% -100%;opacity:0;animation-fill-mode:forwards;animation-delay:.4s}.hero .social ul li:nth-of-type(4){animation:socialFadeIn4 2s ease-in-out;translate:100% -60%;opacity:0;animation-fill-mode:forwards;animation-delay:.4s}.about-tab-content{animation:tabFadeIn .5s ease-in-out}@keyframes heroFadeIn{0%{opacity:0}to{opacity:1}}@keyframes navFadeIn{0%{opacity:0;translate:0 -100%}to{opacity:1;translate:0 0}}@keyframes socialFadeIn1{0%{translate:-100% 60%;opacity:0}30%{opacity:0}to{translate:0 0;opacity:1}}@keyframes socialFadeIn2{0%{translate:-30% -100%;opacity:0}30%{opacity:0}to{translate:0 0;opacity:1}}@keyframes socialFadeIn3{0%{translate:0 100%;opacity:0}30%{opacity:0}to{translate:0 0;opacity:1}}@keyframes socialFadeIn4{0%{translate:100% -60%;opacity:0}30%{opacity:0}to{translate:0 0;opacity:1}}@keyframes tabFadeIn{0%{opacity:0}to{opacity:1}}.hero,.thank-you{width:100%;min-height:100vh;color:var(--primary);color:#fff;position:relative;background-image:radial-gradient(circle,#7950f2 5%,#4dabf7 95%);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1}.hero h1,.thank-you h1{margin-top:-4rem}.hero .filter,.thank-you .filter{position:absolute;inset:0;background:rgba(255,255,255,.2784313725);-webkit-backdrop-filter:blur(100px);backdrop-filter:blur(100px);z-index:-1}.hero .button,.thank-you .button{width:100%;text-align:center}.hero .button .hero-btn,.thank-you .button .hero-btn{border:1px solid #fff;transition:all .3s ease-in-out}.hero .button .hero-btn a,.thank-you .button .hero-btn a{color:#fff}.hero .button .hero-btn:hover,.thank-you .button .hero-btn:hover{background:linear-gradient(110deg,rgba(50,39,202,.3137254902),rgba(51,131,217,.3254901961));border-color:transparent;translate:0 -5px}.hero .social,.thank-you .social{width:70%;margin-inline:auto}.hero .social ul,.thank-you .social ul{position:relative;display:flex;justify-content:center;margin-top:2rem}.hero .social ul li,.thank-you .social ul li{position:relative;list-style:none;margin:10px}.hero .social ul li a,.thank-you .social ul li a{position:relative;width:3em;height:3em;display:inline-block;border-radius:50%;display:flex;justify-content:center;align-items:center;text-decoration:none;background:transparent;font-size:1em;border:1px solid #fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:.5s;overflow:hidden}.hero .social ul li a fa-icon,.thank-you .social ul li a fa-icon{color:#fff}.hero .social ul li a:hover,.thank-you .social ul li a:hover{translate:0 -10px}.hero .social ul li a:before,.thank-you .social ul li a:before{content:"";position:absolute;top:0;left:0;width:50px;height:100%;background:rgba(255,255,255,.5);transform:skew(45deg) translate(150px);transition:.5s}.hero .social ul li a:hover:before,.thank-you .social ul li a:hover:before{transform:skew(45deg) translate(-150px)}body.dark .hero,body.dark .thank-you{background-image:radial-gradient(circle,var(--primary),var(--bg))}body.dark .hero .filter,body.dark .thank-you .filter{background:transparent}.about .side-flex-container{width:100%;display:block}@media screen and (min-width: 700px){.about .side-flex-container{display:flex;justify-content:flex-start;gap:2rem}}.about .side-flex-container .side-menu{display:flex;justify-content:center;gap:1rem}@media screen and (min-width: 700px){.about .side-flex-container .side-menu{display:block}}.about .side-flex-container .side-menu button{width:23%;padding:1em;font-size:1em;outline:none;background:transparent;color:var(--primary-alpha);margin-bottom:1em;margin-top:0;font-weight:500;border-radius:0;transition:all .3s ease-in-out;cursor:pointer}@media screen and (min-width: 700px){.about .side-flex-container .side-menu button{width:100%;display:flex;justify-content:center}}@media screen and (min-width: 900px){.about .side-flex-container .side-menu button{padding:1em 2em 1em 1em;justify-content:flex-start;align-items:center;gap:1rem}}.about .side-flex-container .side-menu button.active{background:var(--gradient-2);border:3px solid var(--gradient-2);color:#fff}.about .side-flex-container .side-menu button.active fa-icon{color:#fff}.about .side-flex-container .side-menu button.active:hover{background:var(--gradient);color:#fff}.about .side-flex-container .side-menu button.active:hover fa-icon{color:#fff}.about .side-flex-container .side-menu button.border-gradient{border:10px solid;border-image-slice:1;border-width:3px;border-image-source:var(--gradient)}.about .side-flex-container .side-menu button.border-gradient:hover{border-image-source:var(--primary-alpha)}.about .side-flex-container .side-menu button fa-icon{align-self:center;font-size:1.2em;color:var(--primary-alpha)}.about .side-flex-container .side-menu button span{display:none}@media screen and (min-width: 900px){.about .side-flex-container .side-menu button span{display:block}}.about .side-flex-container .side-menu button:hover{background:var(--gradient);color:#fff;border-color:var(--bg)}.about .side-flex-container .side-menu button:hover fa-icon{color:#fff}.about .side-flex-container .side-menu button:nth(last-of-type){margin-bottom:0}.about .side-flex-container .right-text{padding:1.5em}@media screen and (min-width: 700px){.about .side-flex-container .right-text{padding-top:.5rem}}.about .side-flex-container .right-text h3{display:inline-block;position:relative;margin-bottom:1rem}.about .side-flex-container .right-text h3:nth-of-type(2){margin-top:2.5em}.about .side-flex-container .right-text h3:after{content:"";position:absolute;width:100%;height:2px;background:var(--gradient);left:0;bottom:-.4rem}.about .side-flex-container .right-text p.gradient-text,.about .side-flex-container .right-text h4.gradient-text{margin-top:2em;margin-bottom:.7em}.about .side-flex-container .right-text h3.gradient-text+p.gradient-text{margin-top:0}.about .side-flex-container .right-text .buttons{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1em;margin-top:2em}.about .side-flex-container .right-text .buttons .rounded-btn{padding:0;width:3em;height:3em;border:none;background:var(--gradient);color:#fff;margin-top:.5em;scale:1;transition:all .3s ease-in-out}.about .side-flex-container .right-text .buttons .rounded-btn fa-icon{font-size:1.5em}.about .side-flex-container .right-text .buttons .rounded-btn:hover{background:var(--gradient-2);scale:1.03}.about .side-flex-container .right-text .about-me span{color:var(--primary)}.about .side-flex-container .right-text .studies{position:relative;margin-left:2rem}.about .side-flex-container .right-text .studies p:nth-of-type(1),.about .side-flex-container .right-text .studies .buttons{margin-top:0}.about .side-flex-container .right-text .studies h4{text-align:left;position:relative}.about .side-flex-container .right-text .studies .narrow-btn{margin:.5rem}.about .side-flex-container .right-text .studies:before{content:"";position:absolute;left:-2rem;top:0;bottom:0;width:3px;height:100%;background:var(--gradient);opacity:.6}.about .side-flex-container .right-text .studies h4:after{content:"";position:absolute;left:calc(-2rem - .5em + 1.5px);width:1em;height:1em;border-radius:50%;background:var(--gradient)}.about .side-flex-container .right-text .experience{width:100%;display:block;text-align:center}@media screen and (min-width: 700px){.about .side-flex-container .right-text .experience{text-align:left}}@media screen and (min-width: 1800px){.about .side-flex-container .right-text .experience{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem}}.about .side-flex-container .right-text .experience div:nth-child(1){margin-bottom:3rem}.about .side-flex-container .right-text .experience .exp-buttons{justify-content:center;margin-bottom:2rem}@media screen and (min-width: 700px){.about .side-flex-container .right-text .experience .exp-buttons{justify-content:flex-start}}.about .side-flex-container .right-text .experience .exp-buttons button{width:100%;padding:1em 4em;margin-bottom:1em;margin-top:-1em;background:var(--gradient-2);border:none;color:#fff;border-radius:0;border-radius:2rem;font-weight:500;scale:1;transition:all .3s ease-in-out}@media (min-width: 450px){.about .side-flex-container .right-text .experience .exp-buttons button{width:auto}}.about .side-flex-container .right-text .experience .exp-buttons button a{color:#fff}.about .side-flex-container .right-text .experience .exp-buttons button:hover{background:var(--gradient);scale:1.03}.about .side-flex-container .right-text .experience .flex-wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}@media screen and (min-width: 700px){.about .side-flex-container .right-text .experience .flex-wrap{justify-content:flex-start}}.about .side-flex-container .right-text .experience .flex-wrap p{margin-top:0;margin-right:1rem}.about .side-flex-container .right-text .experience .flex-wrap .techs{display:flex;justify-content:center;gap:1.3rem}@media screen and (min-width: 700px){.about .side-flex-container .right-text .experience .flex-wrap .techs{justify-content:flex-start}}.about .side-flex-container .right-text .experience .flex-wrap .techs h4{text-align:left;max-width:150px;margin-top:0}.about .side-flex-container .right-text .experience .flex-wrap .techs h4.long{max-width:300px}.about .side-flex-container .right-text .experience .work-skills{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:1rem;margin-top:2rem}@media screen and (min-width: 700px){.about .side-flex-container .right-text .experience .work-skills{justify-content:flex-start}}.about .side-flex-container .right-text button.narrow-btn{padding:.5rem 1rem;margin:0;background:var(--gradient-2);border:none;color:#fff;transition:all .3s ease-in-out}.about .side-flex-container .right-text button.narrow-btn:hover{background:var(--gradient)}.about .side-flex-container .right-text .languages{display:block;text-align:center}@media screen and (min-width: 700px){.about .side-flex-container .right-text .languages{text-align:left}}.about .side-flex-container .right-text .languages .lang-title{margin-bottom:1rem}.about .side-flex-container .right-text .languages div:nth-child(1){margin-bottom:3rem}@media (min-width: 1100px){.about .side-flex-container .right-text .languages .flex{margin-top:1.5rem;display:flex;justify-content:flex-start;align-items:flex-start;gap:2rem}.about .side-flex-container .right-text .languages .flex .gradient-text{margin:0}.about .side-flex-container .right-text .languages .flex:nth-of-type(2){margin-bottom:2.5rem}.about .side-flex-container .right-text .languages .lang-title{margin-bottom:0}.about .side-flex-container .right-text .languages div:nth-child(1){margin-bottom:0}}.portfolio .flex-center{display:grid;grid-template-columns:1fr;gap:2rem}@media screen and (min-width: 700px){.portfolio .flex-center{grid-template-columns:repeat(3,1fr)}}.portfolio .flex-center .portfolio-item{width:100%;margin-block:0 30px;display:flex;flex-direction:column;align-items:center;justify-content:space-between;position:relative}.portfolio .flex-center .portfolio-item h3{color:var(--primary-alpha);min-height:3rem;font-size:1rem}@media screen and (min-width: 1100px){.portfolio .flex-center .portfolio-item h3{font-size:1.2rem}}.portfolio .flex-center .portfolio-item-thumbnail{border-radius:10px;position:relative;transition:all .3s ease-in;overflow:hidden;cursor:pointer;box-shadow:1px 1px 4px var(--primary-alpha)}.portfolio .flex-center .portfolio-item-thumbnail a{position:absolute;display:flex;align-items:center;justify-content:center;inset:0;translate:-50% 0;opacity:0;font-size:20px;background:var(--gradient);border-radius:10px;color:#fff;cursor:pointer;transition:all .5s ease-in-out}.portfolio .portfolio-item-thumbnail:hover a{translate:0 0;opacity:1}.portfolio .portfolio-item-thumbnail img{width:100%;border-radius:10px;display:block;pointer-events:none}.portfolio .portfolio-item h3{font-size:20px;text-transform:capitalize;margin:20px 0 0;text-align:center}.portfolio .portfolio-item-details{display:none}.portfolio-popup{position:fixed;top:0;left:0;width:100%;z-index:2000;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.portfolio-popup .pp-inner{width:100%;height:100vh;overflow-x:auto;padding:20px;color:#fff;border-radius:20px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-start}@media screen and (min-width: 1600px){.portfolio-popup .pp-inner{justify-content:center}}.portfolio-popup .pp-inner .pp-content{padding:1rem;background:var(--gradient);border-radius:30px;max-width:600px;width:auto;height:auto;opacity:1;margin-block:1rem 5%}.portfolio-popup .pp-inner .pp-content .pp-header{position:relative}.portfolio-popup .pp-inner .pp-content .pp-header .pp-close{height:40px;width:40px;padding:0;position:absolute;right:-2rem;top:-3rem;color:#fff;border:none;box-shadow:1px 2px 3px #fff;font-size:1rem}.portfolio-popup .pp-inner .pp-content .pp-header .pp-thumbnail{max-width:200px;margin-inline:auto}.portfolio-popup .pp-inner .pp-content .pp-header .pp-thumbnail img{border-radius:10px;pointer-events:none}.portfolio-popup .pp-inner .pp-content .pp-header h3{font-size:1.5em;text-transform:capitalize;margin-block:1rem .7rem;text-align:center;color:#fff}.portfolio-popup .pp-inner .pp-content .pp-body .description{width:100%;margin-bottom:1rem}.portfolio-popup .pp-inner .pp-content .pp-body .description h3,.portfolio-popup .pp-inner .pp-content .pp-body .description p{text-align:center;color:#fff}.portfolio-popup .pp-inner .pp-content .pp-body .description p{text-transform:uppercase;font-size:.8em;margin-bottom:1em}.portfolio-popup .pp-inner .pp-content .pp-body .description .skills{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.portfolio-popup .pp-inner .pp-content .pp-body .description .skills .skill-item{padding:.5rem 3rem;text-align:center;border-radius:50px;font-size:.8em;scale:1;color:#fff;border:1px solid #fff;transition:all .3s ease-in-out}.portfolio-popup .pp-inner .pp-content .pp-body .description .skills .skill-item:hover{background:var(--primary);scale:1.03;border-color:var(--primary)}.portfolio-popup .pp-inner .pp-content .pp-body .description .link{width:100%;display:flex;justify-content:center;margin-block:1.2rem}.portfolio-popup .pp-inner .pp-content .pp-body .description .link a{text-transform:lowercase;color:#fff;padding:.8rem 3rem;border-radius:2rem;background:var(--gradient);scale:1;font-size:.8em;transition:all .3s ease-in-out}.portfolio-popup .pp-inner .pp-content .pp-body .description .link a:hover{scale:1.05}.contact{color:var(--primary);color:#fff;position:relative;background-image:radial-gradient(circle,rgba(121,80,242,.7098039216) 5%,rgba(77,171,247,.5411764706) 95%)}.contact .form{padding-inline:5%;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}.contact .form .input-data{position:relative}.contact .form input,.contact .form textarea,.contact .form button{width:100%;padding:10px;margin-top:40px;border:none;outline:none;background:none;resize:none;color:#fff}.contact .form textarea{height:130px}.contact .form label,.contact .form ::placeholder,.contact .form button{color:#fff}.contact .form .button{width:100%;display:flex;justify-content:center;align-items:center;border:none}.contact .form button{cursor:pointer;width:60%;border-radius:35px;border:1px solid #fff;transition:all .3s ease-in-out}.contact .form button:hover{background:rgba(88,124,222,.6117647059);border:1px solid transparent}.contact .form .input-data label{position:absolute;pointer-events:none;bottom:10px;left:0;font-size:16px;transition:all .3s ease}.contact .form .textarea label{width:100%;bottom:20px}.contact .form .input-data input:focus~label,.contact .form .input-data input:valid~label,.contact .form .textarea textarea:valid~label{transform:translateY(-30px);font-size:14px;color:var(--primary)}.contact .form .textarea textarea:focus~label{transform:translateY(-120px);font-size:14px;color:var(--primary)}.contact .form .input-data input:focus~.underline:before,.contact .form .input-data input:valid~.underline:before,.contact .form .textarea textarea:focus~.underline:before,.contact .form .textarea textarea:valid~.underline:before{transform:scale(1)}.contact .form .input-data .underline{position:absolute;bottom:0;height:2px;width:100%;background:#fff}.contact .form .input-data .underline:before{position:absolute;content:"";height:2px;width:100%;background:var(--primary);transform:scaleX(0);transform-origin:center;transition:transform .3s ease}.contact .social{width:70%;margin-inline:auto}.contact .social ul{position:relative;display:flex;justify-content:center;margin-top:2rem}.contact .social ul li{position:relative;list-style:none;margin:10px}.contact .social ul li a{position:relative;width:50px;height:50px;display:inline-block;border-radius:10px;display:flex;justify-content:center;align-items:center;text-decoration:none;background:transparent;font-size:1.2rem;border:1px solid #fff;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:.5s;overflow:hidden}.contact .social ul li a fa-icon{color:#fff}.contact .social ul li a:hover{translate:0 -10px}.contact .social ul li a:before{content:"";position:absolute;top:0;left:0;width:50px;height:100%;background:rgba(255,255,255,.5);transform:skew(45deg) translate(150px);transition:.5s}.contact .social ul li a:hover:before{transform:skew(45deg) translate(-150px)}body.dark .contact{background-image:radial-gradient(circle,var(--primary),var(--bg))}footer{text-align:center;letter-spacing:3px}.dark{background-image:radial-gradient(circle,#587cde,#33335d)}