.navitem,button{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;outline:none;padding:0;margin:0;font-family:inherit;font-size:inherit;color:inherit;text-decoration:none;text-transform:none;line-height:normal;overflow:visible}.navitem:focus-visible{outline:none}header{display:flex;align-items:center;margin-top:1em;max-width:100lvw;z-index:2}nav{--_clr-txt: rgba(255, 255, 255, .919);--_clr-txt-svg: rgba(170, 180, 185, .837);--_ani-speed: 12s;display:flex;gap:1rem;font-size:1.4rem;font-family:system-ui;max-width:100lvw}nav>.navitem{position:relative;display:grid;place-content:center;grid-template-areas:"stack";padding:0 1.5rem;text-transform:uppercase;font-weight:300}header:has(+.home) nav>.navitem:nth-child(1),header:has(+.home) nav>.navitem:nth-child(1)>span:last-of-type{background:linear-gradient(128deg,var(--text-color) 0%,oklch(from var(--text-color) l c calc(h + 40)) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}header:has(+.home) nav>.navitem:nth-child(2),header:has(+.home) nav>.navitem:nth-child(2)>span:last-of-type{background:linear-gradient(128deg,var(--text-color) 0%,oklch(from var(--text-color) l c calc(h + 70)) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}header:has(+.home) nav>.navitem:nth-child(3),header:has(+.home) nav>.navitem:nth-child(3)>span:last-of-type{background:linear-gradient(128deg,oklch(from var(--text-color) l c calc(h + 50)) 0%,var(--text-color-hued) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}nav>.navitem>span{transition:all .3s ease-in-out;grid-area:stack}nav>.navitem>span:last-of-type{margin-top:.25rem;transform:scale(0);transition-delay:0ms;border-radius:50%;text-align:center;color:var(--text-color);-webkit-text-fill-color:currentColor}nav>.navitem:focus-visible>span:first-of-type,nav>.navitem:hover>span:first-of-type{transform:scale(0)}nav>.navitem:focus-visible>span:last-of-type,nav>.navitem:hover>span:last-of-type{transform:scale(1)}nav>.navitem>svg{position:absolute;width:200px;height:200px;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;opacity:0;text-transform:uppercase;transition:all .3s ease-in-out;color:var(--_clr-txt-svg)}nav>.navitem:focus-visible>svg,nav>.navitem:hover>svg{transform:translate(-50%,-50%) scale(1);opacity:1;transition-delay:.15s;transition:all .3s ease-in-out}.navitem svg g{transform-origin:center;animation:rotate var(--_ani-speed) linear infinite}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media screen and (orientation:portrait){header{margin-top:0}nav{width:100lvw;display:flex;justify-content:space-between;padding:1em 2em}nav>.navitem{padding:0}nav>.navitem span:first-child{display:none}nav>.navitem span:last-of-type{transform:scale(1)}nav>.navitem svg{opacity:1;transform:translate(-50%,-50%) scale(1)}}.home{height:100%}.home>.framermotion{display:flex;flex-direction:column;justify-content:space-around;height:100%}.home{width:100%}.home .framermotion>*:not(.sparkles-container){z-index:2}.home p{background:linear-gradient(128deg,var(--text-color) 0%,var(--text-color-hued) 75%,oklch(from var(--text-color) l c calc(h + 30)) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.about-text{text-align:center;margin-top:1em;width:100%;margin-left:auto;margin-right:auto}.about-text-major{font-size:18px}.aboutcnv{flex:1}.aboutcnv,.aboutcnv canvas{max-width:100lvw;height:max(30lvh,20lvw);max-height:max(30lvh,20lvw);margin:1em auto}.about-container h2,.about-container h3{width:fit-content;margin-left:auto;margin-right:auto}.about-container h2{background:linear-gradient(128deg,oklch(from var(--text-color) l c calc(h + 30)),oklch(from var(--text-color) l c calc(h + 80)));background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.about-container h3{background:linear-gradient(128deg,oklch(from var(--text-color) l c calc(h + 50)) 0%,var(--text-color-hued) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}h3:has(+.skills){text-align:center;margin-top:5svh}.skills{display:flex;justify-content:center;align-items:center;margin-bottom:1svh;flex-wrap:wrap;padding:8px 16px;z-index:2}.skills span{position:relative}.skills span:before{content:"";position:absolute;z-index:2;width:100%;height:100%;display:block}.skills span:after{background-color:#28282880;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);display:block;position:absolute;z-index:2;top:70%;left:50%;content:attr(data-skill);text-transform:lowercase;color:#ff03ddf6;font-size:18px;padding:8px 16px;text-align:center;border-radius:4px;box-shadow:0 3px 10px #00000081;transform:translate(-50%) scaleY(0);transform-origin:top;transition:all .3s;-webkit-text-fill-color:currentColor}.skills span:hover:after{transform:translate(-50%) scale(1)}.skills svg:hover{transition:all .2s;cursor:help;filter:brightness(2) drop-shadow(0 0 8px rgba(255,255,255,.633))}.skills svg{height:2.5em;width:2.5em;max-width:8vw;max-height:8vw;margin-right:.5em;margin-left:.5em;margin-bottom:10px;position:relative}.skills span:nth-child(1) svg{fill:url(#skillGradient1)}.skills span:nth-child(2) svg{fill:url(#skillGradient2)}.skills span:nth-child(3) svg{fill:url(#skillGradient3)}.skills span:nth-child(4) svg{fill:url(#skillGradient4)}.skills span:nth-child(5) svg{fill:url(#skillGradient5)}.skills span:nth-child(6) svg{fill:url(#skillGradient6)}.skills span:nth-child(7) svg{fill:url(#skillGradient7)}.skills span:nth-child(8) svg{fill:url(#skillGradient8)}.skills span:nth-child(9) svg{fill:url(#skillGradient9)}.home+footer p{background:linear-gradient(128deg,var(--text-color) 0%,var(--text-color-hued) 60%,var(--text-color-hued) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}@media screen and (orientation:portrait){div.home+footer{transform:translateY(-1.5em)}footer p{font-size:calc(1vw + 1vh);display:flex}footer p .dot{display:inline-block;margin-right:5px}}@media screen and (max-width:575px){.skills span:nth-child(1) svg{fill:url(#skillGradient3)}.skills span:nth-child(2) svg{fill:url(#skillGradient5)}.skills span:nth-child(3) svg,.skills span:nth-child(7) svg{fill:url(#skillGradient6)}.skills span:nth-child(4) svg{fill:url(#skillGradient7)}.skills span:nth-child(5) svg{fill:url(#skillGradient9)}.skills span:nth-child(6) svg{fill:url(#skillGradientInverted)}.home+footer p{background:linear-gradient(128deg,oklch(from var(--text-color) l c calc(h + 50)) 0%,var(--text-color-hued) 30%,var(--text-color-hued) 70%,oklch(from var(--text-color) l c calc(h + 50)) 100%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}h3:has(+.skills){margin-top:1.45em}.skills{margin-bottom:1.45em}}body{--windowWidth: 100svw;--windowHeight: 100svh}.sparkles-container{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;overflow:hidden}.sparkles-container .sparkle{position:absolute;border-radius:50%;width:1px;height:1px;--sparkleColor: var(--text-color);background:radial-gradient(circle,var(--sparkleColor) 0%,transparent 100%);animation:sparkle-animation 20s linear infinite alternate}body:has(.home) .sparkles-container .sparkle{--defaultColor: var(--text-color);--lightColor: var(--text-color-hued);--currentXCord: calc(var(--xInitial) + (var(--distXnumber) * var(--sparkleProgress)));--currentYCord: calc(var(--yInitial) + (var(--distYnumber) * var(--sparkleProgress)));--xNormalized: calc(var(--currentXCord) / var(--windowWidth));--yNormalized: calc(1 - var(--currentYCord) / var(--windowHeight));--part1: max(0, min(1, (var(--xNormalized) - .3) * 3.33));--part2: max(0, min(1, (1 - var(--xNormalized)) * 5));--fx: calc(var(--part1) * var(--part2));--fy: calc(.6 + .4 * var(--yNormalized));--magentaStrengthX: var(--fx);--magentaStrengthY: var(--fy);--magentaStrength: calc(var(--magentaStrengthX) * var(--magentaStrengthY));--sparkleColor: color-mix( in srgb, var(--defaultColor) calc((1 - var(--magentaStrength)) * 100%), var(--lightColor) calc(var(--magentaStrength) * 100%) );background:radial-gradient(circle,var(--sparkleColor) 0%,transparent 100%);animation:sparkle-animation 20s linear infinite alternate}@keyframes sparkle-animation{0%{--sparkleProgress: 0;transform:translate(0);opacity:0}10%{--sparkleProgress: .1;opacity:.75}90%{--sparkleProgress: .9;opacity:.75}to{--sparkleProgress: 1;transform:translate(var(--dist-x),var(--dist-y));opacity:0}}.App .project-detail{flex:1;height:100%;display:flex;justify-content:space-between;flex-direction:column;align-items:flex-start;margin-top:2em;padding:1em}.App .project-detail h1{font-size:2.5rem;margin-top:.5em;margin-bottom:1em}.App .project-detail .thumbnail{width:600px;margin:auto auto 3em;border-radius:12px}.App .project-detail h2{margin-top:2em;margin-bottom:1em}.App .project-detail ul{list-style:none;display:flex;flex-wrap:wrap;width:100%}.App .project-detail ul li{width:30px;height:30px;margin-left:1em;margin-right:1em}.App .project-detail ul li svg{width:100%;height:100%}.App .project-detail ul li:first-child{margin-left:0}.App .project-detail img{max-width:100%;width:400px;max-height:400px;object-fit:contain;transition:opacity .3s ease;border-radius:4px}.App .project-detail img:not(:last-of-type){margin-right:1em}.App .project-detail img:hover{opacity:.8}.App .project-detail .showcases>div{margin-bottom:2em}.App .project-detail .btn{position:relative;width:155px;height:50px;margin:3em auto 2em}.App .project-detail .btn:last-child{margin-bottom:3em}.App .project-detail .btn a{display:flex;justify-content:center;align-items:center;position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffff0d;box-shadow:0 15px 35px #0003;border-top:1px solid rgba(250,52,52,.1);border-bottom:1px solid rgba(255,255,255,.1);z-index:10;color:#fff;border-radius:30px;font-weight:400;letter-spacing:1px;text-decoration:none;transition:.5s;overflow:hidden;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px)}.App .project-detail .btn:hover a{letter-spacing:3px}.App .project-detail .btn a:before{content:"";position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(to left,rgba(255,255,255,.149),transparent);transform:skew(45deg);transition:.5s;transition-delay:.5s}.App .project-detail a:hover:before{transform:skew(45deg) translate(200%);transition-delay:0s}.App .project-detail .btn:before{content:"";position:absolute;left:50%;transform:translate(-50%);background:var(--clr-glow);bottom:0;width:30px;height:10px;border-radius:10px;transition:.5s;transition-delay:0s}.App .project-detail .btn:hover:before{bottom:0;height:50%;width:80%;border-radius:30px;transition-delay:.5s}.App .project-detail .btn:after{content:"";position:absolute;left:50%;transform:translate(-50%);background:var(--clr-glow);top:0;width:30px;height:10px;border-radius:10px;transition:.5s;transition-delay:0s}.App .project-detail .btn:hover:after{top:0;height:50%;width:80%;border-radius:30px;transition-delay:.5s}.App .project-detail .btn:before,.App .project-detail .btn:after{background:var(--clr);box-shadow:0 0 5px var(--clr),0 0 15px var(--clr),0 0 30px var(--clr),0 0 60px var(--clr)}@media screen and (orientation:portrait){.App .project-detail ul{justify-content:space-around}}@media screen and (orientation:landscape) and (min-width:1100px){nav{margin-top:.5em}header:not(:has(+.projectlist,+.project_categories)) nav{margin-left:1.5em}}.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translate(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}.App:has(.project_categories){max-width:unset;-webkit-backdrop-filter:brightness(.2);backdrop-filter:brightness(.2)}#root:has(.project_categories){-webkit-backdrop-filter:brightness(.2);backdrop-filter:brightness(.2)}.project_categories{width:100%;height:100%}.project_categories .webgl{position:fixed;top:0;left:0;right:0;bottom:0;outline:none}.project_categories canvas{cursor:grabbing}.project_categories .point{position:absolute;top:45%;left:50%}.project_categories .point .label{position:absolute;top:-20px;left:-20px;width:40px;height:40px;border-radius:50%;background:#0007;border:1px solid #ffffff77;color:#fff;font-family:Helvetica,Arial,sans-serif;text-align:center;line-height:40px;font-weight:100;font-size:14px;cursor:pointer;transform:scale(0);transition:transform .3s}.project_categories .point .label>span{pointer-events:none;-webkit-user-select:none;user-select:none}.project_categories .point.visible .label{transform:scale(1)}.project_categories .point .text{-webkit-backdrop-filter:blur(0px) brightness(.15);backdrop-filter:blur(0px) brightness(.15);position:absolute;top:20px;left:50%;transform:translate(-50%) scaleX(0);width:min(200px,50lvw);padding:20px;border-radius:4px;background:#0007;border:1px solid #ffffff77;color:#fff;line-height:1.3em;font-family:Helvetica,Arial,sans-serif;font-weight:100;font-size:14px;opacity:0;transition:all .3s;text-align:center}.project_categories .point .text>span{pointer-events:none;-webkit-user-select:none;user-select:none;text-decoration:underline;line-height:1.1em;text-underline-position:under}.project_categories .point:hover .text,.project_categories .point:focus .text,.project_categories .point:focus-visible .text,.project_categories .point:focus-within .text{opacity:1;transform:translate(-50%) scale(1)}.project_categories .movable_indication{opacity:.25;position:absolute;bottom:10%;right:3em;width:auto;height:3em}.project_categories .movable_indication g>*{stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:2px}.project_categories:not(:has(.point:hover,.point:focus,.point:focus-visible,.point:focus-within)) .point .label{animation:glow 10s infinite;animation-delay:var(--delay)}@keyframes glow{0%,30%{border:1px solid #ffffff77;box-shadow:0 0 8px #9fd4fc00;color:#fff}15%{border:1px solid #4ca3e5;box-shadow:0 0 8px #9fd4fc;color:#3ecde3}}.projectlist{margin-top:5em}.projectlist h1{margin-bottom:1em;text-align:center;font-size:2.8em}.projectlist ul{list-style:none}.projectlist .section-wrapper{margin:0 auto;max-width:1200px;display:flex;flex-flow:row wrap;justify-content:center;padding:.5rem}.projectlist .card{border:0px solid aqua;margin:.5rem auto;position:relative;height:12rem;overflow:hidden;border-radius:.5rem;box-shadow:0 0 1rem #00000080;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);width:500px;max-width:90lvw}.projectlist .card:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0000 linear-gradient(to bottom,#0000 70%,#0000001a 75%);z-index:0}.projectlist .card-link{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.projectlist .image{width:100%;height:auto;display:block;object-fit:contain;transition:transform 1.5s ease;-webkit-backface-visibility:hidden;backface-visibility:hidden;position:relative;z-index:-1}.projectlist .text-wrapper{position:absolute;bottom:0rem;padding:1rem;padding-bottom:0;width:100%;transition:background-color 1s ease;background-color:#000c;-webkit-backdrop-filter:brightness(.7);backdrop-filter:brightness(.7)}.projectlist .title{transition:color 1s ease;margin-bottom:.5rem;color:#c64ce5}.projectlist .skills{margin-bottom:.5rem;display:flex;flex-wrap:wrap}.projectlist .skills:last-child{margin-bottom:0}.projectlist .skills span{margin-right:1em;text-transform:lowercase}.projectlist .details-wrapper{max-height:0;opacity:0;transition:max-height 1.5s ease,opacity 1s ease}.projectlist .description{font-weight:300}@media (min-width: 900px){.projectlist .card{height:20rem;width:min(95lvw,600px);margin-bottom:3em}.projectlist .card:hover .details-wrapper{max-height:20rem;opacity:1}.projectlist .card:hover .text-wrapper{background-color:#0009}.projectlist .card:hover .title{color:var(--text-color)}.projectlist .card:hover .image{transform:scale(1.1);z-index:-1}}@media screen and (orientation:portrait){.projectlist h2{font-size:20px}.projectlist .title{margin-bottom:0}.projectlist .card:before{background:#0000 linear-gradient(to bottom,#0000 50%,#000c 65%)}.projectlist .text-wrapper{padding:.25rem 1rem}.projectlist .skills{margin-bottom:0;padding-left:0;padding-right:0}}:root{--light-beige: #f5f3d3;--beige: #e6dfb5;--dark-blue: #265380;--light-cyan: #3ecde3;--text-color: #4ca3e5;--magenta: #e54ccb;--text-color-hued: oklch(from var(--text-color) l c calc(h + 100) );--viewport-height: 100dvh;--text-color-darker: hsl(from var(--text-color) h s calc(l - 50) );--text-color-much-darker: hsl(from var(--text-color) h s calc(l - 60) );--text-color-hued-darker: hsl(from var(--text-color-hued) h s calc(l - 50) );--text-color-hued-much-darker: hsl(from var(--text-color-hued) h s calc(l - 60) )}html,body,#root,.App{width:100lvw;max-width:100lvw;overflow-x:hidden}.App:has(.projectlist_wrapper,.project-detail){min-height:100svh}html:not(:has(.projectlist_wrapper,.project-detail)),body:not(:has(.projectlist_wrapper,.project-detail)),#root:not(:has(.projectlist_wrapper,.project-detail)){height:var(--viewport-height);max-height:var(--viewport-height);overflow-y:hidden}.App:not(:has(.projectlist_wrapper,.project-detail)){height:100%;overflow-y:hidden}.App>*{flex-shrink:1;max-width:100%;margin-left:auto;margin-right:auto}*,*:before,*:after{box-sizing:border-box;padding:0;margin:0}body{--color-darker: hsl(from var(--text-color) h s calc(l - 50) );color:var(--text-color);font-family:Arial,sans-serif;line-height:1.6}body:has(.home){background:linear-gradient(128deg,#110815,#290f2acc 70%,#110815)}body:has(.projectlist_wrapper){background:radial-gradient(ellipse at top,var(--text-color-darker),transparent),radial-gradient(ellipse at bottom,var(--text-color-much-darker),transparent)}body:has(.project_categories){background:radial-gradient(circle at top,var(--text-color-darker),transparent),radial-gradient(circle at right,var(--text-color-hued-darker),transparent),radial-gradient(circle at bottom,var(--text-color-hued-darker),transparent),radial-gradient(circle at left,var(--text-color-darker),transparent)}body:has(.contact){--text-color-darker: hsl(from var(--text-color) h s calc(l - 50) );--text-color-much-darker: hsl(from var(--text-color) h s calc(l - 60) );background:linear-gradient(128deg,var(--text-color-much-darker) 0%,var(--text-color-darker) 70%,var(--text-color-much-darker) 100%)}video{max-width:100%;margin-top:1em}#root{margin:0 auto}.App{max-width:1200px;margin:0 auto;padding:20px;display:flex;flex-direction:column;justify-content:space-between;align-items:center}@media screen and (orientation:landscape) and (max-height:600px){html,body,#root,.App{overflow-y:auto!important}}@media screen and (orientation:portrait){nav{max-width:600px}}#particleImage{height:30dvh;width:100lvw;max-width:100%;position:relative}#particleImage #particle-image{background-color:transparent;position:absolute;top:0;bottom:0;left:0;right:0;max-width:100%}#particle-image{height:100%;width:100%}#gamish_header,#canvas{width:100lvw;max-width:100%}.projectlist:has(#gamish_header){margin-top:1em;margin-bottom:5em}#gamish_header{position:relative;display:flex;flex-direction:column;justify-content:flex-end}#particle-image:before{content:"YOU WON";color:#90ee90;font-size:10lvw;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;text-align:center;width:100%}#particle-image.won:before{display:block}.display_infos{position:absolute;font-size:5dvh;bottom:calc(10dvh + 2px);color:#4e4e4e89}#pad{display:flex;justify-content:space-around;align-items:center;width:100%}#pad .spacebar,#pad .arrow{background-color:transparent;border:2px solid #646cff;border-radius:8px;opacity:.5}#pad .spacebar{width:min(400px,40lvw);height:2em}#pad .spacebar>span{pointer-events:none;-webkit-user-select:none;user-select:none}#pad .arrow_container{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(3,30px);gap:5px}#pad .arrow{display:flex;justify-content:center;align-items:center;font-size:20px;cursor:pointer}#pad .arrow:hover{background-color:#646cff}#pad .up{grid-column:2;grid-row:1;border-radius:8px 8px 16px 16px}#pad .left{grid-column:1;grid-row:2;border-radius:8px 16px 16px 8px}#pad .right{grid-column:3;grid-row:2;border-radius:16px 8px 8px 16px}#pad .down{grid-column:2;grid-row:3;border-radius:16px 16px 8px 8px}@media screen and (min-width:1360px){#gamish_header{margin-top:100px}#gamish_header,#canvas,#particle-image{width:100lvw;height:30dvh;max-width:100%}#pad{max-width:800px;margin:auto}.display_infos{bottom:2px}}@font-face{font-family:Orbitron;src:url(/assets/Orbitron-Medium-B-zDl_PX.ttf)}.contact_title,.contact-container{z-index:2}.App .contact_title{text-transform:uppercase;text-align:center;position:absolute;top:20%;left:50%;transform:translate(-50%);font-size:2.5rem;font-family:Orbitron;letter-spacing:2px;color:var(--text-color);text-shadow:0 0 1rem var(--text-color);-webkit-text-fill-color:var(--text-color)}.contact-container{display:flex;justify-content:center;align-items:center;margin-top:3em;perspective:800px}.contact-card-wrapper{transform:rotateX(30deg) rotateY(30deg) rotate(-13deg);transition:transform .3s ease,box-shadow .3s ease;box-shadow:-15px 15px 25px #00000080}.contact-card-wrapper:hover{transform:rotate(0);box-shadow:0 5px 25px #00000080}.contact-card{width:300px;padding:1px;background-color:#272626;border-radius:8px;border:2px solid var(--text-color);position:relative;overflow:hidden;z-index:1}.contact-card a{color:var(--text-color)}.contact-card .inner{margin:1px;padding:25px;background:transparent;color:#fff;border-radius:8px}.card-content{position:relative;z-index:1}.contact-item{display:flex;align-items:center;margin-bottom:16px;color:#fff;perspective:400px}.contact-card-wrapper:not(:hover) .contact-item a{transform-style:preserve-3d;animation:textToFront 10s infinite;animation-delay:var(--delay)}@keyframes textToFront{0%,20%,to{transform:translate(0);text-shadow:unset;color:var(--text-color)}10%{transform:translateZ(40px) translate(15px) translateY(-5px);text-shadow:0 0 8px var(--text-color);color:#cac8ff}}.contact-item:last-child{margin-bottom:0}.icon{width:20px;height:20px;margin-right:8px;color:var(--text-color)}a{color:#fff;text-decoration:none;transition:color .3s ease}a:hover{color:var(--text-color)}:root{--shiny-cta-bg: #000000;--shiny-cta-bg-subtle: #1a1818;--shiny-cta-fg: #ffffff;--shiny-cta-highlight: #265380;--shiny-cta-highlight-subtle: #8484ff}@property --gradient-angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --gradient-angle-offset{syntax: "<angle>"; initial-value: 0deg; inherits: false;}@property --gradient-percent{syntax: "<percentage>"; initial-value: 5%; inherits: false;}@property --gradient-shine{syntax: "<color>"; initial-value: rgb(255,255,255); inherits: false;}.shiny-cta{--animation: gradient-angle linear infinite;--duration: 9s;--shadow-size: 2px;isolation:isolate;position:relative;overflow:hidden;cursor:pointer;outline-offset:4px;border-radius:8px;padding:3px;font-family:inherit;border:1px solid transparent;color:var(--shiny-cta-fg);background:linear-gradient(var(--shiny-cta-bg),var(--shiny-cta-bg)) padding-box,conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)),transparent,var(--shiny-cta-highlight) var(--gradient-percent),var(--gradient-shine) calc(var(--gradient-percent) * 2),var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3),transparent calc(var(--gradient-percent) * 4)) border-box;box-shadow:inset 0 0 0 1px var(--shiny-cta-bg-subtle)}.shiny-cta:before,.shiny-cta:after,.shiny-cta span:before{content:"";pointer-events:none;position:absolute;inset-inline-start:50%;inset-block-start:50%;translate:-50% -50%;z-index:-1}.shiny-cta:active{translate:0 1px}.shiny-cta:before{--size: calc(100% - var(--shadow-size) * 3);width:var(--size);height:var(--size);background:radial-gradient(circle at center,rgba(0,0,0,.9)0%,rgba(0,0,0,.9)70%,transparent) padding-box;border-radius:inherit;opacity:.4;z-index:6}.shiny-cta:after{--animation: shimmer linear infinite;width:200%;aspect-ratio:1;background:linear-gradient(-50deg,transparent,var(--shiny-cta-highlight),transparent);-webkit-mask-image:radial-gradient(circle at bottom,transparent 40%,black);mask-image:radial-gradient(circle at bottom,transparent 40%,black);opacity:.6}.shiny-cta{--transition: .8s cubic-bezier(.25, 1, .5, 1);transition:var(--transition);transition-property:--gradient-angle-offset,--gradient-percent,--gradient-shine}.shiny-cta,.shiny-cta:before,.shiny-cta:after{animation:var(--animation) var(--duration),var(--animation) calc(var(--duration) / .4) reverse paused;animation-composition:add}.shiny-cta:is(:hover,:focus-visible){--gradient-percent: 20%;--gradient-angle-offset: 95deg;--gradient-shine: var(--shiny-cta-highlight-subtle)}.shiny-cta:is(:hover,:focus-visible),.shiny-cta:is(:hover,:focus-visible):before,.shiny-cta:is(:hover,:focus-visible):after{animation-play-state:running}@keyframes gradient-angle{to{--gradient-angle: 360deg}}@keyframes shimmer{to{rotate:360deg}}@keyframes breathe{0%,to{scale:1}50%{scale:1.2}}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#000;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;min-width:320px;min-height:100svh}h1{font-size:3.2em;line-height:1.1}