.app{position:relative;display:flex;flex-direction:column;gap:var(--space-2xl);min-height:100vh;min-height:100dvh;word-break:break-word}@media only screen and (max-width: 767.98px){.app{gap:var(--space-xl)}}.click-svg{--x: 0;--y: 0;position:fixed;z-index:9999999999;left:var(--x);top:var(--y);transform:translate(-50%,-50%);stroke-dasharray:10;stroke-dashoffset:-10;pointer-events:none}.click-svg path{stroke:var(--color-primary)}.click-svg.click-svg-active{animation:animateStroke .2s ease-out}@keyframes animateStroke{to{stroke-dashoffset:10}}@media (prefers-reduced-motion){.click-svg.click-svg-active{animation:none}}.footer{display:flex;align-items:center;position:relative;padding-block:var(--space-s)}.footer .footer-content{display:flex;gap:var(--space-s);flex-wrap:wrap;align-items:center;justify-content:space-between}.footer .weather-forecast{display:flex;align-items:center;gap:var(--space-2xs)}.footer .weather{display:flex;gap:var(--space-4xs)}.footer .temperature{transform:translateY(-.5rem);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}.modal[open]{display:flex}.modal::backdrop{background:var(--color-opaque-background)}.modal .close{position:fixed;right:var(--app-padding);top:var(--space-s)}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:transform .1s ease-out,border-color .1s ease-out,box-shadow .1s ease-out}a.header-nav-link-active{color:var(--color-link-active);background-color:var(--color-hover-background);border-radius:var(--border-radius);border-color:var(--color-border)}@media (hover: hover){a.header-nav-link:hover{box-shadow:calc(3 * var(--hover-anim-offset-x)) calc(3 * var(--hover-anim-offset-y)) 0 0 var(--color-box-shadow);transform:translate(calc(-1 * var(--hover-anim-offset-y)),calc(-1 * var(--hover-anim-offset-x)));border-color:var(--color-border)}}.overlay-nav{position:relative;background-color:var(--color-secondary);min-width:300px;min-height:400px;display:flex;justify-content:center;align-items:center;overflow:hidden}.overlay-nav .navs-wrapper{block-size:40%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xl);list-style:none;margin:0;padding:0}.overlay-nav .nav-item{transform:translateY(-200%);opacity:0;animation:enterNavItem .2s cubic-bezier(.51,.15,.5,1.26) forwards}.overlay-nav .nav-item:nth-child(1){animation-delay:.2s}.overlay-nav .nav-item:nth-child(2){animation-delay:.1s}.overlay-nav .nav-item:nth-child(3){animation-delay:.02s}.overlay-nav .nav-item:nth-child(4){animation-delay:.08s}@keyframes enterNavItem{to{opacity:1;transform:translateY(0)}}@media only screen and (max-height: 400px){.overlay-nav{min-height:100px;min-width:80vw}.overlay-nav .navs-wrapper{flex-direction:row}}@media (prefers-reduced-motion){.overlay-nav .nav-item{animation:none;transform:translate(0);opacity:1}}.theme-switcher{position:relative;overflow:hidden}.theme-switcher :is(input){width:0;height:0;opacity:0;position:absolute}.theme-switcher .theme-icon{display:flex;position:absolute;transform:translateY(200%);transition:transform .3s ease-out,opacity .3s ease-in;opacity:0}.theme-switcher .theme-icon.show-icon{transform:translateY(0);opacity:1}@media (prefers-reduced-motion){.theme-switcher .theme-icon{transition-duration:0s}}.header{position:sticky;top:0;z-index:var(--header-z-index);display:flex;align-items:center;justify-content:center;padding-block:var(--space-s);background-color:var(--color-secondary)}.header:after{content:"";position:absolute;height:var(--border-width);background-color:var(--color-border);width:100%;translate:0 -50%;bottom:calc(var(--border-width) * -1);scale:0 1;transition:scale .2s ease-out;transform-origin:right}.header .header-content{display:flex;align-items:center;justify-content:center}.header .hide-span{transform:scaleX(0);opacity:0}.header .hide-span:last-of-type{transform:translate(-1.6em) scaleX(0)}.header.show-border:after{scale:1 1}.header .move-q{transform:translate(-1.6em)}.header .header-name{margin:0;flex:1}.header .header-name span{display:inline-block;transform-origin:left;transition:transform .2s ease-out,opacity .2s ease-out}.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: 767.92px){.header .nav{display:none}.header .buttons{flex-grow:0}.header button.overlay-menu-button{display:inline-flex}}.tag{display:inline-flex;padding:var(--space-2xs) var(--space-xs);background-color:var(--color-secondary)}.tag:nth-child(1){transition-delay:0s}.tag:nth-child(2){transition-delay:.05s}.tag:nth-child(3){transition-delay:.1s}.tag:nth-child(4){transition-delay:.15s}.tag:nth-child(5){transition-delay:.2s}.tag:nth-child(6){transition-delay:.25s}.tag:nth-child(7){transition-delay:.3s}.tag:nth-child(8){transition-delay:.35s}.tag:nth-child(9){transition-delay:.4s}.tag:nth-child(10){transition-delay:.45s}.tag:nth-child(11){transition-delay:.5s}.tag:nth-child(12){transition-delay:.55s}.tag:nth-child(13){transition-delay:.6s}.tag:nth-child(14){transition-delay:.65s}.tag:nth-child(15){transition-delay:.7s}.tag:nth-child(16){transition-delay:.75s}.tag:nth-child(17){transition-delay:.8s}.tag:nth-child(18){transition-delay:.85s}.tag:nth-child(19){transition-delay:.9s}.tag:nth-child(20){transition-delay:.95s}@media only screen and (max-width: 500px){.tag{transition-delay:0s!important}}.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:var(--font-size-5);margin-block-end:var(--space-s)}.workplace .logo.fixed-width{height:auto;width:var(--font-size-10)}.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-direction:column;align-items:center;text-align:center}.home .home-content :is(h1){font-size:var(--font-size-8)}.home .home-content :is(h2){font-size:var(--font-size-4)}.home .home-content :is(p){font-size:var(--font-size-2)}.home .my-photo-wrapper{padding:0;margin:0;overflow:hidden;margin-block-end:var(--space-m);display:flex;width:10rem;animation:showPhoto .3s ease-out .3s forwards;opacity:0}.home .my-photo{transition:translate .2s ease-out;display:block;height:10rem}.home .para-wrapper{overflow:hidden;margin:0}.home .para-wrapper:nth-child(2){margin-block:.25em}.home .para-wrapper:nth-child(3){position:relative}.home span.para-one,.home span.para-two{display:inline-block;animation:showWord .5s ease-out forwards;transform:translateY(100%)}.home .para-three{display:block;animation:showParaThreeWord .2s ease-out 2s forwards;opacity:0;transform-origin:top center;transform:translateY(-10px);max-inline-size:40ch}.home .primary-button{opacity:0;animation:showButton .2s ease-out 2s forwards}@keyframes showPhoto{to{opacity:1}}@keyframes showWord{70%{transform:translateY(-5%)}to{transform:translateY(0)}}@keyframes showButton{to{opacity:1}}@keyframes showParaThreeWord{to{opacity:1;transform:translateY(0)}}@media (hover: hover){.home .my-photo-wrapper:hover .my-photo{translate:-100% 0}.home .my-photo-wrapper:hover .show-photo:first-child{translate:-50% 0}}@media (prefers-reduced-motion){.home span.para-one,.home span.para-two,.home .para-three{animation-duration:0s!important;animation-delay:0s!important}}@media only screen and (max-width: 767.98px){.home .home-content :is(h1){font-size:var(--font-size-7)}.home .home-content :is(h2){font-size:var(--font-size-3)}.home .home-content :is(p){font-size:var(--font-size-1)}.home .home-content span.para-one,.home .home-content span.para-two{transform:translateY(200%)}}.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)}.piano{display:flex;justify-content:center;align-items:center;margin-block-start:1.5rem}.piano-key{flex-shrink:0;width:40px;height:150px;margin-inline:2px;border-radius:5px;line-height:0;cursor:pointer;transition:transform .1s ease-out}.white-key{background:var(--color-primary)}.black-key{background:var(--color-secondary);width:30px;height:100px;margin-left:-15px;margin-right:-15px;margin-top:-25px;z-index:1;position:relative}@media (hover: hover){.piano .piano-key:not(:disabled):focus-visible{background-color:var(--color-primary)}.piano .piano-key:not(:disabled):focus-visible.black-key{outline-color:var(--color-secondary);background-color:var(--color-secondary)}.piano .piano-key:hover{transform:scale(1.05)}}@media (max-width: 500px){.piano-key{width:35px;height:120px}.black-key{width:25px;height:70px;margin-left:-12.5px;margin-right:-12.5px;margin-top:-20px}}:root{--color-white: #f3f3e9;--color-white-opaque: rgba(243, 243, 233, .98);--color-black: #1a1a1b;--color-black-opaque: rgba(26, 26, 27, .98);--color-primary: var(--color-black);--color-secondary: var(--color-white);--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-link-hover: var(--color-text);--color-link-active: var(--color-text);--color-outline: var(--color-text);--color-box-shadow: var(--color-primary);--color-hover-background: transparent}:root[data-theme=dark],:root[data-theme=dark] dialog::backdrop{--color-primary: var(--color-white);--color-secondary: var(--color-black);--color-opaque-background: var(--color-black-opaque)}:root{--space-5xs: clamp(.25rem, .2375rem + .0625vi, .3125rem);--space-4xs: clamp(.25rem, .2375rem + .0625vi, .3125rem);--space-3xs: clamp(.25rem, .2375rem + .0625vi, .3125rem);--space-2xs: clamp(.5rem, .475rem + .125vi, .625rem);--space-xs: clamp(.75rem, .7125rem + .1875vi, .9375rem);--space-s: clamp(1rem, .95rem + .25vi, 1.25rem);--space-m: clamp(1.5rem, 1.425rem + .375vi, 1.875rem);--space-l: clamp(2rem, 1.9rem + .5vi, 2.5rem);--space-xl: clamp(3rem, 2.85rem + .75vi, 3.75rem);--space-2xl: clamp(4rem, 3.8rem + 1vi, 5rem);--space-3xl: clamp(6rem, 5.7rem + 1.5vi, 7.5rem);--space-4xl: clamp(6rem, 5.7rem + 1.5vi, 7.5rem);--space-5xl: clamp(6rem, 5.7rem + 1.5vi, 7.5rem)}@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-0: clamp(1rem, .95rem + .25vi, 1.25rem);--font-size-1: clamp(1.2rem, 1.1275rem + .3625vi, 1.5625rem);--font-size-2: clamp(1.44rem, 1.3374rem + .5131vi, 1.9531rem);--font-size-3: clamp(1.728rem, 1.5853rem + .7134vi, 2.4414rem);--font-size-4: clamp(2.0736rem, 1.878rem + .9782vi, 3.0518rem);--font-size-5: clamp(2.4883rem, 2.223rem + 1.3264vi, 3.8147rem);--font-size-6: clamp(2.986rem, 2.6295rem + 1.7824vi, 4.7684rem);--font-size-7: clamp(3.5832rem, 3.1077rem + 2.3773vi, 5.9605rem);--font-size-8: clamp(4.2998rem, 3.6697rem + 3.1508vi, 7.4506rem);--font-size-9: clamp(5.1598rem, 4.3291rem + 4.1534vi, 9.3132rem);--font-size-10: clamp(6.1917rem, 5.1018rem + 5.4498vi, 11.6415rem);--content-line-height: 1.5;--heading-line-height: normal;--font-size: var(--font-size-0);--font: Rubik, sans-serif}h1,h2,h3,h4,h5,h6,p{margin-top:0;max-inline-size:70ch}h1,h2,h3,.h1,.h2,.h3{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-5)}h2,.h2{font-size:var(--font-size-3)}h3,.h3{font-size:var(--font-size-1)}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{padding-inline-start:1.4em}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.animate-transform-bottom{opacity:0;transform:translateY(32px);transition:opacity .3s ease-out,transform .3s ease-out}.animate-transform-bottom.animated{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion: reduce){.animate-transform-bottom{opacity:1!important;transform:translateY(0)!important;transition:none!important}}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:none;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;margin-block-start:1.5rem;border:var(--border-width) solid var(--color-border);border-radius:var(--border-radius);padding:1rem 1.5rem;transition:box-shadow .1s ease-out,transform .1s ease-out}.icon-button{background-color:var(--color-secondary);border:var(--border-width) solid var(--color-border);transition:box-shadow .1s ease-out,transform .1s ease-out}.icon-button svg *{transition:fill .08s ease-out;fill:var(--color-primary)}.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}@media (hover: hover){a:hover{color:var(--color-link-hover);background-color:var(--color-hover-background)}a:focus-visible,button:focus-visible,.icon-button:focus-visible,.icon-button:has(:is(input[type=checkbox]):focus-visible){outline:var(--outline);outline-offset:var(--outline-offset);background-color:var(--color-hover-background)}.primary-button:hover{box-shadow:calc(3 * var(--hover-anim-offset-x)) calc(3 * var(--hover-anim-offset-y)) 0 0 var(--color-box-shadow);transform:translate(calc(-1 * var(--hover-anim-offset-y)),calc(-1 * var(--hover-anim-offset-x)))}.icon-button:hover{box-shadow:calc(2 * var(--hover-anim-offset-x)) calc(2 * var(--hover-anim-offset-y)) 0 0 var(--color-box-shadow);transform:translate(calc(-1 * var(--hover-anim-offset-y)),calc(-1 * var(--hover-anim-offset-x)))}}@media (hover: none){a:focus-visible,button:focus-visible{outline:none}}:root{--border-radius: 18px;--border-width: 2px;--hover-anim-offset-x: 1px;--hover-anim-offset-y: 1px;--box-shadow-offset-x: 4px;--box-shadow-offset-y: 4px;--modal-z-index: 100;--header-z-index: 99;--icon-size: var(--font-size-1);--app-padding: var(--space-m);--outline-offset: 2px;--outline-width: var(--border-width);--outline: var(--color-outline) solid var(--outline-width)}:root,body,#root{min-block-size:100vh;min-block-size:100dvh}*,*: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}main{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}