.navbar{justify-content:flex-end;align-items:center;padding:20px 40px;display:flex}.navbar__hamburger{cursor:pointer;display:none}.navbar__hamburger .bar1,.navbar__hamburger .bar2,.navbar__hamburger .bar3{background-color:var(--colour-3);width:35px;height:5px;margin:6px 0;transition:all .4s}.navbar__hamburger.change .bar1{transform:translateY(11px)rotate(-45deg)}.navbar__hamburger.change .bar2{opacity:0}.navbar__hamburger.change .bar3{transform:translateY(-11px)rotate(45deg)}.navbar__links{gap:2rem;margin:0;padding:0;list-style:none;display:flex}.navbar__links a{color:var(--colour-3);font-weight:var(--font-weight-bold);text-decoration:none;transition:color .2s}.navbar__links a.active{color:var(--colour-2);text-underline-offset:6px;text-decoration:underline;text-decoration-thickness:2px}@media (width<=650px){.navbar{width:100%;position:relative}.navbar__hamburger{z-index:2;padding:20px;display:block;position:fixed;top:0;right:0}.navbar__links{opacity:0;visibility:hidden;flex-direction:column;align-items:flex-start;gap:3rem;transition:opacity .25s,transform .25s,visibility .25s;display:flex;position:absolute;top:calc(100% + 8rem);left:3rem;transform:translateY(-10px)}.navbar__links.open{opacity:1;visibility:visible;transform:translateY(0)}.navbar__links a{font-size:1.5rem}.navbar__divider{background:var(--colour-6);opacity:.4;width:15rem;height:1px;margin:2rem 0}}.homeHero{margin-top:2.5em;margin-left:4em;position:relative}@media (width<=768px){.homeHero{margin-left:clamp(2rem,6vw,4em);margin-right:2rem}.homeHero h1{letter-spacing:clamp(.02em,.5vw,.05em);font-size:clamp(4rem,10vw,6rem)}.description{letter-spacing:clamp(.08em,1vw,.18em);max-width:30ch;font-size:clamp(1.25rem,3vw,1.75rem)}}@media (width<=480px){.homeHero{width:min(100% - 2.5rem,420px);margin-top:2rem;margin-left:1.25rem;margin-right:1.25rem}.homeHero h1{letter-spacing:clamp(0em,.3vw,.03em);font-size:clamp(2.5rem,14vw,3.5rem);line-height:1.1}.description{letter-spacing:clamp(.04em,.7vw,.1em);max-width:100%;font-size:clamp(1rem,4vw,1.25rem);line-height:1.5}.button-nav{gap:1rem;padding:.9rem 1.2rem;font-size:clamp(1rem,4vw,1.2rem)}}.home{box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;width:100%;max-width:100vw;display:grid;overflow-x:clip}.home>*{width:100%;min-width:0}.home-donut{aspect-ratio:1;width:100%;max-width:42rem;margin-inline:auto;overflow:hidden}.home-donut canvas{display:block;width:100%!important;height:100%!important}@media (width>=769px){.homeHero{margin-left:0;padding-inline:4em}}@media (width<=768px){.home{flex-direction:column;align-items:stretch;gap:2rem;display:flex}.homeHero{width:auto}.home-donut{max-width:28rem;margin-bottom:2rem}}.Container{max-width:fit-content;margin-top:2.5em;margin-left:4em;margin-right:4em}.AboutMeHero{position:relative}.description{max-width:50ch}@media (width<=480px){.AboutMeHero h1{letter-spacing:clamp(0em,.3vw,.03em);font-size:clamp(2.5rem,14vw,3.5rem);line-height:1.1}.AboutMeHero .description{letter-spacing:clamp(.04em,.7vw,.1em);max-width:100%;font-size:clamp(1rem,4vw,1.25rem);line-height:1.5}}@media (width<=768px){.AboutMeHero h1{letter-spacing:clamp(.02em,.5vw,.05em);font-size:clamp(4rem,10vw,6rem)}.AboutMeHero .description{letter-spacing:clamp(.08em,1vw,.18em);max-width:30ch;font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.5}}.skills{flex-direction:column;gap:5.2rem;margin-top:4rem;display:flex}.skill{width:100%}.skill-header{justify-content:space-between;margin-bottom:.4rem;display:flex}.progress-bar{background:var(--colour-7);width:auto;height:.4rem;overflow:hidden}.progress-fill{background:var(--colour-2);width:0;height:100%;animation:1.2s ease-out forwards fill-progress}@keyframes fill-progress{to{width:var(--progress)}}@media (width<=480px){.skills{gap:2.5rem}.skill-header{font-size:clamp(.9rem,3.5vw,1.1rem)}.progress-bar{height:.35rem}}@media (width<=768px){.skills{gap:3.5rem}.skill-header{font-size:clamp(1rem,2.5vw,1.25rem)}.progress-bar{height:.4rem}}.projectsHero{margin-top:2.5em;margin-left:4em;margin-right:4em;position:relative}.viewProjects{border:2px solid var(--button-border);background:var(--button-bg);color:var(--button-text);align-items:center;gap:2rem;margin-top:2rem;padding:1.2rem 2rem;display:inline-flex}@media (width<=768px){.projectsHero{margin-top:5rem;margin-left:clamp(2rem,6vw,4em);margin-right:2rem}.projectsHero h1{letter-spacing:clamp(.02em,.5vw,.05em);font-size:clamp(4rem,10vw,6rem);line-height:1.15}.projectsHero .description{letter-spacing:clamp(.08em,1vw,.18em);max-width:30ch;font-size:clamp(1.25rem,3vw,1.75rem);line-height:1.6}}@media (width<=480px){.projectsHero{margin-top:3rem;margin-left:1.25rem;margin-right:1.25rem}.projectsHero h1{letter-spacing:clamp(0em,.3vw,.03em);font-size:clamp(2.5rem,14vw,3.5rem);line-height:1.1}.projectsHero .description{letter-spacing:clamp(.04em,.7vw,.1em);max-width:100%;font-size:clamp(1rem,4vw,1.25rem);line-height:1.5}.projectsHero .button-nav{gap:1rem;padding:.9rem 1.2rem;font-size:clamp(1rem,4vw,1.2rem)}}@media (width<=360px){.projectsHero{margin-left:.75rem;margin-right:.75rem}.projectsHero h1{font-size:clamp(2.2rem,13vw,3rem)}}.projectCards{grid-template-columns:repeat(3,1fr);gap:1rem;width:100%;max-width:1100px;margin-top:4em;margin-left:4em;display:grid;position:relative}.projectCards a{color:inherit;text-decoration:none}.projectCards>div{background:linear-gradient(var(--colour-1), var(--colour-1)) padding-box, linear-gradient(145deg, transparent 35%, var(--colour-2), var(--colour-1)) border-box;box-sizing:border-box;min-height:280px;color:var(--colour-3);border:2px solid #0000;margin:0;padding:2rem;transition:transform .2s,border-color .2s;position:relative;overflow:hidden}.projectCards>div:hover{border-color:var(--colour-2);cursor:pointer;transform:translateY(-5px)}.projectCards img{object-fit:cover;width:100%;height:180px}.projectCards h2{margin:1rem 0;font-size:1.5rem}.projectCards p{letter-spacing:.05em;margin:0;font-size:1.2rem;font-weight:500;line-height:1.6}@media (width<=768px){.projectCards{grid-template-columns:repeat(2,1fr);width:min(100% - 4rem,700px);margin-top:3rem;margin-left:auto;margin-right:auto}.projectCards>div{padding:1.5rem}.projectCards img{height:160px}.projectCards h2{font-size:clamp(1.3rem,3vw,1.5rem)}.projectCards p{letter-spacing:clamp(.03em,.5vw,.05em);font-size:clamp(1rem,2.5vw,1.2rem)}}@media (width<=480px){.projectCards{grid-template-columns:1fr;width:min(100% - 2rem,420px);margin-top:2rem;margin-left:auto;margin-right:auto}.projectCards>div{min-height:0;padding:1.25rem}.projectCards img{height:clamp(150px,45vw,180px)}.projectCards h2{font-size:clamp(1.3rem,6vw,1.5rem)}.projectCards p{letter-spacing:clamp(.03em,.5vw,.05em);font-size:clamp(1rem,4vw,1.2rem);line-height:1.5}}@media (width<=360px){.projectCards{width:calc(100% - 1.5rem)}.projectCards>div{padding:1rem}.projectCards img{height:140px}}.dot{background:var(--colour-5);border-radius:50%;width:.2em;height:.2em;margin-left:.05em;display:inline-block}.profile-container{box-sizing:border-box;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"photo heading""photo intro""photo info";align-items:center;gap:.65rem clamp(1.25rem,2.5vw,2.5rem);display:grid}.profile-image-wrapper{aspect-ratio:1;grid-area:photo;justify-self:center;width:clamp(8rem,14vw,14rem)}.profile-container h1{white-space:nowrap;grid-area:heading;margin:0;font-size:clamp(2.4rem,3.4vw,4rem);line-height:1.05}.profile-intro{grid-area:intro;max-width:18ch;margin:0}.profile-image{object-fit:cover;border:.125rem solid var(--colour-2);border-radius:50%;width:100%;height:100%;transition:border-color .5s;display:block}.profile-info{flex-direction:column;grid-area:info;gap:1.1rem;margin-top:.5rem;display:flex}.profile-info-item{align-items:center;gap:.875rem;min-width:0;display:flex}.profile-info-icon{width:1.25rem;height:1.25rem;color:var(--colour-2);flex:none;transition:color .5s}.profile-info-text{color:var(--colour-3);font-family:var(--font-family);font-size:clamp(1rem,1.2vw,1.4rem);font-weight:var(--font-weight-regular);letter-spacing:var(--font-letter-spacing);overflow-wrap:anywhere;line-height:1.5;text-decoration:none;transition:color .2s}a.profile-info-text:hover{color:var(--colour-2)}.email-reveal{color:var(--colour-3);font-family:var(--font-family);font-size:clamp(1rem,1.2vw,1.4rem);font-weight:var(--font-weight-regular);letter-spacing:var(--font-letter-spacing);cursor:pointer;text-align:left;background:0 0;border:none;margin:0;padding:0;line-height:1.5}.email-reveal:hover{color:var(--colour-2)}.email-challenge{min-width:0;color:var(--colour-3);font-family:var(--font-family);font-size:clamp(1rem,1.2vw,1.4rem);font-weight:var(--font-weight-regular);letter-spacing:var(--font-letter-spacing);align-items:center;gap:.875rem;line-height:1.5;display:flex}.challenge-code{font-family:var(--font-family);font-size:inherit;font-weight:inherit;letter-spacing:.08em;line-height:inherit;white-space:nowrap;-webkit-user-select:none;user-select:none;display:inline-block}.challenge-input{box-sizing:border-box;border:1px solid var(--colour-6);width:130px;min-width:0;height:2.2rem;color:var(--colour-3);font-family:var(--font-family);font-size:clamp(1rem,1.2vw,1.4rem);font-weight:var(--font-weight-regular);letter-spacing:var(--font-letter-spacing);background:0 0;border-radius:0;outline:none;padding:0 .5rem;line-height:1}.challenge-input::placeholder{color:var(--colour-6);opacity:1}.challenge-input:focus{border-color:var(--colour-3)}@media (width<=1024px){.profile-container{flex-direction:column;align-items:flex-start;gap:1rem;display:flex}.profile-image-wrapper{width:clamp(8rem,22vw,12rem)}.profile-container h1{letter-spacing:clamp(.02em,.5vw,.05em);font-size:clamp(2.4rem,5vw,3.5rem)}.profile-intro{letter-spacing:clamp(.08em,1vw,.18em);max-width:16ch;font-size:clamp(1.15rem,2.4vw,1.5rem)}.profile-info{gap:.85rem}.profile-info-text,.email-reveal{font-size:clamp(.95rem,2vw,1.2rem)}}@media (width<=650px){.profile-container{flex-direction:column;align-items:flex-start;gap:1.25rem;display:flex}.profile-container h1{letter-spacing:clamp(0em,.3vw,.03em);white-space:nowrap;order:1;font-size:clamp(2.5rem,12vw,3.5rem)}.profile-intro{letter-spacing:clamp(.04em,.7vw,.1em);order:2;max-width:100%;font-size:clamp(1rem,4vw,1.25rem);line-height:1.5}.profile-image-wrapper{order:3;align-self:center;width:min(70vw,16rem)}.profile-info{order:4;width:100%;margin-top:.25rem}.email-challenge{flex-wrap:wrap;gap:.5rem}.challenge-input{width:120px}}.contact-form-container{box-sizing:border-box;width:100%}.contact-form{flex-direction:column;gap:1.15rem;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.form-row{grid-template-columns:1fr 1fr;gap:1.15rem;display:grid}.form-group{margin:0}.form-input,.form-textarea{box-sizing:border-box;border:.125rem solid var(--colour-2);width:100%;color:var(--colour-3);font-family:var(--font-family);font-size:clamp(.95rem,1vw,1.15rem);font-weight:var(--font-weight-regular);letter-spacing:var(--font-letter-spacing);background-color:#0000;border-radius:.5rem;padding:clamp(.75rem,1vw,1rem);transition:border-color .2s,box-shadow .2s,color .5s}.form-input::placeholder,.form-textarea::placeholder{color:color-mix(in srgb, var(--colour-3) 55%, transparent);opacity:1;text-transform:lowercase}.form-input:focus,.form-textarea:focus{border-color:var(--colour-3);box-shadow:0 0 0 .1875rem color-mix(in srgb, var(--colour-2) 20%, transparent);outline:none}.form-textarea{resize:vertical;min-height:clamp(8rem,12vw,12rem)}.contact-form-submit{cursor:pointer;font-family:var(--font-family);white-space:nowrap;align-self:flex-start;margin-top:.75rem}.form-status{letter-spacing:.08em;min-height:1.5em;color:var(--colour-3);margin:0;font-size:1rem;line-height:1.4}@media (width<=1024px){.form-input,.form-textarea{font-size:clamp(.95rem,2vw,1.1rem)}.contact-form-submit{gap:1rem;padding:.85rem 1.3rem;font-size:1.15rem}}@media (width<=768px){.contact-form-submit{gap:.85rem;padding:.8rem 1.15rem;font-size:1.05rem}}@media (width<=650px){.form-row{grid-template-columns:1fr}.form-textarea{min-height:8rem}.contact-form-submit{gap:1rem;padding:.9rem 1.2rem;font-size:clamp(1rem,4vw,1.2rem)}}.contact{box-sizing:border-box;padding-inline:4em;grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:2.5rem 3rem;width:100%;max-width:100vw;padding-top:2.5em;display:grid}.contact>*{width:100%;min-width:0}@media (width<=768px){.contact{padding-inline:clamp(2rem,6vw,4em)}}@media (width<=650px){.contact{padding-inline:1.25rem;flex-direction:column;align-items:stretch;gap:2.5rem;padding-top:2rem;padding-bottom:1.5rem;display:flex}}@media (width<=360px){.contact{padding-inline:.75rem}}.themebar{border:2px solid var(--colour-2);z-index:1000;cursor:pointer;border-radius:25px;align-items:center;width:80px;height:40px;display:flex;position:fixed;bottom:1.5rem;right:1.5rem;overflow:hidden}.themebar_checkbox{display:none}.themebar_toggler{background-color:var(--colour-3);border-radius:50%;width:30px;height:30px;transition:transform .5s,background-color 1.3s .2s}.themebar_checkbox:checked+.themebar_toggler{background-color:var(--colour-2);transform:translate(46px)}@media (width<=768px){.themebar{width:64px;height:32px;bottom:1rem;right:1rem}.themebar_toggler{width:24px;height:24px}.themebar_checkbox:checked+.themebar_toggler{transform:translate(36px)}}.social-links{flex-direction:row;gap:2.5rem;display:flex;position:fixed;bottom:1.5rem;left:1.5rem}.social-links a{color:var(--colour-4);font-size:2.5rem;transition:color .2s,transform .2s}.social-links a:hover{transform:scale(1.1)}[data-theme=light] .social-links a{color:var(--colour-3)}@media (width<=768px){.social-links{gap:1.25rem;bottom:1rem;left:1rem}.social-links a{font-size:1.75rem}}.spinner-container{z-index:99999;align-items:center;gap:1rem;display:flex;position:absolute;top:12px;left:12px}.SpinnerText p{letter-spacing:.08em;color:var(--colour-3);margin:0;font-size:1.2rem}.spinner{border:2px solid color-mix(in srgb, var(--colour-3) 15%, transparent);border-top-color:var(--colour-3);border-right-color:var(--colour-3);border-radius:50%;flex-shrink:0;width:24px;height:24px;position:relative}.spinning{animation:1.5s linear infinite spin}.spinner-2{border:2px solid color-mix(in srgb, var(--colour-2) 15%, transparent);border-top-color:var(--colour-2);border-right-color:var(--colour-2);border-radius:50%;width:12px;height:12px;position:absolute;top:4px;left:4px}.spinning-2{animation:1s linear infinite spin-2}.spinner-3{border:2px solid color-mix(in srgb, var(--colour-1) 15%, transparent);border-top-color:var(--colour-3);border-right-color:var(--colour-3);border-radius:50%;width:6px;height:6px;position:absolute;top:1px;left:1px}.spinning-3{animation:.7s linear infinite spin-3}.stopped,.stopped .spinner-2,.stopped .spinner-3{animation:none}@keyframes spin{to{transform:rotate(360deg)}}@keyframes spin-2{to{transform:rotate(-360deg)}}@keyframes spin-3{to{transform:rotate(360deg)}}*{box-sizing:border-box;margin:0;padding:0}:root{--colour-1:#000;--colour-2:#ef0000;--colour-3:#fff;--colour-4:#af0000;--colour-5:#ffe5ac;--colour-6:#cecece;--colour-7:#000;--button-bg:transparent;--button-text:var(--colour-3);--button-border:var(--colour-4);--chrome-offset:1.5rem;--chrome-height:2.5rem;--donut-rotation-x:0deg;--donut-rotation-y:0deg;--donut-rotation-z:25deg;--donut-spin-x:0;--donut-spin-y:.35;--donut-spin-z:0;--donut-scale:1;--font-family:"Space Grotesk", sans-serif;--font-weight-regular:800;--font-weight-bold:900;--font-letter-spacing:-.02em}body{background-color:var(--colour-1);color:var(--colour-3);font-family:var(--font-family);font-weight:var(--font-weight-regular);letter-spacing:var(--font-letter-spacing);transition:background-color .5s,color .5s}h1{color:var(--colour-2);letter-spacing:.05em;text-transform:uppercase;font-size:6rem;font-weight:600;line-height:1.35;transition:color .5s}h2{color:var(--colour-2);letter-spacing:.05em;text-transform:uppercase;font-size:4rem;font-weight:600;line-height:1.35;transition:color .5s}p{color:var(--colour-3);letter-spacing:.18em;font-size:1.75rem;font-weight:500;line-height:1.8}[data-theme=light]{--colour-1:#be0407;--colour-2:#fff;--colour-3:#fff;--colour-4:#af0000;--colour-5:#ffe5ac;--colour-6:#000;--button-bg:var(--colour-2);--button-text:var(--colour-1);--button-border:var(--colour-2)}body:has(.navbar__links.open) .page-content{opacity:0;pointer-events:none;transition:opacity .5s}body:has(.navbar__links.closing) .page-content{opacity:0;pointer-events:none;transition:opacity 1s}.page-content{padding-bottom:calc(var(--chrome-offset) + var(--chrome-height) + 1rem);opacity:1;transition:opacity 1s}.button-nav{border:2px solid var(--button-border);background:var(--button-bg);color:var(--button-text);font-size:1.8rem;font-weight:var(--font-weight-bold);align-items:center;gap:2rem;margin-top:2rem;padding:1.2rem 2rem;text-decoration:none;transition:transform .2s,background-color .2s,color .2s;display:inline-flex}.button-nav:hover{background-color:var(--colour-4);color:var(--colour-3);transform:scale(1.05)}.button-nav:active{transform:scale(.95)}.button-nav .arrow{transition:transform .2s}.button-nav:hover .arrow{transform:translate(8px)}
