.app{font-family:Poppins,sans-serif;line-height:1.5;color:var(--clr-fg);background-color:var(--clr-bg)}.light{--clr-bg: #fcfcfc;--clr-bg-alt: #fff;--clr-fg: #555;--clr-fg-alt: #444;--clr-primary: #0074a6;--shadow: rgba(0, 0, 0, .16) 0px 10px 36px 0px, rgba(0, 0, 0, .06) 0px 0px 0px 1px;--clr-bg-badge: #0074a6;--clr-text-badge: var(--clr-bg-alt)}.dark{--clr-bg: #252729;--clr-bg-alt: #323338;--clr-fg: #e2e3e2;--clr-fg-alt: #f0f1f0;--clr-primary: #006895;--shadow: rgba(0, 0, 0, .16) 0px 10px 36px 0px, rgba(0, 0, 0, .06) 0px 0px 0px 1px;--clr-bg-badge: dimgray;--clr-text-badge: var(--clr-fg)}main{max-width:1200px;width:95%;margin:0 auto}.section{margin-top:5em}.section-title{text-align:center;margin-bottom:1em;text-transform:uppercase}.center{display:flex;align-items:center}.link{color:var(--clr-primary);padding:0 0 .3em;position:relative}.link:hover{color:var(--clr-primary)}.link:before{content:"";display:inline;width:0%;height:.2em;position:absolute;bottom:0;background-color:var(--clr-primary)}.link:hover:before,.link:focus:before{width:100%}.link-nav{color:var(--clr-fg);text-transform:lowercase;font-weight:500}.link-icon{color:var(--clr-fg)}.btn{display:block;padding:.8em 1.4em;font-weight:500;font-size:.9rem;text-transform:lowercase;transition:transform .2s ease-in-out}.btn-outline{color:var(--clr-primary);border:2px solid var(--clr-primary);position:relative;overflow:hidden;z-index:1}.btn-outline:hover,.btn-outline:focus{color:var(--clr-bg)}.btn-outline:before{content:"";position:absolute;background-color:var(--clr-primary);inset:0 100% 0 0;z-index:-1;transition:right .2s ease-in-out}.btn-outline:hover:before,.btn-outline:focus:before{right:0}.btn-plain{text-transform:initial;background-color:var(--clr-bg-alt);box-shadow:#00000026 0 3px 3px;border:0}.btn-plain:hover{transform:translateY(-4px)}.btn-icon{padding:0}.btn-icon:hover{color:var(--clr-primary)}.btn-icon:active{transform:translateY(-5px)}@media (max-width: 600px){.section{margin-top:4em}}.about{flex-direction:column;margin-top:3em}.about-role{margin-top:1.2em}.about-desc{font-size:1.1rem;max-width:850px;text-align:center}.about-desc,.about-contact{margin-top:2.4em}.about .link-icon{margin-right:.8em}.about .btn-outline{margin-right:1em}@media (max-width: 600px){.app .about{align-items:center;margin-top:2em}}.highlight-container,.highlight{position:relative;color:var(--clr-primary)}.about-picture{width:250px;height:250px;border-radius:50%;margin-bottom:2em;box-shadow:var(--shadow)}.flx-footer{display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding-top:5em;padding-bottom:2em}.footer-copyright{margin:1em 0}.nav-list{margin-right:1.5em;display:flex;font-size:1.1em}.nav-list-item{margin-left:1.5em}.app .nav-hamburger{display:none}.nav-theme{margin-top:.4em}@media (max-width: 600px){.nav-list{display:none;flex-direction:column;justify-content:center;align-items:center;position:fixed;inset:0;width:100%;height:100%;z-index:2}.nav-list-item{margin:.5em 0}.app .nav-hamburger{display:flex;z-index:2;margin-left:.8em}}.header{height:8em;max-width:1200px;width:95%;margin:0 auto;justify-content:end}@media (max-width: 600px){.header{height:6em}}.projects-container{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(18em,1fr));grid-gap:2em}.project{max-width:350px;margin:0 auto;background-color:var(--clr-bg-alt);box-shadow:var(--shadow);transition:transform .2s linear;border-radius:10px}.project-picture-container{position:relative;width:100%;height:200px;border-top-left-radius:inherit;border-top-right-radius:inherit;overflow:hidden}.project-picture{width:100%;height:200px;box-shadow:#00000029 0 1px;border-top-left-radius:inherit;border-top-right-radius:inherit;transition:opacity .3s ease}.project-picture.loading{opacity:0}.project-picture.loaded{opacity:1}.image-loader{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;background-color:var(--clr-bg-alt);z-index:1}.spinner{width:40px;height:40px;border:4px solid var(--clr-primary);border-top:4px solid transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.project-content{margin:2em 0;text-align:center;padding:2px}.project:hover{transform:translateY(-7px)}.project-description{margin-top:1em;padding:0 1em}.project-stack{display:flex;flex-wrap:wrap;justify-content:center;margin:1.2em 0}.project-stack-item{margin:.5em;font-weight:500;font-size:.9rem;color:var(--clr-text-badge);background-color:var(--clr-bg-badge);border-radius:10px;padding:0 1em}.project .link-icon{margin-left:.5em}.scroll-top{position:fixed;bottom:2em;right:4em;background-color:transparent}@media (max-width: 900px){.scroll-top{display:none}}.tabs{font-family:arial;margin:0 auto;width:70%;text-align:center;margin-top:15vh}.tab-buttons{margin-bottom:50px}button{margin-right:15px;font-size:20px;background:transparent;border:none;outline:none;padding:10px 20px;cursor:pointer;transition:all ease-in-out .2s;border-bottom:2px solid transparent}.active{border-bottom:2px solid var(--clr-primary);color:var(--clr-primary)}.tabs-cmp{flex-direction:column;margin-top:5em}.container-techstack-list{min-height:750px}.techstack-list{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(18em,1fr));grid-gap:2em;text-align:center}.techstack-item{display:flex;flex-direction:column;justify-content:center;align-items:center;align-content:center}.item-icon{margin-bottom:10px}.container-techstack-item{border-radius:10px}.container-techstack-item:hover{color:var(--clr-primary)}.material-ui-icon{width:40px;height:40px;fill:currentColor;margin-bottom:10px}*{padding:0;margin:0;border:0;outline:0;background-color:inherit;color:inherit;font-family:inherit;font-size:inherit;box-shadow:none;box-sizing:border-box}html{scroll-behavior:smooth}h1,h2,h3,h4{line-height:1.2;color:var(--clr-fg-alt)}h1{font-size:4rem;text-align:center}h2{font-size:2rem;text-align:center}h3{font-size:1.5rem}h4{font-size:1.3rem}ul{list-style-type:none}a{text-decoration:none}button{cursor:pointer}@media (max-width: 900px){h1{font-size:2.6rem}}
