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