@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap";*{margin:0;font-family:JetBrains Mono,monospace;--primary: #fff9ea;--secondary: #c4de92;--border-thickness: clamp(.15rem, .5vw, .2rem);cursor:none}a{color:inherit;text-decoration:none}html,body{padding:0;margin:0;height:100%;scrollbar-width:none}button,button:active,button:focus,button:hover{box-shadow:none}#root{position:relative;min-height:100%;overflow:hidden}#root>#background{position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:var(--primary);filter:url(#my-filter)}.circle{position:fixed;display:none;top:0;left:0;pointer-events:none;width:20px;height:20px;border-radius:50%;background-color:#fff}div#pointer{mix-blend-mode:difference}header>img,header>h1,header>h3,header>nav,main>*{opacity:0}.introAnimation{animation:scrollAnimation 1.5s ease forwards}@keyframes scrollAnimation{0%{filter:blur(7px);opacity:0}to{filter:blur(0px);opacity:1}}header{padding-top:clamp(1.25rem,5vh,3rem);display:flex;flex-direction:column;align-items:center;background-color:transparent}header>img{border-radius:50%;width:clamp(7rem,20vw,15rem);height:clamp(7rem,20vw,15rem);border:solid clamp(.2rem,1vw,.5rem) black;mix-blend-mode:multiply}h1{font-size:clamp(2rem,6vw,5rem);width:fit-content;height:fit-content}h3{font-size:clamp(1rem,3vw,2rem)}header>div#box{width:25rem;height:7rem;display:flex;align-content:flex-end;flex-wrap:wrap;justify-content:flex-end;position:absolute;transform:translate(-70%);z-index:1}header>div#box>div{display:flex;align-items:center;text-align:center;height:fit-content;transform-origin:bottom right;padding:1rem;border-radius:1rem;border:solid black .2rem;z-index:1;background-color:var(--secondary);animation:popup .5s forwards ease}@keyframes popup{0%{transform:scale(.1)}to{transform:scale(1)}}header>div#box svg{position:absolute;bottom:1px;right:1rem;transform:translateY(100%);z-index:2}div#box.disabled{display:none}header>nav{display:flex;gap:clamp(1.2rem,2vw,2rem);margin-top:clamp(1rem,5vh,2rem)}header>nav>*{transition:transform 30ms ease-in}header>nav>button:hover{transform:scale(1.1)}header>nav>ul>li:hover{transform:scale(1.2)}header>nav>ul{position:relative;list-style:none;display:grid;grid-template-columns:auto auto auto;border-radius:1rem;padding:0rem 1rem;border:solid var(--border-thickness) black}header>nav>button{border:solid var(--border-thickness) black;border-radius:1rem;background-color:transparent;font-size:clamp(1.2rem,3vw,1.5rem);padding:.3rem 1.5rem}header nav>button a svg{position:relative;width:1rem;height:auto;margin-left:.5rem}@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}header li{display:flex;align-items:center;gap:.5rem;padding:0rem clamp(.5rem,1vw,1.5rem)}header li a>svg{display:block}.contact-icons{height:clamp(1rem,4vw,1.5rem);width:auto}#work-education{position:relative;margin:2rem auto;padding:clamp(1rem,3vw,3rem);padding-bottom:0;width:min(75vw,60rem);height:auto;border:solid black var(--border-thickness);border-radius:clamp(1.5rem,2vw,2rem);transition:height var(--animation-delay) ease}#work-education .selected{display:flex;opacity:0;animation:fadeEffect var(--animation-delay) ease var(--animation-delay) forwards}#work,#education{display:none;position:relative;top:0;right:0;bottom:0;left:0;flex-direction:column;align-items:flex-start;opacity:1;transition:opacity 3s ease}#work-education .card{padding-bottom:2rem;width:100%}#work-education .card>.header{display:grid;grid-template-columns:repeat(2,50%)}#work-education .card>.header>h4,#work-education .card>.header>p,#work-education .card>ul{font-size:clamp(.8rem,2vw,1rem)}#work-education .card>.header>p{justify-self:end;text-align:right;width:fit-content;height:fit-content}#work-education .card>ul{padding-top:1rem;padding-left:1rem}main{position:relative;display:flex;flex-direction:column;align-items:center}main nav{--radius: clamp(1rem, 1vw, 1.5rem);--border-thickness: clamp(.2rem, .5vw, .3rem);position:relative;margin-top:clamp(1rem,5vh,2rem);width:max-content;display:flex;border:solid black var(--border-thickness);border-radius:var(--radius);overflow:hidden}main button{background-color:var(--primary);padding:2vw 4vw;padding:clamp(.2rem,1.5vw,.5rem) clamp(1rem,3vw,2rem);border:none}main button:hover,main button:hover>h3,main button.selected,main button.selected>h3{background-color:#000;color:var(--primary)}main h3{font-size:clamp(1.25rem,3vw,2rem)}.card>h3{font-size:clamp(1.1rem,2vw,2rem)}.card>h4{font-size:clamp(1rem,2vw,1.5rem)}#projects-technologies{position:relative;margin:2rem auto;padding:clamp(1rem,3vw,3rem);padding-bottom:0;width:min(75vw,60rem);border:solid black var(--border-thickness);border-radius:clamp(1.5rem,2vw,2rem);transition:height var(--animation-delay) ease}*{--animation-delay: 1.5s}#projects-technologies .selected{display:flex;opacity:0;animation:fadeEffect var(--animation-delay) ease var(--animation-delay) forwards}#projects,#technologies{display:none;position:relative;top:0;right:0;bottom:0;left:0;flex-wrap:wrap;align-items:flex-start;align-content:space-between;justify-content:space-between;opacity:1;transition:opacity 3s ease}#projects-technologies .card{padding-bottom:2rem;width:100%}#projects-technologies .card>.header{display:grid;grid-template-columns:repeat(2,50%)}#projects-technologies .card>h4{font-size:clamp(1rem,2vw,1.5rem)}#projects-technologies .card p{font-size:clamp(.8rem,2vw,1rem)}#projects-technologies .card>ul{padding-top:1rem;padding-left:1rem}#technologies .card{width:min-content}#projects h3>svg{margin-left:1rem;opacity:0}#projects h3{transition:transform .5s;transform-origin:bottom left}#projects h3:hover{transform:scale(1.1)}#projects h3:hover>svg{animation:scrollAnimation .5s ease forwards}@keyframes fadeEffect{0%{opacity:0}to{opacity:1}}