@keyframes blueGreen{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes goldShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}nav{background:transparent;padding:.75rem 0;text-align:center;pointer-events:none}.nav-links{display:inline-flex;align-items:center;gap:20px}.nav-links a{text-decoration:none;font-weight:600;font-size:1.1rem;transition:color .2s ease;pointer-events:auto}.nav-links a:not(.apps-text){color:#fff}.nav-links a:hover{color:#a8d0ff}.nav-links a[aria-current=page]{color:#a8d0ff;text-decoration:underline;text-underline-offset:6px}.nav-divider{height:3px;width:100%;position:relative;background-image:url(/gradient.jpeg);background-size:cover;background-position:center}.nav-divider:after{content:"";position:absolute;top:0;left:0;width:100%;height:20px;background-image:inherit;background-size:inherit;background-position:inherit;filter:blur(10px);opacity:.85;z-index:-1;-webkit-mask-image:linear-gradient(to bottom,black 0%,transparent 100%);mask-image:linear-gradient(to bottom,black 0%,transparent 100%)}.apps-border{display:inline-block;padding:4px 12px;border-radius:12px;position:relative;isolation:isolate;transition:transform .2s ease}.apps-border:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;padding:2px;border-radius:inherit;background:linear-gradient(90deg,gold,#b8860b,gold);background-size:300% 100%;animation:goldShift 6s linear infinite;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;z-index:-1}.apps-border:hover{transform:scale(1.05)}.apps-text{display:inline-block;background-image:linear-gradient(to right,#40ffaa,#1884f1,#40ffaa,#1884f1,#40ffaa);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:blueGreen 8s linear infinite;line-height:1}html{scroll-behavior:smooth}body{font-family:Inter,sans-serif;margin:0;padding:0;background:linear-gradient(to bottom right,#f2f7fb,#e6f0ff);color:#2c2c2c}.content-box{padding:25px;margin:30px auto;width:80%;background-color:#fff;border-radius:12px;box-shadow:0 4px 10px #0000000f;text-align:left}.content-box h2,.content-box h1{text-align:center;color:#036;border-bottom:2px solid #cce0ff;margin:0 0 16px;padding:0 0 16px;line-height:1.15}.content-box p{text-indent:2em;line-height:1.6;font-size:1rem}.slideshow-container{max-width:60%;height:360px;position:relative;margin:40px auto;overflow:hidden;border-radius:12px;border:2px solid #ccc;background-color:#000;display:flex;align-items:center;justify-content:center}.slide{opacity:0;position:absolute;width:100%;height:100%;transition:opacity 1s ease-in-out;display:flex;justify-content:center;align-items:center}.slide img{width:auto;height:100%;max-height:100%;max-width:100%;object-fit:contain;background-color:#000}.slide.active{opacity:1;position:relative}.caption{display:none}.prev,.next{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);padding:16px;color:#fff;font-weight:700;font-size:24px;background-color:#00000080;border-radius:50%;z-index:10;-webkit-user-select:none;user-select:none}.prev{left:10px}.next{right:10px}.prev:hover,.next:hover{background-color:#000c}#top-button{display:block;margin:60px auto;padding:12px 20px;font-size:1rem;border:none;border-radius:8px;background-color:#036;color:#fff;cursor:pointer;transition:background-color .2s ease}#top-button:hover{background-color:#004c99}.project-image,.twitch-embed{width:100%;max-width:800px;aspect-ratio:16/9;border:2px solid #ccc;border-radius:8px;margin:1em auto;display:block}.thin-line{width:90%;margin:1em auto;border:none;border-top:1px solid #aaa}hr{border:none;border-top:4px solid #003366;margin:50px auto;width:80%}@keyframes scroll{0%{transform:translate(0)}to{transform:translate(-50%)}}.skills-container{overflow:hidden;padding:0 25px}.skills-scroll{display:flex;gap:1.5rem;width:max-content;animation:scroll 20s linear infinite}.skill-item{display:flex;align-items:center;gap:.5rem;transition:transform .3s}.skill-item img{opacity:1}.skill-item:hover{transform:scale(1.1)}.content-box.centered{text-align:center}.content-box.centered p{text-align:center;text-indent:0;margin:1rem auto}.content-box.centered a,.content-box.centered button{display:inline-block;margin:10px auto}.border-glow-card{--edge-proximity: 0;--cursor-angle: 45deg;--edge-sensitivity: 30;--color-sensitivity: calc(var(--edge-sensitivity) + 20);--border-radius: 28px;--glow-padding: 40px;--cone-spread: 25;position:relative;border-radius:var(--border-radius);isolation:isolate;transform:translateZ(.01px);display:grid;border:1px solid rgb(255 255 255 / 15%);background:var(--card-bg, #120F17);overflow:visible;box-shadow:#0000001a 0 1px 2px,#0000001a 0 2px 4px,#0000001a 0 4px 8px,#0000001a 0 8px 16px,#0000001a 0 16px 32px,#0000001a 0 32px 64px}.border-glow-card:before,.border-glow-card:after,.border-glow-card>.edge-light{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);transition:opacity .25s ease-out;z-index:-1}.border-glow-card:not(:hover):not(.sweep-active):before,.border-glow-card:not(:hover):not(.sweep-active):after,.border-glow-card:not(:hover):not(.sweep-active)>.edge-light{opacity:0;transition:opacity .75s ease-in-out}.border-glow-card:before{border:3px solid transparent;background:linear-gradient(var(--card-bg, #120F17) 0 100%) padding-box,linear-gradient(#fff0,#fff0) border-box,var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) border-box,var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) border-box,var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) border-box,var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) border-box,var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) border-box,var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) border-box,var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) border-box,var(--gradient-base, linear-gradient(#c299ff 0 100%)) border-box;opacity:calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%));mask-image:conic-gradient(from var(--cursor-angle) at center,black calc(var(--cone-spread) * 1%),transparent calc((var(--cone-spread) + 15) * 1%),transparent calc((100 - var(--cone-spread) - 15) * 1%),black calc((100 - var(--cone-spread)) * 1%))}.border-glow-card:after{border:3px solid transparent;background:var(--gradient-one, radial-gradient(at 80% 55%, hsla(268, 100%, 76%, 1) 0px, transparent 50%)) padding-box,var(--gradient-two, radial-gradient(at 69% 34%, hsla(349, 100%, 74%, 1) 0px, transparent 50%)) padding-box,var(--gradient-three, radial-gradient(at 8% 6%, hsla(136, 100%, 78%, 1) 0px, transparent 50%)) padding-box,var(--gradient-four, radial-gradient(at 41% 38%, hsla(192, 100%, 64%, 1) 0px, transparent 50%)) padding-box,var(--gradient-five, radial-gradient(at 86% 85%, hsla(186, 100%, 74%, 1) 0px, transparent 50%)) padding-box,var(--gradient-six, radial-gradient(at 82% 18%, hsla(52, 100%, 65%, 1) 0px, transparent 50%)) padding-box,var(--gradient-seven, radial-gradient(at 51% 4%, hsla(12, 100%, 72%, 1) 0px, transparent 50%)) padding-box,var(--gradient-base, linear-gradient(#c299ff 0 100%)) padding-box;-webkit-mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);mask-image:linear-gradient(to bottom,#000,#000),radial-gradient(ellipse at 50% 50%,black 40%,transparent 65%),radial-gradient(ellipse at 66% 66%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 66% 33%,black 5%,transparent 40%),radial-gradient(ellipse at 33% 66%,black 5%,transparent 40%),conic-gradient(from var(--cursor-angle) at center,transparent 5%,black 15%,black 85%,transparent 95%);-webkit-mask-composite:source-out,source-over,source-over,source-over,source-over,source-over;mask-composite:subtract,add,add,add,add,add;opacity:calc(var(--fill-opacity, .5) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));mix-blend-mode:normal}.border-glow-card>.edge-light{inset:calc(var(--glow-padding) * -1);pointer-events:none;z-index:1;-webkit-mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);mask-image:conic-gradient(from var(--cursor-angle) at center,black 2.5%,transparent 10%,transparent 90%,black 97.5%);opacity:calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));mix-blend-mode:normal}.border-glow-card>.edge-light:before{content:"";position:absolute;inset:var(--glow-padding);border-radius:inherit;box-shadow:inset 0 0 0 2px var(--glow-color, hsl(210deg 100% 60% / 100%)),inset 0 0 2px 0 var(--glow-color-60, hsl(210deg 100% 60% / 60%)),inset 0 0 6px 0 var(--glow-color-50, hsl(210deg 100% 60% / 50%)),inset 0 0 12px 0 var(--glow-color-40, hsl(210deg 100% 60% / 40%)),inset 0 0 30px 0 var(--glow-color-30, hsl(210deg 100% 60% / 30%)),inset 0 0 50px 4px var(--glow-color-20, hsl(210deg 100% 60% / 20%)),inset 0 0 100px 4px var(--glow-color-10, hsl(210deg 100% 60% / 10%)),0 0 2px 0 var(--glow-color-60, hsl(210deg 100% 60% / 60%)),0 0 6px 0 var(--glow-color-50, hsl(210deg 100% 60% / 50%)),0 0 12px 0 var(--glow-color-40, hsl(210deg 100% 60% / 40%)),0 0 30px 0 var(--glow-color-30, hsl(210deg 100% 60% / 30%)),0 0 50px 4px var(--glow-color-20, hsl(210deg 100% 60% / 20%)),0 0 100px 4px var(--glow-color-10, hsl(210deg 100% 60% / 10%))}.border-glow-inner{display:flex;flex-direction:column;position:relative;overflow:hidden;border-radius:inherit;z-index:1}.distortion-container{width:100%;height:100%;overflow:hidden}