@charset "UTF-8";article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary{display:block}audio,canvas,video{display:inline-block}audio:not([controls]){display:none;height:0}[hidden],template{display:none}html{background:#fff;color:#000;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a{background:transparent}a:focus{outline:thin dotted}a:hover,a:active{outline:0}h1{font-size:2em;margin:.67em 0}h2{font-size:1.5em;margin:.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:.83em;margin:1.67em 0}h6{font-size:.75em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:"“" "”" "‘" "’"}q:before,q:after{content:"";content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0;white-space:normal}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline}button,input{line-height:normal}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{cursor:pointer}button[disabled],input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}input[type=search]{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}*,*:after,*:before{box-sizing:border-box}@font-face{font-family:Jersey15;src:url(./Jersey15-Regular-B-0jbNlp.ttf);font-weight:400;font-style:normal}*,*:before,*:after{font-weight:400}:root{--clr-primary: 235, 100%, 89%;--clr-secondary: 0, 0%, 100%;--clr-pink: 342, 79%, 44%;--clr-orange: 14, 86%, 42%;--clr-blue: 209, 91%, 34%;--clr-voilet: 266, 69%, 49%;--bg-primary: 234, 92%, 15%;--bg-secondary: 234, 92%, 35%;--bg-footer: 234, 93%, 11%;--font-family: "Jersey15", sans-serif}@keyframes show{0%{opacity:0}to{opacity:1}}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes popup{0%{scale:.5}to{scale:1}}@keyframes slide-from-top{to{transform:translateY(0)}}@keyframes slide-out-to-bottom{to{transform:translateY(200px)}}@keyframes loader-text{0%{fill:hsl(var(--clr-secondary),0);stroke:hsl(var(--clr-secondary));stroke-dashoffset:25%;stroke-dasharray:0 50%;stroke-width:2}40%{fill:hsl(var(--clr-secondary),0);stroke:hsl(var(--clr-secondary))}55%{fill:hsl(var(--clr-secondary),0);stroke:hsl(var(--clr-secondary));stroke-width:3}70%,to{fill:hsl(var(--clr-secondary));stroke:hsl(var(--clr-secondary),0);stroke-dashoffset:-25%;stroke-dasharray:50% 0;stroke-width:0}}@keyframes scroll-down{0%{transform:translateY(0);opacity:0}60%{transform:translateY(30%);opacity:1}}#root:has(+#modal-root dialog#loader[open]){visibility:hidden;opacity:0}#root:has(+#modal-root dialog#loader[open]) #scroll-down{display:none!important}dialog#loader[open]{display:grid;place-content:center;width:100%;height:100%;max-width:100%;max-height:100%;padding:1em;border:none;background-color:transparent;overflow:hidden}dialog#loader[open] svg{width:clamp(12.5em,40vw,18.75em);height:100%;fill:hsl(var(--clr-secondary));animation:loader-text 3.5s forwards,hide .25s 3.2s forwards,slide-out-to-bottom .5s 3.2s forwards;stroke:hsl(var(--clr-secondary))}header .LOGO,header .nav-menu,header nav{--delay: 4s;animation:show .8s var(--delay) forwards,slide-from-top .4s var(--delay) forwards;transform:translateY(-100%);opacity:0}section{transition:opacity .5s}section.hide{opacity:0}section.hero{animation:show 2s 3.7s forwards;opacity:0}section .project__card,section .skill__card{--delay: 0s;transition:transform .5s var(--delay),opacity .25s var(--delay);opacity:1}section .project__card.hide,section .skill__card.hide{transform:translateY(100px);opacity:0}@media (min-width: 42.375em){section .project__card:nth-child(odd),section .skill__card:nth-child(odd){--delay: .1s}section .project__card:nth-child(2n),section .skill__card:nth-child(2n){--delay: .25s}}section:is(.about-me,.contact){transition-delay:.5s}@media (min-width: 64em){section .skill__card:nth-child(3n+1){--delay: .1s}section .skill__card:nth-child(3n+2){--delay: .25s}section .skill__card:nth-child(3n+3){--delay: .4s}}html{-webkit-user-select:text;user-select:text;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}html ::selection{color:hsl(var(--clr-secondary));background-color:hsl(var(--bg-secondary))}html:has(dialog#loader[open]){overflow:hidden}body{position:relative;font:1rem var(--font-family);text-align:center;color:hsl(var(--clr-primary));background:hsl(var(--bg-primary));isolation:isolate}body:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";animation:slide-from-top .5s 3.4s forwards;background:radial-gradient(ellipse var(--width, 1100px) var(--height, 613px) at top,hsl(var(--bg-secondary)),hsl(var(--bg-primary)));transform:translateY(calc(var(--height, 613px) * -1));z-index:-1}#root{min-height:100dvh}h1,h2,h3,p{margin:0}h2,h3,strong,.highlight{color:hsl(var(--clr-secondary))}h2::selection,h3::selection,strong::selection,.highlight::selection{color:hsl(var(--clr-primary))}h2{font-size:2.5em;text-transform:uppercase}@media (min-width: 42.375em){h2{font-size:3em}}a,input,textarea,button{-webkit-user-select:none;user-select:none}strong{font-weight:unset}section{padding-block:3em}.container{--display-padding: .625em;max-width:75em;padding-inline:var(--display-padding);margin-inline:auto}@media (min-width: 42.375em){.container{--display-padding: 1em}}.LOGO{display:flex;align-items:center;gap:.45em;font-size:2em;text-decoration:none;width:fit-content;padding:.125em;color:hsl(var(--clr-secondary));border-radius:100px;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(to right,#9993,#fff3)}.LOGO:focus{outline:none}.LOGO:focus-visible{outline:.075em solid}.LOGO .icon{display:grid;place-content:center;width:1.25em;aspect-ratio:1;background-color:hsl(var(--bg-primary),60);border-radius:100px}.LOGO .icon img{width:.75em}.LOGO .title{margin-right:.5em}.menu-btn{display:flex;flex-direction:column;place-content:center;place-items:center;flex-shrink:0;gap:.125em;font-size:2em;width:1.5em;aspect-ratio:1;padding:0;border:none;background:transparent;transition:background .25s ease-in-out;border-radius:100px;cursor:pointer}.menu-btn .line{display:inline-block;width:.625em;height:.0625em;background-color:hsl(var(--clr-secondary));border-radius:.031em;transition:all .25s ease-in-out}.menu-btn.open{background:#fff3}.menu-btn.open .line:nth-child(1){transform:translateY(.1875em) rotate(45deg)}.menu-btn.open .line:nth-child(2){opacity:0}.menu-btn.open .line:nth-child(3){transform:translateY(-.1875em) rotate(-45deg)}.menu-btn:focus-visible{outline:.075em solid hsl(var(--clr-secondary))}.menu-btn:active{background-color:hsl(var(--clr-secondary),40%)}@media (hover: hover){.menu-btn .line{background-color:hsl(var(--clr-secondary),70%)}.menu-btn .line:nth-child(3){width:.4375em;margin-left:.1875em}.menu-btn:is(.open,:hover,:focus-visible) .line{background-color:hsl(var(--clr-secondary))}.menu-btn:is(.open,:hover,:focus-visible) .line:nth-child(3){width:.625em;margin-left:0}}#scroll-down-link{position:absolute;left:50%;bottom:2em;transform:translate(-50%);animation:show 1s forwards;opacity:0}#scroll-down-link #scroll-down{--size: 2.3em;width:var(--size);height:calc(var(--size) * 1.2);fill:hsl(var(--clr-secondary))}#scroll-down-link #scroll-down #arrow-down{animation-name:scroll-down;opacity:.5}#scroll-down-link #scroll-down #arrow-down:nth-child(1){animation-duration:.55s;animation-delay:.7s}#scroll-down-link #scroll-down #arrow-down:nth-child(2){animation-duration:.9s;animation-delay:.5s}@media (min-width: 42.375em){#scroll-down-link #scroll-down{--size: 2.8em}}.project__card{--card-border: .3125em;--card-radius: 1.25em;text-align:left;max-width:25em;height:95%;padding:var(--card-border);background:hsl(var(--clr-primary),10%);border-radius:var(--card-radius);overflow:hidden}.project__card .card__container{position:relative;height:100%;padding:1em;background:hsl(var(--bg-color, var(--bg-primary)));border-radius:calc(var(--card-radius) - var(--card-border));isolation:isolate;overflow:hidden}.project__card .card__container:before{position:absolute;top:0;right:0;bottom:0;left:0;content:"";height:150%;background:radial-gradient(ellipse 90% 80% at 50% 75%,hsl(var(--clr-secondary),90%),hsl(var(--bg-color, var(--bg-primary))) 75%);transition:transform .25s;z-index:-1}.project__card .card__header{--size: 1.6em;display:flex;align-items:center;gap:.5em;margin-bottom:.7em}.project__card .card__header h3{flex-grow:1;font-size:var(--size);text-wrap:nowrap;text-overflow:ellipsis;margin-right:1em;overflow:hidden}.project__card .card__header a{display:grid;transition:transform .25s,opacity .25s;outline:none}.project__card .card__header a svg{width:var(--size);height:var(--size);color:hsl(var(--clr-secondary))}.project__card .card__header a:focus-visible{outline:.15em solid hsl(var(--clr-secondary));outline-offset:.125em;border-radius:.25em}.project__card .description{font-size:.9em;max-width:95%;color:hsl(var(--clr-secondary),70%)}@media (min-width: 42.375em){.project__card .description{font-size:1em}}.project__card .image{-webkit-user-select:none;user-select:none;width:95%;height:100vh;max-height:90%;max-height:11.25em;margin-inline:auto;transform:translateY(15%);transition:transform .2s ease-in-out,scale .25s ease-in-out;border-radius:8px;overflow:hidden;cursor:pointer}.project__card .image img{width:100%;height:100%}@media (hover: hover){.project__card:hover .card__header a{transform:translateY(0);opacity:.6}.project__card .card__container:has(.image:hover):before{transform:translateY(-5%)}.project__card .card__header a{transform:translateY(-100%);opacity:0}.project__card .card__header a:is(:hover,:focus-visible){opacity:1}.project__card .image:hover{transform:translateY(10%);scale:1.04}}@media (min-width: 42.375em){.project__card .card__container{padding-inline:1.2em}.project__card .image{width:90%}}.project__card:nth-child(1) .card__container{--bg-color: var(--clr-pink)}.project__card:nth-child(2) .card__container{--bg-color: var(--clr-blue)}.project__card:nth-child(3) .card__container{--bg-color: var(--clr-orange)}.project__card:nth-child(4) .card__container{--bg-color: var(--clr-voilet)}@keyframes slide-out{0%{transform:translate(0);opacity:1}8%{transform:translate(var(--move));opacity:0}92%{opacity:0;transform:translate(var(--move))}to{transform:translate(0);opacity:1}}@keyframes responsive-desktop-device{40%,60%{x:111;y:27;width:56px;height:90px}90%,to{x:114;y:38.5;width:50px;height:75px}}@keyframes responsive-desktop-screen{40%,60%{x:114;y:30;width:50px;height:78px}90%,to{x:116;y:41;width:46px;height:70px}}@keyframes responsive-desktop-object{40%,60%{x:136;y:110;width:5px;height:5px;clip-path:inset(0px round 10px)}90%,to{x:132;y:41;width:15px;clip-path:inset(0px 0px 4px 0px round 0px 0px 3px 3px)}}@keyframes json-file{0%,10%,35%,60%,90%,to{opacity:0}25%,70%{opacity:1}50%{transform:translate(200px)}}@keyframes signal-blink{0%{opacity:.2}50%{opacity:.5}to{opacity:.8}}@keyframes design{0%{transform:translate(90px);opacity:0}40%{transform:translate(90px)}20%,to{opacity:1}}@keyframes desktop{0%,15%{transform:translate(-90px);opacity:0}40%{transform:translate(0)}50%,to{opacity:1}}@keyframes shake{20%{transform:translate(-5px)}40%{transform:translate(5px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes bad-code{0%,to{stroke:#f85a5a}}@keyframes draw-line{to{stroke-dashoffset:0}}@keyframes place{0%,50%{x:var(--x);y:var(--y)}}@keyframes place-translate{0%,60%{transform:translate(var(--x))}}.skill__card{display:flex;flex-direction:column;gap:.5em;text-align:left;max-width:25em;padding:.3125em 1em 1.3125em;background-color:hsl(var(--clr-primary),10%);border-radius:.25em}.skill__card .illustration{width:100%;margin:0 auto;aspect-ratio:2/1;overflow:hidden}.skill__card .illustration svg{width:100%;height:100%}.skill__card h3{font-size:1.4em}.skill__card .description{width:95%;max-width:360px;opacity:.7}.skill__card#responsive-design #desktop #object{clip-path:inset(0px round 0px 0px 3px 3px)}.skill__card#responsive-design:focus-visible #mobile,.skill__card#responsive-design:focus-visible #tablet{animation:slide-out 5.25s ease-in-out}.skill__card#responsive-design:focus-visible #mobile{--move: -5%}.skill__card#responsive-design:focus-visible #tablet{--move: 5%}.skill__card#responsive-design:focus-visible #desktop #device,.skill__card#responsive-design:focus-visible #desktop #screen,.skill__card#responsive-design:focus-visible #desktop #object{animation-duration:2s;animation-delay:.5s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-direction:alternate}.skill__card#responsive-design:focus-visible #desktop #device{animation-name:responsive-desktop-device}.skill__card#responsive-design:focus-visible #desktop #screen{animation-name:responsive-desktop-screen}.skill__card#responsive-design:focus-visible #desktop #object{animation-name:responsive-desktop-object}@media (hover: hover){.skill__card#responsive-design:hover #mobile,.skill__card#responsive-design:hover #tablet{animation:slide-out 5.25s ease-in-out}.skill__card#responsive-design:hover #mobile{--move: -5%}.skill__card#responsive-design:hover #tablet{--move: 5%}.skill__card#responsive-design:hover #desktop #device,.skill__card#responsive-design:hover #desktop #screen,.skill__card#responsive-design:hover #desktop #object{animation-duration:2s;animation-delay:.5s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-direction:alternate}.skill__card#responsive-design:hover #desktop #device{animation-name:responsive-desktop-device}.skill__card#responsive-design:hover #desktop #screen{animation-name:responsive-desktop-screen}.skill__card#responsive-design:hover #desktop #object{animation-name:responsive-desktop-object}}@media (hover: none){.skill__card#responsive-design.animate #mobile,.skill__card#responsive-design.animate #tablet{animation:slide-out 5.25s ease-in-out}.skill__card#responsive-design.animate #mobile{--move: -5%}.skill__card#responsive-design.animate #tablet{--move: 5%}.skill__card#responsive-design.animate #desktop #device,.skill__card#responsive-design.animate #desktop #screen,.skill__card#responsive-design.animate #desktop #object{animation-duration:2s;animation-delay:.5s;animation-timing-function:ease-in-out;animation-iteration-count:2;animation-direction:alternate}.skill__card#responsive-design.animate #desktop #device{animation-name:responsive-desktop-device}.skill__card#responsive-design.animate #desktop #screen{animation-name:responsive-desktop-screen}.skill__card#responsive-design.animate #desktop #object{animation-name:responsive-desktop-object}}.skill__card#api-integration #json-file{opacity:0}.skill__card#api-integration:focus #json-file{animation:json-file 5s cubic-bezier(.56,-.19,.28,1.37)}.skill__card#api-integration:focus #api{opacity:0;animation:show 1.5s 4.2s ease-out forwards}.skill__card#api-integration:focus #signals #signal:nth-child(1){--row: .1s}.skill__card#api-integration:focus #signals #signal:nth-child(2){--row: .2s}.skill__card#api-integration:focus #signals #signal:nth-child(3){--row: .3s}.skill__card#api-integration:focus #signals #signal:nth-child(4){--row: .4s}.skill__card#api-integration:focus #signals #circle{animation:signal-blink .5s calc(var(--delay) + 1.55s) ease-out 3}.skill__card#api-integration:focus #signals #circle:nth-child(1){--delay: var(--row)}.skill__card#api-integration:focus #signals #circle:nth-child(2){--delay: calc(.05s + var(--row))}.skill__card#api-integration:focus #signals #circle:nth-child(3){--delay: calc(.1s + var(--row))}@media (hover: hover){.skill__card#api-integration:hover #json-file{animation:json-file 5s cubic-bezier(.56,-.19,.28,1.37)}.skill__card#api-integration:hover #api{opacity:0;animation:show 1.5s 4.2s ease-out forwards}.skill__card#api-integration:hover #signals #signal:nth-child(1){--row: .1s}.skill__card#api-integration:hover #signals #signal:nth-child(2){--row: .2s}.skill__card#api-integration:hover #signals #signal:nth-child(3){--row: .3s}.skill__card#api-integration:hover #signals #signal:nth-child(4){--row: .4s}.skill__card#api-integration:hover #signals #circle{animation:signal-blink .5s calc(var(--delay) + 1.55s) ease-out 3}.skill__card#api-integration:hover #signals #circle:nth-child(1){--delay: var(--row)}.skill__card#api-integration:hover #signals #circle:nth-child(2){--delay: calc(.05s + var(--row))}.skill__card#api-integration:hover #signals #circle:nth-child(3){--delay: calc(.1s + var(--row))}}@media (hover: none){.skill__card#api-integration.animate #json-file{animation:json-file 5s cubic-bezier(.56,-.19,.28,1.37)}.skill__card#api-integration.animate #api{opacity:0;animation:show 1.5s 4.2s ease-out forwards}.skill__card#api-integration.animate #signals #signal:nth-child(1){--row: .1s}.skill__card#api-integration.animate #signals #signal:nth-child(2){--row: .2s}.skill__card#api-integration.animate #signals #signal:nth-child(3){--row: .3s}.skill__card#api-integration.animate #signals #signal:nth-child(4){--row: .4s}.skill__card#api-integration.animate #signals #circle{animation:signal-blink .5s calc(var(--delay) + 1.55s) ease-out 3}.skill__card#api-integration.animate #signals #circle:nth-child(1){--delay: var(--row)}.skill__card#api-integration.animate #signals #circle:nth-child(2){--delay: calc(.05s + var(--row))}.skill__card#api-integration.animate #signals #circle:nth-child(3){--delay: calc(.1s + var(--row))}}.skill__card#design-to-code:focus-visible #design,.skill__card#design-to-code:focus-visible #arrow-right,.skill__card#design-to-code:focus-visible #code-in-desktop,.skill__card#design-to-code:focus-visible #fn{opacity:0}.skill__card#design-to-code:focus-visible #design{animation:design 2s ease-out forwards}.skill__card#design-to-code:focus-visible #arrow-right{animation:show 1s 3.7s ease-out forwards}.skill__card#design-to-code:focus-visible #code-in-desktop{animation:desktop 2s 1s ease-out forwards}.skill__card#design-to-code:focus-visible #code-in-desktop #fn{animation:show 1s var(--delay) ease-out forwards}.skill__card#design-to-code:focus-visible #code-in-desktop #fn:nth-child(1){--delay: 2s}.skill__card#design-to-code:focus-visible #code-in-desktop #fn:nth-child(2){--delay: 2.2s}.skill__card#design-to-code:focus-visible #code-in-desktop #fn:nth-child(3){--delay: 2.4s}.skill__card#design-to-code:focus-visible #code-in-desktop #fn:nth-child(4){--delay: 2.6s}.skill__card#design-to-code:focus-visible #code-in-desktop #fn:nth-child(5){--delay: 2.8s}@media (hover: hover){.skill__card#design-to-code:hover #design,.skill__card#design-to-code:hover #arrow-right,.skill__card#design-to-code:hover #code-in-desktop,.skill__card#design-to-code:hover #fn{opacity:0}.skill__card#design-to-code:hover #design{animation:design 2s ease-out forwards}.skill__card#design-to-code:hover #arrow-right{animation:show 1s 3.7s ease-out forwards}.skill__card#design-to-code:hover #code-in-desktop{animation:desktop 2s 1s ease-out forwards}.skill__card#design-to-code:hover #code-in-desktop #fn{animation:show 1s var(--delay) ease-out forwards}.skill__card#design-to-code:hover #code-in-desktop #fn:nth-child(1){--delay: 2s}.skill__card#design-to-code:hover #code-in-desktop #fn:nth-child(2){--delay: 2.2s}.skill__card#design-to-code:hover #code-in-desktop #fn:nth-child(3){--delay: 2.4s}.skill__card#design-to-code:hover #code-in-desktop #fn:nth-child(4){--delay: 2.6s}.skill__card#design-to-code:hover #code-in-desktop #fn:nth-child(5){--delay: 2.8s}}@media (hover: none){.skill__card#design-to-code.animate #design,.skill__card#design-to-code.animate #arrow-right,.skill__card#design-to-code.animate #code-in-desktop,.skill__card#design-to-code.animate #fn{opacity:0}.skill__card#design-to-code.animate #design{animation:design 2s ease-out forwards}.skill__card#design-to-code.animate #arrow-right{animation:show 1s 3.7s ease-out forwards}.skill__card#design-to-code.animate #code-in-desktop{animation:desktop 2s 1s ease-out forwards}.skill__card#design-to-code.animate #code-in-desktop #fn{animation:show 1s var(--delay) ease-out forwards}.skill__card#design-to-code.animate #code-in-desktop #fn:nth-child(1){--delay: 2s}.skill__card#design-to-code.animate #code-in-desktop #fn:nth-child(2){--delay: 2.2s}.skill__card#design-to-code.animate #code-in-desktop #fn:nth-child(3){--delay: 2.4s}.skill__card#design-to-code.animate #code-in-desktop #fn:nth-child(4){--delay: 2.6s}.skill__card#design-to-code.animate #code-in-desktop #fn:nth-child(5){--delay: 2.8s}}.skill__card#clean-code #bad-code{stroke:hsl(var(--clr-secondary))}.skill__card#clean-code:focus-visible #desktop{animation:shake .5s 2.3s cubic-bezier(.36,.07,.19,.97)}.skill__card#clean-code:focus-visible #fn{animation:show 1s var(--delay) ease-out forwards,shake .5s 2.3s cubic-bezier(.36,.07,.19,.97);opacity:0}.skill__card#clean-code:focus-visible #fn #bad-code{animation:bad-code 1.9s .5s}.skill__card#clean-code:focus-visible #fn:nth-child(1){--delay: .7s}.skill__card#clean-code:focus-visible #fn:nth-child(2){--delay: .9s}.skill__card#clean-code:focus-visible #fn:nth-child(3){--delay: 1.1s}.skill__card#clean-code:focus-visible #fn:nth-child(4){--delay: 1.3s}.skill__card#clean-code:focus-visible #fn:nth-child(5){--delay: 1.5s}.skill__card#clean-code:focus-visible #fn:nth-child(6){--delay: 1.7s}@media (hover: hover){.skill__card#clean-code:hover #desktop{animation:shake .5s 2.3s cubic-bezier(.36,.07,.19,.97)}.skill__card#clean-code:hover #fn{animation:show 1s var(--delay) ease-out forwards,shake .5s 2.3s cubic-bezier(.36,.07,.19,.97);opacity:0}.skill__card#clean-code:hover #fn #bad-code{animation:bad-code 1.9s .5s}.skill__card#clean-code:hover #fn:nth-child(1){--delay: .7s}.skill__card#clean-code:hover #fn:nth-child(2){--delay: .9s}.skill__card#clean-code:hover #fn:nth-child(3){--delay: 1.1s}.skill__card#clean-code:hover #fn:nth-child(4){--delay: 1.3s}.skill__card#clean-code:hover #fn:nth-child(5){--delay: 1.5s}.skill__card#clean-code:hover #fn:nth-child(6){--delay: 1.7s}}@media (hover: none){.skill__card#clean-code.animate #desktop{animation:shake .5s 2.3s cubic-bezier(.36,.07,.19,.97)}.skill__card#clean-code.animate #fn{animation:show 1s var(--delay) ease-out forwards,shake .5s 2.3s cubic-bezier(.36,.07,.19,.97);opacity:0}.skill__card#clean-code.animate #fn #bad-code{animation:bad-code 1.9s .5s}.skill__card#clean-code.animate #fn:nth-child(1){--delay: .7s}.skill__card#clean-code.animate #fn:nth-child(2){--delay: .9s}.skill__card#clean-code.animate #fn:nth-child(3){--delay: 1.1s}.skill__card#clean-code.animate #fn:nth-child(4){--delay: 1.3s}.skill__card#clean-code.animate #fn:nth-child(5){--delay: 1.5s}.skill__card#clean-code.animate #fn:nth-child(6){--delay: 1.7s}}.skill__card#version-control:focus-visible #line{stroke-dasharray:256;stroke-dashoffset:256;animation:draw-line 4s .5s ease-in-out forwards}.skill__card#version-control:focus-visible #code-file,.skill__card#version-control:focus-visible #circle,.skill__card#version-control:focus-visible #fn,.skill__card#version-control:focus-visible #class-container{animation:show 1s var(--delay) ease-out forwards;opacity:0}.skill__card#version-control:focus-visible #fn,.skill__card#version-control:focus-visible #class-container{animation-delay:calc(var(--delay) + .25s)}.skill__card#version-control:focus-visible #code-file:nth-child(1),.skill__card#version-control:focus-visible #circle:nth-child(2){--delay: 1.4s}.skill__card#version-control:focus-visible #code-file:nth-child(2),.skill__card#version-control:focus-visible #circle:nth-child(3){--delay: 2.45s}.skill__card#version-control:focus-visible #code-file:nth-child(3),.skill__card#version-control:focus-visible #circle:nth-child(4){--delay: 3.38s}@media (hover: hover){.skill__card#version-control:hover #line{stroke-dasharray:256;stroke-dashoffset:256;animation:draw-line 4s .5s ease-in-out forwards}.skill__card#version-control:hover #code-file,.skill__card#version-control:hover #circle,.skill__card#version-control:hover #fn,.skill__card#version-control:hover #class-container{animation:show 1s var(--delay) ease-out forwards;opacity:0}.skill__card#version-control:hover #fn,.skill__card#version-control:hover #class-container{animation-delay:calc(var(--delay) + .25s)}.skill__card#version-control:hover #code-file:nth-child(1),.skill__card#version-control:hover #circle:nth-child(2){--delay: 1.4s}.skill__card#version-control:hover #code-file:nth-child(2),.skill__card#version-control:hover #circle:nth-child(3){--delay: 2.45s}.skill__card#version-control:hover #code-file:nth-child(3),.skill__card#version-control:hover #circle:nth-child(4){--delay: 3.38s}}@media (hover: none){.skill__card#version-control.animate #line{stroke-dasharray:256;stroke-dashoffset:256;animation:draw-line 4s .5s ease-in-out forwards}.skill__card#version-control.animate #code-file,.skill__card#version-control.animate #circle,.skill__card#version-control.animate #fn,.skill__card#version-control.animate #class-container{animation:show 1s var(--delay) ease-out forwards;opacity:0}.skill__card#version-control.animate #fn,.skill__card#version-control.animate #class-container{animation-delay:calc(var(--delay) + .25s)}.skill__card#version-control.animate #code-file:nth-child(1),.skill__card#version-control.animate #circle:nth-child(2){--delay: 1.4s}.skill__card#version-control.animate #code-file:nth-child(2),.skill__card#version-control.animate #circle:nth-child(3){--delay: 2.45s}.skill__card#version-control.animate #code-file:nth-child(3),.skill__card#version-control.animate #circle:nth-child(4){--delay: 3.38s}}.skill__card#basic-design:focus-visible #design{animation:show .5s ease-out forwards}.skill__card#basic-design:focus-visible #header,.skill__card#basic-design:focus-visible #hero>*,.skill__card#basic-design:focus-visible #section>*{animation:show .5s var(--duration) ease-out forwards,place var(--duration, 2s) ease-in-out}.skill__card#basic-design:focus-visible #header{--x: 220;--y: 10;--duration: 1.5s}.skill__card#basic-design:focus-visible #hero :nth-child(1){--x: 80;--y: 30}.skill__card#basic-design:focus-visible #hero :nth-child(2){--x: 230;--y: 40}.skill__card#basic-design:focus-visible #hero :nth-child(3){--x: 20;--y: 10}.skill__card#basic-design:focus-visible #hero :nth-child(4){--x: 220;--y: 70}.skill__card#basic-design:focus-visible #hero :nth-child(4){--duration: 1.7s}.skill__card#basic-design:focus-visible #hero :nth-child(3){--duration: 1.9s}.skill__card#basic-design:focus-visible #hero :nth-child(2){--duration: 2.1s}.skill__card#basic-design:focus-visible #hero :nth-child(1){--duration: 2.3s}.skill__card#basic-design:focus-visible #section :nth-child(1){--x: 20;--y: 80}.skill__card#basic-design:focus-visible #section :nth-child(2){--x: 260;--y: 80}.skill__card#basic-design:focus-visible #section :nth-child(3){--x: 35;--y: 45}.skill__card#basic-design:focus-visible #section :nth-child(4){--x: 245;--y: 110}.skill__card#basic-design:focus-visible #section :nth-child(5){--x: 210;--y: 120}.skill__card#basic-design:focus-visible #section :nth-child(6){--x: 60;--y: 90}.skill__card#basic-design:focus-visible #section :nth-child(7){--x: 75;--y: 70}.skill__card#basic-design:focus-visible #section :nth-child(7){--duration: 2.5s}.skill__card#basic-design:focus-visible #section :nth-child(6){--duration: 2.7s}.skill__card#basic-design:focus-visible #section :nth-child(5){--duration: 2.9s}.skill__card#basic-design:focus-visible #section :nth-child(4){--duration: 3.1s}.skill__card#basic-design:focus-visible #section :nth-child(3){--duration: 3.3s}.skill__card#basic-design:focus-visible #section :nth-child(2){--duration: 3.5s}.skill__card#basic-design:focus-visible #section :nth-child(1){--duration: 3.7s}.skill__card#basic-design:focus-visible #footer{--x: -90px;--duration: 3.7s;animation:show .5s var(--duration) ease-out forwards,place-translate var(--duration) ease-in-out}@media (hover: hover){.skill__card#basic-design:hover #design{animation:show .5s ease-out forwards}.skill__card#basic-design:hover #header,.skill__card#basic-design:hover #hero>*,.skill__card#basic-design:hover #section>*{animation:show .5s var(--duration) ease-out forwards,place var(--duration, 2s) ease-in-out}.skill__card#basic-design:hover #header{--x: 220;--y: 10;--duration: 1.5s}.skill__card#basic-design:hover #hero :nth-child(1){--x: 80;--y: 30}.skill__card#basic-design:hover #hero :nth-child(2){--x: 230;--y: 40}.skill__card#basic-design:hover #hero :nth-child(3){--x: 20;--y: 10}.skill__card#basic-design:hover #hero :nth-child(4){--x: 220;--y: 70}.skill__card#basic-design:hover #hero :nth-child(4){--duration: 1.7s}.skill__card#basic-design:hover #hero :nth-child(3){--duration: 1.9s}.skill__card#basic-design:hover #hero :nth-child(2){--duration: 2.1s}.skill__card#basic-design:hover #hero :nth-child(1){--duration: 2.3s}.skill__card#basic-design:hover #section :nth-child(1){--x: 20;--y: 80}.skill__card#basic-design:hover #section :nth-child(2){--x: 260;--y: 80}.skill__card#basic-design:hover #section :nth-child(3){--x: 35;--y: 45}.skill__card#basic-design:hover #section :nth-child(4){--x: 245;--y: 110}.skill__card#basic-design:hover #section :nth-child(5){--x: 210;--y: 120}.skill__card#basic-design:hover #section :nth-child(6){--x: 60;--y: 90}.skill__card#basic-design:hover #section :nth-child(7){--x: 75;--y: 70}.skill__card#basic-design:hover #section :nth-child(7){--duration: 2.5s}.skill__card#basic-design:hover #section :nth-child(6){--duration: 2.7s}.skill__card#basic-design:hover #section :nth-child(5){--duration: 2.9s}.skill__card#basic-design:hover #section :nth-child(4){--duration: 3.1s}.skill__card#basic-design:hover #section :nth-child(3){--duration: 3.3s}.skill__card#basic-design:hover #section :nth-child(2){--duration: 3.5s}.skill__card#basic-design:hover #section :nth-child(1){--duration: 3.7s}.skill__card#basic-design:hover #footer{--x: -90px;--duration: 3.7s;animation:show .5s var(--duration) ease-out forwards,place-translate var(--duration) ease-in-out}}@media (hover: none){.skill__card#basic-design.animate #design{animation:show .5s ease-out forwards}.skill__card#basic-design.animate #header,.skill__card#basic-design.animate #hero>*,.skill__card#basic-design.animate #section>*{animation:show .5s var(--duration) ease-out forwards,place var(--duration, 2s) ease-in-out}.skill__card#basic-design.animate #header{--x: 220;--y: 10;--duration: 1.5s}.skill__card#basic-design.animate #hero :nth-child(1){--x: 80;--y: 30}.skill__card#basic-design.animate #hero :nth-child(2){--x: 230;--y: 40}.skill__card#basic-design.animate #hero :nth-child(3){--x: 20;--y: 10}.skill__card#basic-design.animate #hero :nth-child(4){--x: 220;--y: 70}.skill__card#basic-design.animate #hero :nth-child(4){--duration: 1.7s}.skill__card#basic-design.animate #hero :nth-child(3){--duration: 1.9s}.skill__card#basic-design.animate #hero :nth-child(2){--duration: 2.1s}.skill__card#basic-design.animate #hero :nth-child(1){--duration: 2.3s}.skill__card#basic-design.animate #section :nth-child(1){--x: 20;--y: 80}.skill__card#basic-design.animate #section :nth-child(2){--x: 260;--y: 80}.skill__card#basic-design.animate #section :nth-child(3){--x: 35;--y: 45}.skill__card#basic-design.animate #section :nth-child(4){--x: 245;--y: 110}.skill__card#basic-design.animate #section :nth-child(5){--x: 210;--y: 120}.skill__card#basic-design.animate #section :nth-child(6){--x: 60;--y: 90}.skill__card#basic-design.animate #section :nth-child(7){--x: 75;--y: 70}.skill__card#basic-design.animate #section :nth-child(7){--duration: 2.5s}.skill__card#basic-design.animate #section :nth-child(6){--duration: 2.7s}.skill__card#basic-design.animate #section :nth-child(5){--duration: 2.9s}.skill__card#basic-design.animate #section :nth-child(4){--duration: 3.1s}.skill__card#basic-design.animate #section :nth-child(3){--duration: 3.3s}.skill__card#basic-design.animate #section :nth-child(2){--duration: 3.5s}.skill__card#basic-design.animate #section :nth-child(1){--duration: 3.7s}.skill__card#basic-design.animate #footer{--x: -90px;--duration: 3.7s;animation:show .5s var(--duration) ease-out forwards,place-translate var(--duration) ease-in-out}}div.social-plugins{display:flex;align-items:center;flex-wrap:wrap;gap:1em}div.social-plugins a{color:inherit}div.social-plugins a:has(img){--size: 2.5em;display:grid;place-content:center;width:var(--size);height:var(--size);background-color:hsl(var(--clr-secondary));transition:scale .25s ease-in-out;border-radius:.25em;outline:none}div.social-plugins a:has(img) img{width:calc(var(--size) - .625em)}div.social-plugins a:has(img).linkedin img{transform:translate(.125em)}div.social-plugins a:has(img):active{opacity:.8}div.social-plugins a:has(img):focus-visible{outline:.15em solid hsl(var(--clr-secondary));outline-offset:.15em}@media (hover: hover){div.social-plugins a:has(img):hover{scale:1.2}}input,textarea{font-size:1.4em;width:100%;padding:.44645em .714285em;color:hsl(var(--clr-secondary));background-color:hsl(var(--clr-primary),10%);border-radius:.2232em;border:none}input::placeholder,textarea::placeholder{text-transform:capitalize;color:hsl(var(--clr-secondary),50%)}input:focus-visible,textarea:focus-visible{outline:.125em solid hsl(var(--clr-secondary))}input:focus-visible::placeholder,textarea:focus-visible::placeholder{color:hsl(var(--clr-secondary),70%)}textarea{height:7.14285em;resize:none}header nav{position:absolute;top:100%;left:var(--display-padding);right:var(--display-padding);font-size:2em;border-radius:.75em;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(to right,#9993,#fff3);isolation:isolate;overflow:hidden}header nav .marker{position:absolute;top:0;right:0;bottom:0;left:0;display:inline-block;background-color:hsl(var(--bg-primary),60);transition:width,height,transform;transition-duration:.25s;transition-timing-function:ease-in-out;border-radius:100px;z-index:-1}header nav .marker.hide{opacity:0}header nav ul{display:flex;flex-direction:column;list-style:none;padding:.2em;margin:0}header nav ul li{display:flex;text-align:center}header nav a{font-size:.6em;text-wrap:nowrap;text-decoration:none;width:100%;padding:.625em .72915em;color:hsl(var(--clr-secondary));border-radius:100px}header nav a:is(:focus,:focus-visible,:active){outline:none}header nav a:active{color:hsl(var(--clr-primary))}header nav a:focus-visible{background-color:hsl(var(--clr-secondary),20%)}@media (hover: hover){header nav a{color:hsl(var(--clr-primary))}header nav a:is(:hover,:focus-visible){color:hsl(var(--clr-secondary))}header nav a:active{color:hsl(var(--clr-primary))}}header nav .active a{color:hsl(var(--clr-secondary));background-color:transparent;transition:color .25s ease-in-out}header nav .active a:focus-visible{outline:.125em solid hsl(var(--clr-secondary));outline-offset:-.25em}@media (min-width: 42.375em){header nav{position:relative;top:0;right:0;bottom:0;left:0;border-radius:100px;background:linear-gradient(to right,#fff3,#9993)}header nav ul{flex-direction:row;padding:.125em}header nav a{padding:.543em .73em}}form.contact-form{display:flex;flex-direction:column;gap:.875em;width:100%;max-width:27.5em}form.contact-form button{font-size:1.4em;width:100%;padding:.44645em;margin-top:.357144em;color:hsl(var(--bg-primary));background-color:hsl(var(--clr-secondary));border-radius:.2232em;border:none}form.contact-form button:active{opacity:.8}form.contact-form button:focus-visible{outline-width:.15em}@media (hover: hover){form.contact-form button:not(:disabled){background-color:hsl(var(--clr-secondary),90%)}form.contact-form button:not(:disabled):hover{background-color:hsl(var(--clr-secondary))}}form.contact-form button:disabled{cursor:not-allowed;opacity:.6}form.contact-form.has-error{--clr-error: hsl(0deg 79.84% 37.73%)}form.contact-form.has-error :is(input,textarea).has-error{outline:.125em solid var(--clr-error)}form.contact-form.has-error button{color:hsl(var(--clr-secondary));background-color:var(--clr-error);opacity:1}form.contact-form.is-loading button{cursor:progress}form.contact-form.is-submitted button{color:hsl(var(--clr-secondary));background-color:green;cursor:default;opacity:1}header{position:fixed;top:0;right:0;left:0;bottom:auto;display:flex;justify-content:space-between;align-items:center;gap:1em;padding-block:1rem;z-index:777}header .nav-menu{display:flex;align-items:center;gap:.3125em;background:#fff3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:100px}header .nav-menu .current-link{font-size:.6em;text-wrap:nowrap;text-decoration:none;width:100%;color:hsl(var(--clr-secondary));border-radius:100px;font-size:1.2em;text-transform:capitalize;padding:.547em .651em;margin:.156em 0 .156em .208em;background-color:hsl(var(--bg-primary))}header .nav-menu .current-link:focus{outline:none}header .nav-menu .current-link:focus-visible{outline:.125em solid}@media (max-width: 25em){header .nav-menu .current-link{display:none}}header .nav-menu:has(.menu-btn)+nav{visibility:hidden}header .nav-menu:has(.menu-btn.open)+nav{visibility:visible}@media (min-width: 42.375em){header{font-size:1.2em;padding:1.5rem 1.5rem 1rem!important}header .nav-menu{width:0;visibility:hidden;overflow:hidden}header .nav-menu:has(.menu-btn)+nav{visibility:visible}}section.hero{--min-d-height: clamp(18.75em, 90vw, 26.25em);min-height:var(--min-d-height);height:100vh;max-height:min(var(--height, 50em),50em);position:relative;display:grid;place-content:center;gap:clamp(1.4em,3vw,4em);isolation:isolate}section.hero ::selection{background-color:hsl(var(--bg-primary))}section.hero h1{font-size:clamp(2.4em,8vw,4em);line-height:2.6ch}section.hero p{font-size:clamp(1em,3vw,1.6em);width:95%;margin:0 auto;color:hsl(var(--clr-primary),70%)}section.hero .stars,section.hero .star{position:absolute}section.hero .stars{top:0;right:0;bottom:0;left:0;margin-inline:calc(var(--display-padding) * -1);overflow:hidden;z-index:-1}section.hero .stars .star{--size: clamp(1.25em, 5vw, 1.875em);top:calc(50% + (var(--y)));left:calc(50% + (var(--x)));width:var(--size);height:var(--size);color:hsl(var(--clr-secondary),20%);transform:translate(-50%,-50%)}section.hero .stars .star:nth-child(2n){color:hsl(var(--clr-secondary))}section.hero .stars .star:nth-child(1){--x: clamp(-6.5rem, calc(-8vw + .5rem) , -1rem);--y: clamp(.9rem, calc(10vw - 3rem) , 1.5rem);rotate:20deg}section.hero .stars .star:nth-child(2){--x: clamp(10rem, 45vw, 27rem);--y: .5rem;rotate:-30deg}section.hero .stars .star:nth-child(3){--x: clamp(8rem, 32vw, 15rem);--y: clamp(-7rem, calc(-10vw + .5rem) , -4rem);rotate:-20deg}section.hero .stars .star:nth-child(4){--x: 2rem;--y: clamp(-14rem, -30vw, -8rem);rotate:-4deg}section.hero .stars .star:nth-child(5){--x: clamp(5rem, 20vw, 12rem);--y: clamp(6rem, 20vw, 8rem);rotate:20deg}section.hero .stars .star:nth-child(6){--x: clamp(-14rem, -30vw, -5rem);--y: clamp(8rem, 30vw, 14rem);rotate:40deg}section.hero .stars .star:nth-child(7){--x: clamp(-24rem, -40vw, -10rem);--y: clamp(1rem, 6vw, 4rem);rotate:25deg}section.hero .stars .star:nth-child(8){--x: clamp(-24rem, -28vw, -9rem);--y: clamp(-7.5rem, -20vw, -5rem);rotate:25deg}@media (min-width: 42.375em){section.hero{--min-d-height: 31.25em}section.hero p{width:75%}}section.projects{text-align:center}section.projects .projects{display:grid;gap:2em;width:fit-content;padding-inline:var(--display-padding);margin:4em auto 2em}@media (min-width: 42.375em){section.projects .projects{grid-template-columns:repeat(2,1fr);margin-bottom:3em}}section.projects .projects:has(.alerts){display:block}section.projects .projects:has(.alerts) .alerts{display:inline-block;font-size:1.5em;margin-block:4em}section.projects .view-more{font-size:1.3em;color:hsl(var(--clr-primary),70%)}section.skills div.skills{display:flex;justify-content:center;flex-wrap:wrap;gap:2.5em;font-size:1.15em;margin:4em var(--display-padding) 0}section.skills div.skills .skill__card{flex:1 1 16.30435em}@media (min-width: 42.375em){section.skills div.skills{gap:1.5em}}@media (min-width: 64em){section.skills div.skills{margin-inline:2em}}section.about-me{--min-d-height: fit-content;min-height:var(--min-d-height);height:100vh;max-height:min(var(--height, 50em),50em);display:flex;flex-direction:column;justify-content:center;gap:5rem}section.about-me .para{display:grid;gap:2rem}section.about-me .para p{font-size:clamp(1.1em,3vw,1.4em);line-height:3.2ch;opacity:.88;max-width:95%;margin-inline:auto}@media (min-width: 42.375em){section.about-me .para p{max-width:75%}}@media (min-width: 68.75em){section.about-me .para p{max-width:65%}}@media (min-width: 42.375em){section.about-me{--min-d-height: 37.5em}}section.contact{display:grid;gap:4em 2em;margin-bottom:1em}section.contact p{margin-block:1em 1.6em;font-size:clamp(1.1em,3vw,1.4em);line-height:3.2ch;opacity:.88;max-width:95%;margin-inline:auto}@media (min-width: 42.375em){section.contact p{max-width:75%}}@media (min-width: 68.75em){section.contact p{max-width:65%}}section.contact .social-plugins{justify-content:center}section.contact .contact-form{padding-inline:var(--display-padding);margin-inline:auto}@media (min-width: 42.375em){section.contact{margin-bottom:2em}}@media (min-width: 64em){section.contact{grid-template-columns:repeat(2,1fr);max-width:80%;margin-inline:auto}section.contact .content{text-align:left}section.contact .content p{max-width:100%;margin:.5em 0 1.6em}section.contact .content .social-plugins{justify-content:start}section.contact .contact-form{padding-right:0;margin-inline:0}}#root{display:flex;flex-direction:column}footer{margin-top:auto;background-color:hsl(var(--bg-footer))}footer .main{display:flex;flex-direction:column;justify-content:center;gap:3rem;padding-block:1.5em}footer .main .logo-container{margin-inline:auto}footer .main nav{display:flex;justify-content:space-evenly;flex-wrap:wrap;gap:1.5rem 5rem;text-align:center;padding-inline:16px}footer .main nav .highlight{font-size:1.6em}footer .main nav ul{display:flex;flex-direction:column;gap:.7em;list-style:none;padding:0;margin:1.5em 0 1em}footer .main nav ul a{font-size:1.4em;text-decoration:none;color:hsl(var(--clr-secondary),50%)}footer .main nav ul a:focus-visible{color:hsl(var(--clr-secondary),80%)}@media (hover: hover){footer .main nav ul a:hover{color:hsl(var(--clr-secondary),80%)}}@media (min-width: 28.125em){footer .main nav ul{flex-direction:row;gap:1.5rem}}@media (min-width: 42.375em){footer .main{flex-direction:row;padding:2em!important}footer .main .logo-container{margin-left:0}footer .main nav{flex-wrap:nowrap;text-align:left;column-gap:clamp(4rem,10vw,7rem);padding:0;margin-right:2rem}footer .main nav ul{flex-direction:column;gap:.5rem;margin-bottom:0}}footer .copyright{padding:.8em;color:hsl(var(--clr-secondary),65%);border-top:1px solid hsl(var(--clr-secondary),20%)}@media (min-width: 42.375em){footer .copyright{padding:.9em;font-size:1.1em}}