@import url(https://fonts.googleapis.com/css2?family=STIX+Two+Text:wght@400;500;600;700&display=swap);body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}*{margin:0;padding:0;box-sizing:border-box}h1,h3,p{font-family:"STIX Two Text",serif}:root{--light:#fff;--dark:#0c0c0e;--light-grey:#f5f5f5;--grey:#9299ab;--dark-grey:#474a57;--accent:#d3d5fd}html{scroll-behavior:smooth}body{background-color:#0c0c0e;background-color:var(--dark)}.App{overflow-x:hidden}a{text-decoration:none}ul{list-style:none}.section-title{font-size:clamp(3rem,6vw,5rem)}.home{background-color:var(--dark);display:flex;justify-content:center;align-items:center;min-height:100vh;overflow-x:hidden}.home,.home-text{position:relative}.home-text{font-size:2vw;height:100%;padding-left:4em;padding-right:1em;z-index:2}.title{position:relative;color:var(--light);font-size:clamp(3.5rem,8vw,7rem);font-weight:500;margin-bottom:.6em;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;overflow:hidden}.title:before{content:"";position:absolute;top:0;bottom:0;background-color:var(--dark);right:0;left:100%;-webkit-animation:hometext-animation .4s ease-in-out;animation:hometext-animation .4s ease-in-out;-webkit-animation-delay:.35s;animation-delay:.35s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.role{font-size:clamp(1.4rem,3vw,2rem);color:var(--grey);margin-bottom:2.5em;-webkit-animation:role-animation .35s;animation:role-animation .35s;-webkit-animation-delay:.65s;animation-delay:.65s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.resume{display:inline-block;font-size:clamp(1.1rem,2vw,1.5rem);font-weight:600;color:var(--light-grey);text-decoration:none;padding:.6em 1.4em;border:2px solid var(--light-grey);border-radius:6px;transition:all .25s ease-in-out;background-color:transparent;-webkit-animation:button-animation .35s;animation:button-animation .35s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.resume:hover{color:var(--dark);background-color:var(--light-grey)}.sidebar{width:.6em;top:0;left:0;background-color:var(--light);-webkit-animation:sidebar-animation .35s ease;animation:sidebar-animation .35s ease;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.sidebar,.watermark{position:absolute;bottom:0}.watermark{font-size:20rem;color:hsla(0,0%,100%,.008);pointer-events:none;-webkit-animation:appearing-animation .3s;animation:appearing-animation .3s;-webkit-animation-delay:1.5s;animation-delay:1.5s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards;-webkit-user-select:none;-ms-user-select:none;user-select:none}.additional-scroll{position:absolute;top:85%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.additional-scroll span{display:block;padding:1em;text-align:right;color:var(--grey);text-transform:uppercase;letter-spacing:.5rem;margin-right:-.5rem;-webkit-animation:appearing-animation .3s ease 1.3s 1 normal backwards;animation:appearing-animation .3s ease 1.3s 1 normal backwards}.scroll{display:flex;width:1.5rem;height:3rem;margin:0 auto;border-radius:1.5rem;border:2px solid var(--light-grey);-webkit-animation:scroll-btn-animation .3s ease 1.4s;animation:scroll-btn-animation .3s ease 1.4s;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.ball{width:100%;height:auto;aspect-ratio:1/1;border-radius:50%;background-color:var(--light-grey);margin:2px;align-self:flex-start;opacity:0;-webkit-animation:ball-animation 1.4s ease infinite;animation:ball-animation 1.4s ease infinite;-webkit-animation-delay:1.4s;animation-delay:1.4s;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}@-webkit-keyframes scroll-btn-animation{0%{opacity:0;height:0}to{opacity:1;height:3rem}}@keyframes scroll-btn-animation{0%{opacity:0;height:0}to{opacity:1;height:3rem}}@-webkit-keyframes ball-animation{0%{margin-top:2px;opacity:1}75%{margin-top:140%}to{margin-top:2px;opacity:1}}@keyframes ball-animation{0%{margin-top:2px;opacity:1}75%{margin-top:140%}to{margin-top:2px;opacity:1}}@-webkit-keyframes sidebar-animation{0%{height:0}to{height:100%}}@keyframes sidebar-animation{0%{height:0}to{height:100%}}@-webkit-keyframes hometext-animation{0%{left:0}to{left:100%}}@keyframes hometext-animation{0%{left:0}to{left:100%}}@-webkit-keyframes role-animation{0%{opacity:0;margin-top:-4rem}to{opacity:1;margin-top:0}}@keyframes role-animation{0%{opacity:0;margin-top:-4rem}to{opacity:1;margin-top:0}}@-webkit-keyframes button-animation{0%{-webkit-transform:translateX(80%);transform:translateX(80%);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@keyframes button-animation{0%{-webkit-transform:translateX(80%);transform:translateX(80%);opacity:0}to{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}}@-webkit-keyframes appearing-animation{0%{opacity:0}to{opacity:1}}@keyframes appearing-animation{0%{opacity:0}to{opacity:1}}.navbar{position:fixed;display:flex;align-items:center;justify-content:space-between;top:0;right:0;left:0;padding:2.35em clamp(3.5rem,8vw,7rem);background-color:var(--dark);z-index:3}.nav-logo{color:var(--light);font-weight:600;font-size:1.2rem;-webkit-animation:navbar-animation .6s;animation:navbar-animation .6s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.links{display:flex;justify-content:center;grid-gap:5em;gap:5em;list-style:none}.link{position:relative;text-decoration:none;color:var(--grey);font-weight:700;-webkit-animation:navbar-animation .3s;animation:navbar-animation .3s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.link:after{content:"";position:absolute;bottom:-1em;left:50%;width:0;height:3px;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:var(--light);transition:width .3s ease}.link:hover:after{width:100%}@-webkit-keyframes navbar-animation{0%{opacity:0}to{opacity:1}}@keyframes navbar-animation{0%{opacity:0}to{opacity:1}}@media screen and (max-width:850px){.links{grid-gap:3em;gap:3em}}@media screen and (max-width:720px){.links{grid-gap:2em;gap:2em}}@media screen and (max-width:700px){.links{grid-gap:1em;gap:1em}.navbar{padding:3em 10%}}@media screen and (max-width:600px){.links{display:none}}.hamburger-menu{display:none;-webkit-animation:navbar-animation .6s;animation:navbar-animation .6s;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:backwards;animation-fill-mode:backwards}.hamburger{display:none;padding-block:1rem;z-index:1;cursor:pointer;overflow:hidden}.bar,.hamburger{position:relative}.bar{width:1.5rem;height:2px;background-color:var(--light);transition:background-color .3s ease}.open .bar{background-color:var(--dark)}.bar:before{width:100%;margin-top:.5rem}.bar:after,.bar:before{content:"";position:absolute;top:0;right:0;height:2px;background-color:inherit}.bar:after{width:50%;margin-top:-.5rem}.menu{position:fixed;display:flex;top:0;right:0;bottom:0;left:0;margin-left:100%;background-color:var(--light);transition:margin-left .4s ease}.open .menu{margin-left:30%;box-shadow:0 0 3px 4px rgba(66,66,66,.376);touch-action:none}.hamburger-links{display:flex;flex-direction:column;width:100%;padding:8rem 0}.hamburger-link{display:block;color:var(--dark);font-size:1.1rem;letter-spacing:.4em;padding:1em 2em;transition:all .3s ease}.hamburger-link:active,.hamburger-link:hover{background-color:var(--light-grey)}.mask{position:fixed;inset:0;background-color:#000;z-index:0;opacity:0;transition:all .3s ease;pointer-events:none}.open .mask{opacity:.6;pointer-events:all;touch-action:none}@media screen and (max-width:600px){.hamburger,.hamburger-menu{display:block}}.portfolio-item{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:3em;gap:3em}.container{display:flex;flex-direction:column;justify-content:center;align-self:center;max-width:28rem;grid-gap:1rem;gap:1rem;margin:1em}.img-container{box-shadow:0 0 3px 4px rgba(0,0,0,.157);opacity:0;-webkit-transform:translateX(-50%);transform:translateX(-50%);transition:all .4s ease;padding:.5em;margin:1em}.project-img{width:100%;aspect-ratio:16/9;object-fit:cover}.text-container{opacity:0;-webkit-transform:translateX(50%);transform:translateX(50%);transition:all .4s ease}.container-animation{-webkit-transform:translateX(0);transform:translateX(0);opacity:1}.project-title{font-size:1.8rem;color:var(--light)}.project-description{color:var(--grey);font-weight:500}.site-links{display:flex;grid-gap:1rem;gap:1rem;margin-top:1.4em}.site-links a{display:block;font-size:1.2rem;font-weight:600;text-decoration:none;padding:.4em 1.4em;border:2px solid var(--light-grey);border-radius:5px;transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease,-webkit-transform .2s ease}.site-links a:hover{-webkit-transform:scale(.95);transform:scale(.95)}.view-site{color:var(--dark);background-color:var(--light-grey)}.view-code{color:var(--light-grey)}@media screen and (max-width:782px){.portfolio-item,.site-links{grid-template-columns:1fr;text-align:center;justify-content:center}.img-container,.text-container{-webkit-transform:translateX(0);transform:translateX(0)}}@media screen and (max-width:354px){.site-links{display:block}.site-links a{margin-bottom:.5rem}}.portfolio{scroll-margin-top:3rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--dark);padding-block:5rem}.portfolio-title{color:var(--light);text-align:center;opacity:0;margin-bottom:1em;transition:all .3s ease}.portfolio-title-animation{opacity:1}.portfolio-items{grid-gap:3rem;gap:3rem}.about,.portfolio-items{display:flex;flex-direction:column}.about{scroll-margin-top:3rem;background-color:var(--dark)}.about-text{color:var(--light);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:5em 1em}.about-title{margin-bottom:.5em;opacity:0;transition:all .6s ease}.title-animation{opacity:1}.about-para{font-size:1.1rem;color:var(--grey);max-width:65ch;line-height:1.8em;opacity:0;transition:all .6s ease}.para-animation{opacity:1}.contact{scroll-margin-top:4rem;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--dark);padding-block:7rem}.contact-title{text-align:center;color:var(--light-grey);margin-bottom:.5em;opacity:0;transition:all .3s ease}.contact-title-animation{opacity:1}form{width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1em}form>*{width:min(100%,40rem)}.input-field{display:flex;flex-direction:column;margin-right:6rem;opacity:0;transition:all .6s ease}.input-field-animation{margin-right:0;opacity:1}label{margin-bottom:.3rem;margin-left:.5rem;font-size:1.2rem;font-weight:500;color:var(--dark-grey)}input,textarea{font-size:1.1rem;margin-bottom:1.3rem;padding:.6rem;outline:none;color:var(--grey);background-color:#1c1f1f;box-shadow:0 0 3px 4px rgba(0,0,0,.025);border:none;border-bottom:3px solid #1c1f1f;border-radius:5px;resize:none;transition:.3s ease}input:hover,textarea:hover{border-bottom:3px solid var(--dark-grey)}input:focus,textarea:focus{border-bottom:3px solid var(--grey)}.btn-submit{display:block;font-size:1.3rem;font-weight:600;padding:.5em 1.7em;margin-top:1em;color:var(--dark);background-color:var(--light-grey);border:none;border-radius:5px;outline:none;cursor:pointer;opacity:0;transition:background-color .2s ease,opacity .6s ease}.btn-submit-animation{opacity:1}.btn-submit:hover{background-color:var(--dark-grey)}.footer,.footer ul{display:flex}.footer{background-color:var(--dark);justify-content:space-between;align-items:center;padding:5em}.nav-links{grid-gap:3rem;gap:3rem;text-align:center}.nav-links,.social-links{opacity:0;transition:opacity .6s ease}.social-links{grid-gap:2rem;gap:2rem}.nav-links a,i{color:var(--light);font-weight:500}.copyright{color:var(--light);font-size:1.2rem;text-align:center;opacity:0;transition:opacity .6s ease}.footer-animation{opacity:1}@media screen and (max-width:1076px){.footer{padding:5em 2em}}@media screen and (max-width:982px){.footer{flex-direction:column;grid-gap:3rem;gap:3rem}}@media screen and (max-width:450px){.nav-links{flex-direction:column}}.skill-logo{max-height:100%;width:100%}.skills{display:flex;flex-direction:column;justify-content:center;align-items:center;background:var(--dark);padding:4em 0 5em}.skills-title{margin-bottom:.8em;color:var(--light);opacity:0;transition:all .6s ease}.skills-title-animation{opacity:1}.logo-container{text-align:center;height:8rem;width:8rem;opacity:0;transition:all .6s linear;padding:.3rem}.logo-container span{display:block;color:var(--light);font-size:1.2rem;margin-top:1em}.logos{display:grid;place-items:center;grid-template-columns:repeat(4,1fr);grid-gap:5rem;gap:5rem}.logo-animation{opacity:1}@media screen and (max-width:750px){.logos{grid-template-columns:repeat(2,1fr)}}@media screen and (max-width:340px){.logos{grid-template-columns:1fr}}
/*# sourceMappingURL=main.816f4a4b.chunk.css.map */