:root{--clr-primary: #f0f0ff;--clr-secondary: #a0a0b4;--clr-accent-primary: #9bffed;--clr-accent-secondary: #bb9bff;--clr-error: #ff4c53;--clr-success: #b4ff9b;--clr-unknown: #fff160;--clr-bg-primary: #17171e;--clr-bg-secondary: #21212c;--font-main: "Inter", sans-serif;--font-mono: "SF Mono", monospace;--margin-xs: 0.5em;--margin-s: 1em;--margin-m: 2em;--margin-l: 3em;--nav-animation-duration: 100ms;--header-animation-duration: 175ms;--scroll-transition-duration: 200ms}.brutalist-button{cursor:pointer;position:absolute;top:0;left:0;display:flex;justify-content:center;align-items:center;width:100%;height:100%;background:var(--clr-bg-secondary);border-radius:5px;color:var(--clr-primary);font-family:var(--font-mono);font-size:16px;font-weight:700;text-decoration:none;text-transform:uppercase;transition-property:top,left,color;transition-duration:100ms;transition-timing-function:linear}.brutalist-button:hover,.brutalist-button:focus-visible{top:-5px;left:-5px;color:var(--clr-accent-primary)}.brutalist-button:focus-visible{outline:none}.brutalist-button__wrapper{position:relative;background:linear-gradient(125deg, var(--clr-accent-primary), var(--clr-accent-secondary));border-radius:8px}:root{scroll-behavior:smooth}::-moz-selection{background:var(--clr-accent-primary);color:var(--clr-bg-primary)}::selection{background:var(--clr-accent-primary);color:var(--clr-bg-primary)}body{background:var(--clr-bg-primary);font-family:var(--font-main);color:var(--clr-primary)}header,main{padding-inline:100px}header{display:flex;flex-direction:column;justify-content:center;width:-moz-fit-content;width:fit-content;min-height:100vh;padding-block:200px;margin-inline:auto}main{display:flex;flex-direction:column;align-items:center;padding-bottom:100px}.nav{display:flex;justify-content:center;align-items:center;width:100%;padding:16px 32px;position:fixed;z-index:1;top:0;left:0;background:var(--clr-bg-primary);text-decoration:none}.nav__wrapper{flex-grow:1;flex-basis:0;display:flex;align-items:center}.logo{display:block;width:40px;height:40px}.logo__link{width:-moz-fit-content;width:fit-content;border-radius:50%;transition:transform 100ms linear}.logo__link:hover,.logo__link:focus-visible{transform:scale(1.1)}.menu-button{display:none}.page-links{display:flex;align-items:center;gap:3.125rem;counter-reset:index -1}.page-links__link{display:flex;align-items:center;gap:.6em;opacity:0;transform:translateY(-10px);font-family:var(--font-mono);font-size:.875rem;color:var(--clr-secondary);text-decoration:none;text-transform:uppercase;transition-property:color,text-shadow;transition-duration:120ms;transition-timing-function:linear;animation-duration:var(--nav-animation-duration);animation-delay:calc(var(--nav-animation-duration)*var(--i));animation-timing-function:linear;animation-fill-mode:forwards}.page-links__link:hover,.page-links__link:focus-visible{text-shadow:0px 0px 20px var(--clr-accent-primary);color:var(--clr-accent-primary)}.page-links__link::before{content:"[" counter(index) "]";counter-increment:index;color:var(--clr-accent-primary)}.social-links{display:flex;align-items:center;justify-content:end;gap:30px;height:100%;margin-left:auto}.social-links__button{position:relative;top:0;display:flex;justify-content:center;align-items:center;border-radius:50%;opacity:0;transform:translateY(-10px);transition-property:top,scale;transition-duration:100ms;transition-timing-function:linear;animation-duration:var(--nav-animation-duration);animation-delay:calc(var(--nav-animation-duration)*var(--i));animation-timing-function:linear;animation-fill-mode:forwards}.social-links__button:hover,.social-links__button:focus-visible{top:-5px;scale:1.1}.social-links__button:hover .social-links__icon-colour,.social-links__button:focus-visible .social-links__icon-colour{fill:var(--clr-accent-primary)}.social-links__icon{height:20px;width:auto;overflow:visible}.social-links__icon-colour{fill:var(--clr-primary);transition:fill 100ms linear}.header__button-wrapper{width:260px;height:56px;opacity:0;transform:translateY(10px);animation-duration:var(--header-animation-duration);animation-delay:calc(var(--header-animation-duration)*var(--i));animation-timing-function:linear;animation-fill-mode:forwards}.main-heading{display:flex;flex-direction:column;align-items:start;margin-inline:auto;margin-bottom:var(--margin-s);font-size:3.5rem;font-weight:700}.main-heading__line{opacity:0;transform:translateY(10px);animation-duration:var(--header-animation-duration);animation-delay:calc(var(--header-animation-duration)*var(--i));animation-timing-function:linear;animation-fill-mode:forwards}.main-heading__first-line{margin-bottom:var(--margin-s);font-family:var(--font-mono);font-size:1rem;font-weight:400;color:var(--clr-accent-primary);animation-delay:100ms}.main-heading__last-line{color:var(--clr-secondary)}.section{width:100%;max-width:1500px}.section:not(:last-child){margin-bottom:20rem}.section__heading{--gap: 1rem;display:flex;align-items:center;gap:var(--gap);position:relative;max-width:500px;margin-inline:auto;margin-bottom:var(--margin-l);font-size:1.5rem}.section__heading::after{content:"";height:1px;width:100%;background:var(--clr-secondary)}.section__heading__section-icon{height:1.25rem}.section__heading__link{flex-shrink:0;display:flex;align-items:center;gap:var(--gap);color:var(--clr-primary);font-family:var(--font-mono);font-weight:700;text-decoration:none;text-transform:uppercase;letter-spacing:.25em}.section__heading__link:hover+.section__heading__link-icon,.section__heading__link:focus-visible+.section__heading__link-icon{visibility:1;opacity:1}.section__heading__link-icon{position:absolute;right:calc(100% + var(--gap));height:1rem;visibility:0;opacity:0;transition-property:visibility,opacity;transition-duration:100ms;transition-timing-function:linear}.section__icon{width:60px;margin-inline:auto;margin-bottom:4rem;color:#fff}.about-me-paragraph{max-width:600px;margin-inline:auto;color:var(--clr-secondary)}.about-me-paragraph:not(:last-child){margin-bottom:var(--margin-s)}.skills-grid{display:flex;justify-content:center;flex-wrap:wrap;gap:30px;max-width:870px;margin-inline:auto}.skills-grid__box{flex-shrink:0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:150px;height:150px;background:var(--clr-bg-secondary);border-radius:8px}.skill__icon{height:45px;margin-bottom:20px}.skill__icon--s{width:80px;-o-object-fit:contain;object-fit:contain;-o-object-position:bottom;object-position:bottom}.skill__name{color:var(--clr-secondary);font-size:16px}.project{position:relative;display:flex;align-items:center;width:100%;max-width:1000px;margin-inline:auto}.project:not(:last-child){margin-bottom:10rem}.project:nth-of-type(odd){flex-direction:row-reverse}.project:nth-of-type(odd) .project__details-container{align-items:start;left:0}.project__preview-image{width:55%;height:auto;border:2px solid var(--clr-bg-secondary);border-radius:5px}.project__details-container{display:flex;flex-direction:column;align-items:end;position:absolute;right:0;width:50%}.project__heading{margin-bottom:var(--margin-xs)}.project__link{position:relative;color:var(--clr-primary);font-size:1.375rem;font-weight:700;text-decoration:none;transition:color 150ms linear}.project__link::before{content:"";position:absolute;bottom:.2em;width:100%;height:2px;background:var(--clr-accent-primary);transform-origin:left;transform:scaleX(0);transition:transform 150ms linear}.project__link:hover,.project__link:focus-visible{color:var(--clr-accent-primary)}.project__link:hover::before,.project__link:focus-visible::before{transform:scale(1)}.project__sub-container{padding:20px;margin-bottom:1.25rem;background:var(--clr-bg-secondary);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1)}.project__description{margin-bottom:1.5rem;color:var(--clr-secondary);font-size:.875rem}.project__tags-container{display:flex;flex-wrap:wrap;gap:10px}.project__tag{--background-opacity: 0.2;padding:.5em 1em;background:rgba(155, 255, 237, var(--background-opacity));border-radius:200vw;color:var(--clr-accent-primary);font-size:.75rem}.project__tag--javascript,.project__tag--json{background:rgba(240, 219, 79, var(--background-opacity));color:#f0db4f}.project__tag--html{background:rgba(239, 101, 42, var(--background-opacity));color:#ef652a}.project__tag--css{background:rgba(28, 136, 199, var(--background-opacity));color:#1c88c7}.project__tag--sass{background:rgba(235, 63, 121, var(--background-opacity));color:#eb3f79}.project__tag--react{background:rgba(97, 218, 251, var(--background-opacity));color:#61dafb}.project__tag--webpack{background:rgba(142, 214, 251, var(--background-opacity));color:#8ed6fb}.project__tag--npm{background:rgba(203, 56, 55, var(--background-opacity));color:#cb3837}.project__button-container{display:flex;align-items:center;gap:15px}.project__button{display:block;transition:transform 150ms linear}.project__button:hover,.project__button:focus-visible{transform:scale(1.2)}.project__button:hover .project__icon-colour,.project__button:focus-visible .project__icon-colour{fill:var(--clr-accent-primary)}.project__button-icon{display:block;overflow:visible;height:20px}.project__icon-colour{fill:var(--clr-primary);transition:fill 150ms linear}.contact-form{display:grid;gap:20px;width:100%;max-width:550px;margin-inline:auto;font-family:var(--font-main)}.contact-form__wrapper{position:relative;display:flex;justify-content:center;align-items:center}.contact-form__wrapper::before{content:"";position:absolute;z-index:-1;width:calc(100% + 4px);height:calc(100% + 4px);background:linear-gradient(125deg, var(--clr-accent-primary), var(--clr-accent-secondary));border-radius:7px;visibility:hidden;opacity:0;transition-property:opacity,visibility;transition-duration:100ms;transition-timing-function:linear}.contact-form__wrapper:focus-within::before{visibility:visible;opacity:1}.contact-form__wrapper--error::before{background:var(--clr-error);visibility:visible;opacity:1}.contact-form__wrapper--message{grid-column:1/3}.contact-form__name,.contact-form__email-address,.contact-form__message,.contact-form__submit-button{border:0;font-size:.875rem}.contact-form__name,.contact-form__email-address,.contact-form__message{padding:1.25em 1.7em;background:var(--clr-bg-secondary);border-radius:5px;color:var(--clr-secondary);font-family:inherit}.contact-form__name:focus-visible,.contact-form__email-address:focus-visible,.contact-form__message:focus-visible{outline:none}.contact-form__name,.contact-form__email-address{width:100%}.contact-form__message{resize:none;width:100%;height:24rem}.contact-form__button-wrapper{grid-column:1/3;height:3.25rem}.contact-form__submit-button{letter-spacing:.25em}.contact-form__error-messages{grid-column:1/3}.contact-form__error-message{display:none;color:var(--clr-error);font-size:.75rem}.contact-form__error-message--visible{display:block}.popup{--duration: 3000ms;--delay: calc(var(--duration) / 4);display:flex;flex-direction:column;align-items:center;position:fixed;bottom:50px;left:20px;width:-moz-fit-content;width:fit-content;max-width:300px;padding:1.25rem 1.5rem;background:var(--clr-bg-secondary);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);visibility:hidden;opacity:0;text-align:center}.popup--visible{animation-name:popup-fade-in;animation-duration:var(--duration);animation-iteration-count:2;animation-direction:alternate;animation-timing-function:linear}.popup__icon{height:40px;margin-bottom:var(--margin-xs)}.popup__icon--visible{animation-name:wiggle;animation-delay:var(--delay);animation-duration:400ms;animation-timing-function:linear}.popup__heading{margin-bottom:var(--margin-xs);font-family:var(--font-mono);font-weight:700}.popup__message{font-size:.875rem;color:var(--clr-secondary)}.thank-you-popup__heading{color:var(--clr-success)}.error-popup__heading{color:var(--clr-error)}.loading-popup{transition-property:left,visibility,opacity;transition-duration:var(--delay);transition-timing-function:linear}.loading-popup--visible{left:50px;visibility:visible;opacity:1}.loading-popup__heading{color:var(--clr-unknown)}.loading-icon{--diameter: 60px;--diameter-s: calc(var(--diameter) - 20px);position:relative;display:flex;justify-content:center;align-items:center;width:var(--diameter);height:var(--diameter);margin-bottom:1rem;background:conic-gradient(var(--clr-unknown) 90deg, #303041 90deg);border-radius:50%;animation-name:rotate;animation-duration:1000ms;animation-iteration-count:infinite;animation-timing-function:ease-in-out}.loading-icon::before,.loading-icon::after{content:"";position:absolute;width:10px;height:10px;background:var(--clr-unknown);border-radius:50%}.loading-icon::before{top:0}.loading-icon::after{right:0}.loading-icon__inner-circle{width:var(--diameter-s);height:var(--diameter-s);background-color:var(--clr-bg-secondary);border-radius:50%}@keyframes intro-fade-in{to{opacity:1;transform:translate(0)}}@keyframes popup-fade-in{0%{left:20px;visibility:hidden;opacity:0}25%{left:50px;visibility:visible;opacity:1}100%{left:50px;visibility:visible;opacity:1}}@keyframes wiggle{0%{transform:rotate(0deg)}25%{transform:rotate(-30deg)}50%{transform:rotate(30deg)}100%{transform:rotate(0deg)}}@keyframes rotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}@media(prefers-reduced-motion: no-preference){.section__heading{--pseudo-element-scale: 0;transition:opacity var(--scroll-transition-duration) linear}.section__heading::after{transform-origin:left;transition:transform var(--scroll-transition-duration) linear var(--scroll-transition-duration)}.section__heading--hidden{opacity:0}.section__heading--hidden::after{transform:scaleX(var(--pseudo-element-scale))}.about-me-paragraph{transition-property:opacity,transform;transition-duration:var(--scroll-transition-duration);transition-delay:calc(var(--scroll-transition-duration)*var(--i));transition-timing-function:linear}.about-me-paragraph--hidden{opacity:0;transform:translateX(-20px)}.skills-grid__box{--scroll-transition-duration: 120ms;transition-property:opacity,transform;transition-duration:var(--scroll-transition-duration);transition-delay:calc(var(--scroll-transition-duration)*var(--i));transition-timing-function:linear}.skills-grid__box--hidden{opacity:0;transform:translateX(-50px)}.project{--scroll-transition-duration: 300ms;transition-property:opacity,transform;transition-duration:var(--scroll-transition-duration);transition-delay:calc(var(--scroll-transition-duration)*var(--i));transition-timing-function:linear}.project--hidden{opacity:0}.project--hidden:nth-of-type(odd){transform:translateX(20px)}.project--hidden:nth-of-type(even){transform:translateX(-20px)}.contact-form{transition:opacity var(--scroll-transition-duration) linear}.contact-form--hidden{opacity:0}}@media screen and (max-width: 1200px){.project{align-items:start;gap:20px;max-width:800px}.project:not(:last-child){margin-bottom:8rem}.project:nth-of-type(odd){flex-direction:row}.project__preview-image{width:30%;min-width:200px}.project__details-container{align-items:start;position:static;width:70%}.project__sub-container{padding:0;background:rgba(0,0,0,0);box-shadow:none}.project__description{margin-bottom:1rem}}@media screen and (max-width: 1200px)and (prefers-reduced-motion: no-preference){.project--hidden:nth-of-type(odd){transform:translateX(-20px)}}@media screen and (max-width: 1100px){:root{--header-animation-duration: 100ms}.menu-button{cursor:pointer;display:flex;align-items:center;gap:.25em;padding:8px;background:none;border-radius:0;border:0;scale:1;opacity:0;transform:translateY(-10px);font-size:1rem;transition:scale 100ms linear;animation-duration:var(--nav-animation-duration);animation-delay:calc(var(--nav-animation-duration)*var(--i));animation-timing-function:linear;animation-fill-mode:forwards}.menu-button:hover,.menu-button:focus-visible{scale:1.1}.menu-button__text{color:var(--clr-secondary);font-family:var(--font-mono);font-weight:700;letter-spacing:.5em;text-transform:uppercase}.menu-button__icon{height:1.25em;transition:transform 100ms linear}.menu-button__icon--active{transform:rotate(90deg)}.page-links{padding:1rem 1.25rem;position:absolute;top:100%;flex-direction:column;align-items:start;gap:1rem;background:var(--clr-bg-secondary);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px)}.page-links.menu-button-active{transition-property:opacity,visibility,transform;transition-duration:100ms;transition-timing-function:linear}.page-links--active{opacity:1;visibility:visible;transform:translateY(0)}}@media screen and (max-width: 850px){.project{--project-card-width: 450px;flex-direction:column;align-items:center}.project:nth-of-type(odd){flex-direction:column}.project__preview-image{width:100%;max-width:var(--project-card-width)}.project__details-container{width:100%;max-width:var(--project-card-width)}}@media screen and (max-width: 768px){header,main{padding-inline:60px}header{align-items:center}.main-heading{align-items:center;text-align:center}.section:not(:last-child){margin-bottom:14rem}}@media screen and (max-width: 650px){.skills-grid{gap:15px}.skills-grid__box{width:105px;height:105px}.skill__icon{height:32px;margin-bottom:10px}.skill__icon--s{width:42px;-o-object-fit:contain;object-fit:contain;-o-object-position:bottom;object-position:bottom}.skill__name{color:var(--clr-secondary);font-size:14px}.contact-form__wrapper--name,.contact-form__wrapper--email-address{grid-column:1/3}}@media screen and (max-width: 580px){.nav__wrapper{flex-grow:0}.nav__wrapper--logo{margin-right:auto}.main-heading{font-size:2.75rem}.main-heading__first-line{font-size:.875rem}.page-links{top:calc(100% + 70px);right:32px;transition-delay:100ms}.social-links{position:absolute;top:100%;right:32px;height:auto;padding:20px;background:var(--clr-bg-secondary);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,.1);opacity:0;visibility:hidden;transform:translateY(-10px)}.social-links.menu-button-active{transition-property:opacity,visibility,transform;transition-duration:100ms;transition-timing-function:linear}.social-links--active{opacity:1;visibility:visible;transform:translateY(0)}}@media screen and (max-width: 500px){header,main{padding-inline:35px}}@media screen and (max-width: 340px){.header__button-wrapper{width:220px;height:50px}.header__button{font-size:.875rem}}/*# sourceMappingURL=style.css.map */