.app{display:flex;flex-direction:column;min-height:100svh}.click-box{--x: 0;--y: 0;position:fixed;z-index:9999999999;left:var(--x);top:var(--y);transform:translate(-50%,-50%);pointer-events:none;width:30px;height:30px;border:var(--border-width) solid var(--color-white);border-radius:calc(var(--border-radius) / 1.35);background-color:transparent;mix-blend-mode:difference;opacity:1;transform:translate(-50%,-50%) scale(0)}.click-box.click-box-active{animation:scaleAndFade .3s ease-out}@keyframes scaleAndFade{0%{opacity:1;transform:translate(-50%,-50%) scale(0)}50%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-50%) scale(1.2)}}@media (prefers-reduced-motion){.click-box.click-box-active{animation:none}}.footer{display:flex;align-items:center;position:relative;padding-block:var(--space-m)}.footer .footer-content{display:flex;gap:var(--space-s);flex-wrap:wrap;align-items:end;justify-content:space-between}.footer .weather-forecast{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2xs)}.footer .weather{display:flex;align-items:center;gap:var(--space-3xs)}.footer .temperature{transform:translateY(-.25rem);align-self:flex-start}.externals{display:flex;gap:var(--space-xs);margin-inline-start:calc(var(--space-3xs) * -1)}.modal{justify-content:center;align-items:center;border:none;background-color:transparent;padding:0;max-width:initial;max-height:initial;overscroll-behavior:contain}.modal[open]{display:flex}.modal::backdrop{background:var(--color-opaque-background)}.modal .close{position:fixed;right:var(--app-padding);top:var(--space-m)}a.header-nav-link{display:flex;margin:0;position:relative;-webkit-user-select:none;user-select:none;padding-bottom:var(--border-width);padding:var(--space-2xs);border:var(--border-width) solid transparent;transition:border-color .2s ease-out,background-color .1s ease-out}a.header-nav-link-active{color:var(--color-link-active);border-radius:var(--border-radius);border-color:var(--color-border)}@media (hover: hover){a.header-nav-link:hover{border-color:var(--color-border);background-color:var(--color-brand);color:var(--color-hover-text)}}.overlay-nav{position:relative;background-color:var(--color-secondary);display:flex;inline-size:calc(100dvw - 2 * var(--app-padding));block-size:75dvh;justify-content:center;align-items:center}.overlay-nav .navs-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xl);list-style:none;margin:0;padding:0}@media only screen and (max-height: 400px){.overlay-nav{block-size:50dvh}.overlay-nav .navs-wrapper{flex-direction:row}}.theme-switcher{position:relative;overflow:hidden}.theme-switcher .theme-icon{display:flex;position:absolute;transform:translateY(200%);opacity:0}.theme-switcher.animate .theme-icon{transition:transform .3s ease-out,opacity .3s ease-in}.theme-switcher .theme-icon.show-icon{transform:translateY(0);opacity:1}@media (prefers-reduced-motion){.theme-switcher.animate .theme-icon{transition-duration:0s}}.header{display:flex;align-items:center;justify-content:center;padding-block:var(--space-m);position:sticky;width:100%;z-index:var(--header-z-index);background-color:var(--color-secondary);top:0;transition:background-color .1s ease-out}.header .header-content{display:flex;align-items:center;justify-content:center}.header .header-name{margin:0;flex:1}.header .buttons{flex:1;display:flex;justify-content:flex-end;gap:var(--space-xs);flex-grow:0}.header .nav{margin-inline-end:var(--space-s)}.header .nav ul{display:flex;align-items:center;gap:var(--space-2xs);list-style:none;margin:0;padding:0}.header button.overlay-menu-button{display:none}@media only screen and (max-width: 768px){.header .nav{display:none}.header .buttons{flex-grow:0}.header button.overlay-menu-button{display:inline-flex}}.not-found{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.tag{display:inline-flex;padding:var(--space-2xs)}.skills-list{display:flex;flex-wrap:wrap;max-inline-size:45em;padding:0;gap:var(--space-s)}.about{display:flex;flex-direction:column;gap:var(--space-3xl)}.workplace{max-inline-size:70ch}.workplace .logo{height:3rem;margin-block-end:var(--space-s)}.workplace .logo.fixed-width{height:auto;width:8rem}.workplace .workplace-name{margin-block-end:var(--space-2xs)}.workplaces{display:grid;gap:var(--space-2xl)}.workplaces :is(li:not(:last-child)){margin-block-end:.5em}.home{display:flex;flex:1;align-self:center;align-items:flex-start;flex-direction:column}.home h1{display:flex;flex-direction:column;margin:0}.home h1 .h2{margin:0}.home p:first-of-type{margin-block-end:var(--space-s)}.project .project-image{display:block;margin-block-end:var(--space-s);width:100%}.projects{display:grid;gap:var(--space-3xl)}.projects .skills-list{display:flex;flex-wrap:wrap;max-inline-size:45em;padding:0;gap:var(--space-s)}:root{--white-key-width: clamp(30px, 8vw, 70px);--white-key-height: calc(var(--white-key-width) * 3.75);--black-key-width: calc(var(--white-key-width) * .75);--black-key-height: calc(var(--white-key-height) * .666);--key-margin: calc(var(--white-key-width) * .08);--black-margin-side: calc(var(--black-key-width) * -.5);--black-margin-top: calc(var(--white-key-height) * -.1667)}.piano{display:flex;justify-content:center;align-items:center;margin-block-start:1.5rem;background-color:var(--color-black);padding:var(--space-xs);border-radius:var(--border-radius)}.piano-key{flex-shrink:0;width:var(--white-key-width);height:var(--white-key-height);margin-inline:var(--key-margin);border-radius:5px;line-height:0;cursor:pointer;padding:0}.white-key{background-color:var(--color-white)}.black-key{background-color:var(--color-black);width:var(--black-key-width);height:var(--black-key-height);margin-left:var(--black-margin-side);margin-right:var(--black-margin-side);margin-top:var(--black-margin-top);z-index:1;position:relative}.piano-key:focus-visible,.piano-key:hover{outline:var(--border-width) solid var(--color-white)}.piano-key:focus-visible.black-key,.piano-key:hover.black-key{outline-color:var(--color-black)}:root{--color-white: #f3f3e9;--color-white-opaque: rgba(243, 243, 233, .9);--color-black: #1a1a1b;--color-black-opaque: rgba(26, 26, 27, .9);--color-primary: var(--color-black);--color-secondary: var(--color-white);--color-brand: var(--color-black);--color-selection: var(--color-secondary);--color-selection-background: var(--color-primary);--color-opaque-background: var(--color-white-opaque);--color-border: var(--color-primary);--color-text: var(--color-primary);--color-brand-text: var(--color-secondary);--color-hover-text: var(--color-secondary);--color-link-hover: var(--color-brand);--color-link-active: var(--color-text);--color-outline: var(--color-text);--color-hover-background: var(--color-brand)}:root[data-theme=dark]{--color-primary: var(--color-white);--color-secondary: var(--color-black);--color-brand: var(--color-white);--color-opaque-background: var(--color-black-opaque);--color-brand-text: var(--color-secondary);--color-hover-text: var(--color-secondary)}:root{--space-3xs: .25rem;--space-2xs: .5rem;--space-xs: .75rem;--space-s: 1rem;--space-m: 1.5rem;--space-l: 2rem;--space-xl: 3rem;--space-2xl: 4rem;--space-3xl: 6rem}@font-face{font-family:Rubik;font-style:normal;font-weight:300 900;src:url(/assets/Rubik-VariableFont_wght-DAFAXoY0.ttf)}@font-face{font-family:Libre Baskerville;font-style:normal;font-weight:400;src:url(/assets/LibreBaskerville-Regular-IqrMKr3N.ttf)}@font-face{font-family:Libre Baskerville;font-style:normal;font-weight:700;src:url(/assets/LibreBaskerville-Bold-D5OMvh2V.ttf)}:root{--font-size-body: clamp(1rem, 2.5vw, 1.25rem);--font-size-h1: clamp(2rem, 5vw, 3.5rem);--font-size-h2: clamp(1.5rem, 3.5vw, 2.25rem);--font-size-h3: clamp(1.125rem, 2.5vw, 1.5rem);--font-size-display: clamp(4.7rem, 16.3vw, 12.4rem);--content-line-height: 1.5;--heading-line-height: normal;--display-line-height: 1;--font-size: var(--font-size-body);--font: Rubik, sans-serif}h1,h2,h3,h4,h5,h6,p{margin-top:0;max-inline-size:70ch}h1,h2,h3,h4 .h1,.h2,.h3,.h4{font-family:Libre Baskerville,serif}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-weight:700;line-height:var(--heading-line-height);margin-block-end:1em}h1,.h1{font-size:var(--font-size-h1)}h2,.h2{font-size:var(--font-size-h2)}h3,.h3{font-size:var(--font-size-h3)}.text-display{font-size:var(--font-size-display);line-height:var(--display-line-height)}p:not(:last-child){margin-block-end:1em}p:last-child{margin-block-end:0}ul,ol,li,p{line-height:var(--content-line-height)}ul:not(:last-child):has(+:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6)),ol:not(:last-child):has(+:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6)),li:not(:last-child):has(+:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6)),p:not(:last-child):has(+:where(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6)){margin-block-end:2.5em}ul{padding-inline-start:1.4em}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}a,.link,button,.button,.primary-button,.icon-button{-webkit-tap-highlight-color:transparent}a,.link{color:var(--color-text);text-decoration:none;border-radius:var(--border-radius)}button,.button,.icon-button{display:inline-flex;align-items:center;justify-content:center;background:var(--color-secondary);border:var(--border-width) solid transparent;margin:0;padding:var(--space-2xs);font:var(--font-size) inherit;border-radius:var(--border-radius);cursor:pointer;-webkit-user-select:none;user-select:none;color:var(--color-text);line-height:inherit}.primary-button{display:inline-flex;align-items:center;gap:1rem;background-color:var(--color-brand);color:var(--color-brand-text);border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);padding:1rem 1.5rem;transition:background-color .1s ease-out}.icon-button{min-width:2.5rem;min-height:2.5rem;background-color:var(--color-secondary);border:var(--border-width) solid var(--color-border);transition:background-color .1s ease-out}.icon-button svg *{transition:fill .08s ease-out;fill:currentColor}.external-link{display:inline-flex;align-items:center;gap:.3em}.external-link svg{width:1em;aspect-ratio:1}.link,.external-link{font-weight:500;text-decoration:underline}a:focus-visible,button:focus-visible{outline:var(--outline);outline-offset:var(--outline-offset)}@media (hover: hover){.icon-button:hover{background-color:var(--color-hover-background);color:var(--color-hover-text)}.primary-button:hover{background-color:var(--color-secondary);color:var(--color-primary-text)}}:root{--border-radius: 16px;--border-width: 1px;--modal-z-index: 100;--header-z-index: 99;--icon-size: 1.25rem;--app-padding: var(--space-m);--outline-offset: 2px;--outline-width: var(--border-width);--outline: var(--color-outline) solid var(--outline-width)}*,*:before,*:after{box-sizing:border-box}::selection{color:var(--color-selection);background:var(--color-selection-background)}body{margin:0;font-family:var(--font);font-size:var(--font-size);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:var(--color-secondary);color:var(--color-text);overflow-y:scroll;transition:background-color .1s ease-out,color .1s ease-out}main{display:flex;padding-block:var(--space-l);flex:1}.site-content{max-width:1280px;padding-inline:var(--app-padding);margin:0 auto;width:100%}svg{inline-size:var(--icon-size);block-size:var(--icon-size);flex-shrink:0}.box{border-radius:var(--border-radius);border:var(--border-width) solid var(--color-border)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-scroll{overflow:hidden}