:root{box-sizing:border-box;margin:0;padding:0}h1,h2,h3{font-weight:400}h2{text-align:center}a{color:#fff;text-decoration:none}li{list-style-type:none}@keyframes fade-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0%)}}@keyframes opacity-in{0%{opacity:0}to{opacity:1}}@keyframes spin-in{0%{transform:rotate(10deg)}to{transform:rotate(0)}}.fade-in-anim{animation:1.5s fade-in}.opacity-in-anim{animation:3s opacity-in}.spin-in-anim{animation:1s spin-in}.height-in-anim{animation:3s ease-out height-in}@media (width>=400px){button:hover{cursor:pointer;background:#918d8d}}:root{--color-a:#0f222c;--color-b:#343149;--color-c:#264353;color:#fff;--shadow-a:0px -8px 20px 5px var(--color-a);--shadow-b:0px -8px 5px 5px var(--color-a);--blur:#fff3;--img-bg:url(https://images.unsplash.com/vector-1768339220688-79c4294122e7?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D);font-family:Verdana,Geneva,Tahoma,sans-serif}body{background:linear-gradient(#13323f,#203a43,#2c5364) 0 0/cover no-repeat;margin:0 1em}h2{border-top:5px solid var(--color-a)}.selected{background-color:var(--color-b)!important}.icon-s{font-size:1.5em}.icon-m{font-size:2em}.icon-l{font-size:2.5em}ul{list-style:none}button{border:none;font-size:2em}.transition-move{transition:transform .5s}.transition-size{transition:width .6s}.text-about{max-width:30rem}.btn{background:#fff;border-radius:.2em;padding:.25em 1em}.container-btn{flex-direction:column;gap:4em;max-width:100%;display:flex}.content-about{background-color:var(--color-a);max-width:25em;box-shadow:var(--shadow-b);border-radius:1em;flex-direction:column;justify-content:center;align-items:center;margin:0 auto;padding:2em;display:flex;transform:translateY(1em)}.content-about,h2,h3{margin:0 auto}.container-footer{border-top:5px solid var(--color-a);-webkit-backdrop-filter:blur(15px);border-top-left-radius:0;border-top-right-radius:0;padding:.4em 2.5em .4em .4em}.container-footer>ul{flex-direction:row;justify-content:space-between;gap:2em;display:flex}.container-footer ul li:first-child{display:none}.container-history{flex-direction:column;height:fit-content;padding-top:4em;display:flex}.container-history>h2{width:100%}.btn-about{background-color:var(--color-a);border:4px solid var(--color-c);color:#fff;border-radius:2em;padding:.5em 1.5em;font-size:1.25em}.img-about{zoom:150%;object-fit:cover;object-position:center;width:9em;height:200px;margin:1em;padding:.5em}.container-skills{flex-direction:column;justify-content:center;gap:2em;display:flex}.skills{flex-wrap:wrap;grid-template-columns:1fr 1fr;justify-content:space-around;gap:2em;margin-bottom:3em;display:grid}.skill{flex-direction:column;align-items:center;display:flex}.skill>p{font-weight:500}.about-icons{flex-wrap:wrap;justify-content:space-around;width:100%;margin:3em 0;padding-left:0;display:flex}.icon{margin-bottom:.25em;font-size:4em}.img-project{width:100%;height:50%;box-shadow:var(--shadow-a);border-radius:20px 20px 0 0;display:block}.img-btns{justify-content:space-between;display:flex}.img-desc{max-width:960px}.projects{flex-wrap:wrap;justify-content:center;align-items:center;gap:3em;display:flex}body{margin:0 1em}.project-title{background-color:var(--color-a);text-align:left;border-top-left-radius:0;border-top-right-radius:0;padding:.25em .25em .25em .65em;font-weight:600}.project-desc{background-color:var(--color-a);border-bottom-right-radius:20px;margin-top:0;padding:.7em 1em}.project-card{flex-direction:column;display:flex}.project-stack{background-color:var(--color-a);border-radius:0 100px 100px 0;width:fit-content;padding:.5em 1em .5em .5em;font-size:.9em}.history-btns{flex-flow:wrap;justify-content:center;gap:.2em;display:flex}.history-btn{color:#fff;background-color:var(--color-a);border-radius:10px;width:100%;padding:1em;font-size:1.3em;transition:transform 80ms}.history-btn-close{opacity:.3;color:#fff;font-size:1.75em;transform:translateY(.4em)}.history-text{background-color:var(--color-a);word-break:normal;border-radius:1em;width:90%;padding:1em}.history-content{flex-direction:column;align-items:center;display:flex}.navbar{z-index:13;position:relative}.nav-top{background-color:var(--color-a);border-bottom:1px solid #fff;flex-direction:row-reverse;justify-content:start;align-items:center;width:100vw;padding-bottom:.5em;display:flex;position:fixed;top:0;left:0}.nav-btn{padding-left:.5em}.nav-title{filter:brightness(0)invert();width:250px;height:auto;display:none}.nav-li{width:100%;height:100%;padding:0;transition:transform .12s;position:fixed;top:2.75em;left:0;transform:translate(-200%)}.nav-li>li{background:#0f202799;margin:.1em;padding:2em 1em}.nav-li.active{transform:translate(0%)}.container-projects{flex-direction:column;gap:2em;margin:4em 0 0;padding-top:4em;display:flex}.section-title{width:100%;padding:1em 0}.container-about{padding-top:5em}.msg{pointer-events:none;background-color:var(--color-b);border-radius:100px;padding:.25em 1.5em;transition:transform .12s,opacity .12s;position:absolute;transform:translateY(9.2em)}.hide{opacity:0}.show{opacity:100}.overlay{opacity:0;transition:opacity .6s}.blur{-webkit-backdrop-filter:blur(10px);z-index:1;opacity:1;background:#0f202799;width:100vw;height:100vh;position:fixed;top:0;left:0}.project-text{flex-direction:column;align-items:start;width:100%}@media (width>=1400px){#root{max-width:2000px;margin:0 auto}.history-btn{border-radius:0;width:10em;padding:.25em}.history-btn:first-child{border-radius:20px 0 0 20px}.history-btn:last-child{border-radius:0 20px 20px 0}.history-btn:hover{transform:translateY(-5px)}.history-btn:active{transform:translateY(2.5px)}.blur{width:0;height:0}.nav-title{display:block}.skills{display:flex}.msg{display:block}.clickable:hover{cursor:pointer;color:var(--color-b)}.container-btn{flex-direction:row}.content-about{max-width:25em}.history-text{width:50em;height:3em}.history-btn-close{cursor:pointer}.history-btn-close:hover{opacity:1}.history-btn:hover,.btn-about:hover{background-color:var(--color-b)}.projects{flex-wrap:wrap;justify-content:space-between;display:flex}.project-text{flex-direction:column;align-items:start;max-width:30em}.container-projects{padding-top:0}.container-history{height:15em}.container-footer{background:#ffffff0d}.container-footer ul li:first-child{display:block}}@media (width>=800px){.project-text{flex-direction:column;align-items:start;max-width:30em}.nav-btn{display:none}.navbar{flex-direction:row;justify-content:space-between;display:flex}.nav-top{background:0 0;border:none;flex-direction:row;justify-content:space-between;align-items:center;width:fit-content;margin:0;padding:0;display:flex;position:relative;top:0;left:0}.nav-li{background:0 0;gap:3em;width:fit-content;transition:transform .12s;display:flex;position:relative;top:0;transform:translate(0%)}.nav-li>li{border:3px solid var(--color-c);cursor:pointer;border-radius:30px;padding:.5em 2em}.nav-li>li:hover{background-color:var(--color-b)}.nav-li.active{transform:translate(0%)}.container-footer>ul{justify-content:space-between}body{margin:0 5%}.img-project{cursor:pointer;max-width:30em;height:20em;transition:transform .2s ease-in,box-shadow .2s ease-in}.img-hero{z-index:-1;position:absolute}.section{border-radius:0 0 30px 30px;padding:2em}.img-project:hover{box-shadow:0px -8px 10px 5px var(--color-a);transform:scale(1.01)}}@media (width>=300px){.nav-title{display:block}}