@import"https://fonts.googleapis.com/css2?family=Caveat&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;font-family:Poppins,sans-serif}body,#root{min-height:100vh;width:100%;background-color:#272727;color:#d9d9d9}html,body{scroll-behavior:smooth;scroll-snap-type:y proximity}#root{position:relative;isolation:isolate}#root:before{content:"";position:absolute;inset:0;background-image:url(/assets/img/code\ 2.png);background-size:100vw;background-position:center 40%;background-repeat:no-repeat;opacity:.04;z-index:-1}section{scroll-snap-align:start;width:100%;height:100vh;overflow:hidden;padding:clamp(1rem,5vw,5rem) clamp(2rem,10vw,10rem);padding-left:10rem}@media (max-width: 768px){section{padding-left:clamp(2rem,10vw,10rem)}}canvas+canvas{display:none}a{text-decoration:none;color:#d9d9d9}button{background-color:transparent;border:none;cursor:pointer;outline:none;color:#d9d9d9}.container{margin-block:2em;max-width:max-content;display:grid;place-items:center}.float-text{position:relative}.float-text:before{font-family:Caveat,cursive;color:#5f77f3;font-size:.75em;position:absolute;top:-1.25em;left:-3em;rotate:-10deg}.float-text:after{font-family:Caveat,cursive;color:#5f77f3;font-size:.75em;position:absolute;top:-1em;left:100%;translate:-50% 0;white-space:nowrap;rotate:10deg}.p5-sketch{margin:clamp(-5rem,-5vw,-1rem) clamp(-10rem,-10vw,-2rem);font-size:clamp(5rem,10vw,10rem);touch-action:none}#mainNav{position:fixed;top:0;bottom:0;left:0;height:100vh;padding:2rem;display:grid;place-items:center}#mainNav ul{height:50%;list-style:none;display:flex;flex-flow:column;justify-content:space-between;align-items:center}#mainNav a{cursor:pointer;font-size:1.2rem;display:grid;place-items:center;text-decoration:none;transition:scale .2s ease}#mainNav a span{opacity:0;transition:opacity .2s}#mainNav a:hover,#mainNav a.active{scale:1.2}#mainNav a:hover span,#mainNav a.active span{opacity:1}@media (max-width: 768px){#mainNav{display:none}}.pinwheel{position:fixed;top:0;right:0;width:75%;max-width:40rem;height:100vh;display:grid;place-items:center;transform-style:preserve-3d;font-size:5rem}.pinwheel__ball{width:1em;height:1em;border-radius:50%;background-color:#add8e6;position:absolute;top:-10em;left:calc(50% - .5em);background-image:radial-gradient(circle at top,rgba(0,0,0,0),rgba(0,0,0,.7));animation:fall 4s linear infinite}@keyframes fall{0%{top:-10em}25%,to{top:100%}}.pinwheel__plus{width:3em;height:3em;position:relative;left:1em;animation:spin 4s .65s ease-out infinite}@keyframes spin{0%{transform:rotate(0)}75%,to{transform:rotate(-1080deg)}}.pinwheel__plus .horiz{width:100%;height:.5em;background-color:#5f77f3;position:absolute;top:calc(50% - .25em);box-shadow:0 0 .5em #000}.pinwheel__plus .vert{width:.5em;height:100%;background-color:#5f77f3;position:absolute;left:calc(50% - .25em);box-shadow:0 0 .5em #000}.pinwheel__plus .screw{width:.25em;height:.25em;border-radius:50%;position:absolute;top:calc(50% - .125em);left:calc(50% - .125em);background-color:#444;box-shadow:0 0 .1em #aaa inset;display:grid;place-items:center}.pinwheel__plus .screw:after{content:"";display:block;width:80%;height:10%;border-radius:10px;background-color:#111}@media (max-width: 768px){.pinwheel{display:none}}.landing{display:grid}.landing h1{align-self:flex-end;font-size:clamp(2.5em,5vw,5em);line-height:1;position:relative;isolation:isolate;width:max-content;pointer-events:none}.landing h1>span{display:inline-block;animation:drop-in .8s ease-in forwards}@keyframes drop-in{0%{translate:0 -100vh;rotate:0deg}70%{translate:0 0;rotate:0deg}80%{translate:0 -.25em;rotate:-2deg}90%{translate:0 -.25em;rotate:2deg}to{scale:1 1;translate:0 0}}.landing h1 .backdrop{position:absolute;bottom:0;font-size:2em;line-height:.85;letter-spacing:-5px;z-index:-1;display:flex;justify-content:space-between;width:100%;opacity:.5}.landing h1 .backdrop span{color:#5f77f3;pointer-events:all}.landing h1 .backdrop span.animating{animation:squish .5s ease}@keyframes squish{0%{scale:1 1}50%{scale:1.1 .9}to{scale:1 1}}.landing p{font-size:clamp(.75em,1.5vw,1.5em);position:relative;max-width:60ch;height:max-content;animation:fadeIn .5s ease forwards}.landing p span{display:inline-block;font-size:1.5em;animation:wave 2s infinite;transform-origin:80% 80%}@keyframes wave{0%{rotate:0deg}25%{rotate:-15deg}50%{rotate:10deg}75%{rotate:0deg}}@keyframes fadeIn{0%{opacity:0;translate:0 -10px}to{opacity:1;translate:0}}@media (max-width: 768px){.landing{justify-content:center}.landing p{justify-self:center;text-align:center}}.skills .container{place-items:initial}.skills .skills-list{list-style:none;display:flex;flex-flow:wrap;justify-content:center;align-items:center;gap:.5rem;max-width:calc(100% - 20rem);font-size:clamp(1.25em,2vw,3em);position:relative}@media (max-width: 768px){.skills .skills-list{max-width:100%}}.skills .skills-list li{display:flex;justify-content:center;align-items:center;gap:1rem;padding:0 1rem;border-radius:8px;border:1px solid rgba(217,217,217,.4);font-weight:700;transition:box-shadow .2s ease,scale .2s ease;position:relative;top:var(--dy);left:var(--dx);cursor:move;cursor:grab}.skills .skills-list li:active{cursor:grabbing}.skills .skills-list li.dragging{box-shadow:0 4px 4px 4px #00000040;scale:1.05}.skills .skills-list li svg{pointer-events:none}.projects h1{font-size:7em;font-weight:900}.projects .projects-list{list-style:none;width:max-content;display:flex;flex-flow:wrap;max-width:50vw;gap:.5rem}.projects .projects-list:hover>li:before{opacity:1}.projects .projects-list li{display:grid;place-items:center;width:max-content;background-color:#272727;border-radius:12px;position:relative}.projects .projects-list li a{border-radius:inherit}.projects .projects-list li:before{content:"";position:absolute;inset:0;opacity:0;border-radius:inherit;background-image:radial-gradient(10rem circle at var(--x) var(--y),#5f77f3,transparent);transition:opacity .4s linear}.projects .projects-list .card{margin:2px;aspect-ratio:16/9;width:clamp(15rem,16vw,20rem);background-repeat:no-repeat;background-size:cover;background-image:linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.75)),var(--bg-img);background-position:center;border-radius:inherit;position:relative;text-align:center;padding:.5rem}.projects .projects-list .card h4{font-size:clamp(2rem,2vw,2.5rem);font-weight:700;translate:0 1em;transition:translate .2s ease}.projects .projects-list .card p{opacity:0;transition:opacity .2s ease,translate .2s ease}@media (max-width: 768px){.projects .projects-list .card h4{translate:0 0em}.projects .projects-list .card p{opacity:1}}.projects .projects-list .card:hover{cursor:pointer}.projects .projects-list .card:hover h4{translate:0 0}.projects .projects-list .card:hover p{opacity:1}@media (max-width: 768px){.projects .projects-list{margin-block-start:6rem;flex-flow:row;max-width:100vw;margin-left:clamp(-10rem,-10vw,-2rem);overflow-x:scroll}.projects .projects-list li:first-child{margin-left:clamp(2rem,10vw,10rem)}.projects .projects-list li{--x: 50%;--y: 50%}.projects .projects-list li:before{opacity:1}}.contact p{font-size:clamp(1.25em,2vw,2em)}.contact p:before{content:"Available for Freelance Work!"}.contact .socials{width:max-content;display:flex;justify-content:center;align-items:center;margin-block:2rem;gap:3rem}.contact .socials a{line-height:1;font-size:3em;padding:.75rem;border-radius:12px;transition:background-color .3s ease,color .3s ease}.contact .socials a:hover{background-color:#d9d9d9;color:#5f77f3}.contact #resume-dl{font-size:1.5em;padding:.5rem 1rem;border-radius:12px;border:2px solid;position:relative;isolation:isolate;background-color:#272727;display:flex;align-items:center;gap:1rem}.contact #resume-dl:hover:after{opacity:.25}.contact #resume-dl:after{content:"";display:block;position:absolute;inset:-2px;border-radius:inherit;background-image:radial-gradient(circle at var(--x) var(--y),#5f77f3,transparent);opacity:0;z-index:-1;transition:opacity .3s}