@import"https://fonts.googleapis.com/css2?family=Questrial&display=swap";@import"https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap";@import"https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap";.nav-bar{justify-self:end}.nav-link{padding:0 var(--spacing-3x);color:var(--font-dark-colour);text-decoration:none;font-family:var(--font-family-questrial);font-weight:400;font-size:18px}.nav-link:not(:last-child){border-right:var(--border)}.nav-link.active{color:var(--white)}.nav-link:hover:not(.active){color:#000}#root{height:100vh;width:100%;margin:0 auto;display:grid;grid-template-rows:auto 1fr}.page__header{padding:var(--spacing-3x);background-color:var(--purple)}.page__main{padding:var(--spacing-6x)}.page__main:has(>.page__title) .page__content{height:calc(100% - 66px)}.page__content{margin:0 auto;max-width:1440px;height:100%;display:grid;grid-template-columns:55% 1fr;gap:var(--spacing-6x)}.page__content:has(>:only-child){grid-template-columns:1fr}.page__content:has(>:nth-child(3)){grid-template-rows:1fr max-content;grid-template-columns:1fr 1fr}.page__content:has(>:nth-child(3))>:nth-child(3){grid-column:1/span 2;grid-row:2}.page__title{max-width:1440px;margin:0 auto var(--spacing-6x)}@media (max-width: 900px){.page__content{grid-template-columns:45% 1fr}}@media (max-width: 750px){.page__content{grid-template-columns:initial;row-gap:var(--spacing-4x)}}.home{align-items:center;max-width:1000px}.home__image{position:relative;width:100%;height:230px;overflow:hidden}.home__image--laptop{position:absolute;left:0;top:0;height:100%}.home__image--code{position:absolute;left:150px;width:145px;overflow:hidden;animation:screenRoll 15s steps(22,end) infinite}.home__image--terminal{position:absolute;top:110px;left:200px;width:80px;opacity:0;animation:terminalOpacity .2s forwards 2s}@keyframes screenRoll{0%{top:0}to{top:-210px}}@keyframes terminalOpacity{0%{width:0px;top:140px}to{opacity:1;width:80px;top:110px}}@media (max-width: 750px){.home{align-content:center}.home__image--laptop,.home__image--code,.home__image--terminal{left:50%;transform:translate(-50%)}.home__image--code{left:calc(50% + 50px)}.home__image--terminal{left:calc(50% + 70px)}}.button{box-sizing:border-box;padding:var(--spacing-2x) var(--spacing-3x);font-size:16px;background-color:var(--background-colour);color:var(--font-dark-colour);border:none}.button--icon{width:fit-content;height:fit-content;padding:var(--spacing-2x);border:none;color:var(--font-dark-colour)}.button:hover{background-color:var(--background-colour-hover)}.button:focus{outline:2px solid black;outline-offset:calc(0px - var(--spacing-base))}.button:active{outline:none;background-color:var(--background-colour-active)}button.button{border-radius:4px}.project{display:flex;position:relative;border:2px solid var(--element-border-dark);background-color:#fff;border-radius:var(--border-radius);box-shadow:3px 3px 5px var(--background-colour-active)}.project.narrow{width:40%}.project.wide{width:50%}.project__image{margin:0 auto;object-fit:contain;max-width:70%}.project__image.wide{max-width:85%}.project__title{text-align:center}.overlay{box-sizing:border-box;position:absolute;display:flex;align-content:end;justify-content:center;padding:var(--spacing-8x);height:100%;width:100%;gap:var(--spacing-3x);border-radius:var(--border-radius);flex-wrap:wrap}.overlay .project__title,.overlay .project__button{opacity:0;pointer-events:none}.overlay:hover,.overlay:focus-within{outline:none;background:linear-gradient(#4e4e4e33,#343434e6)}.overlay:hover .project__title,.overlay:hover .project__button,.overlay:focus-within .project__title,.overlay:focus-within .project__button{opacity:1;pointer-events:auto}.overlay:focus{border:1px solid var(--white)}.divider--vertical{padding:0 var(--spacing-2x)}@media (max-width: 750px){.project.narrow,.project.wide{width:100%;height:350px}}@media (max-width: 400px){.project.narrow,.project.wide{height:300px}.project__image.wide{max-width:90%}}.link{display:inline-block}.link--as-button{font-family:var(--font-family-sans-serif);padding:var(--spacing-2x) var(--spacing-6x);text-decoration:none;border-radius:4px}.drawer{border:initial;height:initial;left:initial;margin:initial;padding:0;box-sizing:border-box;width:500px;max-height:100%;position:fixed;display:grid;grid-template-rows:max-content 1fr;background-color:#8658a7;box-shadow:-8px 0 12px #0006}.drawer__header{display:grid;grid-template:"title close-button" "subtitle subtitle";grid-template-columns:1fr 40px;padding:var(--spacing-6x)}.drawer__content{padding:0 var(--spacing-6x) var(--spacing-6x)}.drawer__title{grid-area:title}.drawer__title--h3{margin:var(--spacing-4x) 0}.drawer__subtitle{grid-area:subtitle;opacity:.6}.drawer__note{margin-top:var(--spacing-4x);font-style:italic}.drawer__button{grid-area:close-button}.drawer__image{object-fit:contain;width:100%;border:4px solid var(--border-colour)}.drawer__language-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacing-2x)}.drawer__language{padding:var(--spacing-base) var(--spacing-3x);border-radius:var(--border-radius);background-color:var(--background-colour-hover)}.drawer__footer{border-top:var(--border);padding:var(--spacing-4x) 0;display:flex;justify-content:flex-start;gap:var(--spacing-4x)}.drawer--closed{display:none}.drawer--closing{animation:close-animation .2s forwards}.drawer--opening{animation:open-animation .4s forwards}@keyframes open-animation{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes close-animation{0%{transform:translate(0);opacity:1}to{transform:translate(100%);opacity:0}}.project-page__list{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--spacing-6x);margin:0 auto}.technology{border:2px solid var(--element-border-dark);background-color:var(--white);width:350px;padding:var(--spacing-3x);margin:var(--spacing-6x);box-shadow:3px 3px 5px var(--background-colour-active)}.technology__header{display:flex;align-items:center;gap:var(--spacing-4x);margin-bottom:var(--spacing-2x)}.technology__header .text{letter-spacing:1px}.technology__header .text:after{content:"";display:block;width:150px;height:var(--spacing-2x);background:#e69bff;margin:-10px 0 0 var(--spacing-base)}.technology__icon{font-size:36px}.technology__content{margin-left:var(--spacing-2x)}.technology__description{padding:var(--spacing-base) 0 var(--spacing-base) var(--spacing-3x);margin:var(--spacing-2x) var(--spacing-4x);border-left:1px solid rgb(119,119,119)}.about{display:flex;flex-wrap:wrap;justify-content:center;align-self:start}.about__call-to-action{text-align:center}.about__download{background-color:var(--white);border:2px solid var(--element-border-dark);margin-top:var(--spacing-4x)}.about__download:focus{outline-offset:calc(0px - var(--spacing-base) - 2px)}.about__download .text{margin-right:var(--spacing-2x)}.contact{align-items:center}.contact__text{margin:0 auto}.contact__text>*{margin-bottom:var(--spacing-4x)}.contact__icons{text-align:center}.contact__icon{color:var(--purple);font-size:48px}.contact__icon:hover{color:var(--purple-dark);animation:hover-animation .3s}.contact__icon:focus,.contact__icon:focus-visible{outline:2px solid var(--purple-dark)}@media (max-width: 750px){.contact{text-align:center}}@keyframes hover-animation{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}:root{--spacing-base: 4px;--spacing-2x: 8px;--spacing-3x: 12px;--spacing-4x: 16px;--spacing-6x: 24px;--spacing-8x: 32px;--spacing-10x: 40px;--border: 1px solid var(--border-colour);--border-radius: 8px;--border-colour: rgb(242, 242, 242);--element-border-dark: rgb(90,90,90);--background-colour: rgb(242, 242, 242);--background-colour-hover: rgb(249, 227, 115);--background-colour-active: rgb(200, 200, 200);--page-header-colour: rgb(80, 80, 80);--font-colour: rgb(90, 90, 90);--font-dark-colour: rgb(40, 40, 40);--font-light-colour: rgb(240, 240, 240);--font-disabled-colour: rgb(210, 210, 210);--white: rgb(250, 250, 250);--purple: rgb(171, 114, 212);--purple-dark: rgb(144, 93, 180);--font-family-questrial: "Questrial", sans-serif;--font-family-sans-serif: "Lexend", sans-serif;--font-family-serif: "Times New Roman", serif}body{margin:0;min-width:320px;background-color:var(--background-colour)}h1,h2,h3,h4,p{margin:0}