:root{--margin: 12px;--header-height: 57.5px;--main-bg-clr: #121212;--primary-text-clr: white;--secondary-text-clr: #808080;--secondary-color-svg: invert(57%) sepia(0%) saturate(193%) hue-rotate(206deg) brightness(88%) contrast(91%);--bar-clr: #232323;--heading: clamp(2rem, 6.5vw + 1rem, 3.75rem);--section-gap: 5rem}:root[data-theme=light]{--main-bg-clr: #f7f7f7;--primary-text-clr: black;--bar-clr: #d9d9d9;--invert: 0}body{background-color:var(--main-bg-clr);font-family:DM Sans,sans-serif;margin:0}a{color:var(--primary-text-clr);text-decoration:none}.section-heading{--mb: .5em;font-size:clamp(2rem,4vw + 1rem,2.75rem);position:relative;line-height:120%;color:var(--primary-text-clr);margin-block:0 var(--mb);box-sizing:border-box}.section-sub-heading{--mb: .5em;font-size:clamp(1.25rem,1.25vw + 1rem,1.625rem);margin-block:0 var(--mb);font-weight:500;box-sizing:border-box}.wrapper{margin-inline:var(--margin);position:relative}.bg-container{position:fixed;inset:0;width:100%;height:100%;z-index:-1}.bg-pattern{width:100%;height:0;padding-inline:var(--margin);display:flex;justify-content:space-between;box-sizing:border-box;animation:show-bars 1s ease forwards}.bg-pattern .bar{border:1px solid var(--bar-clr)}@keyframes show-bars{to{height:100%}}header{display:flex;justify-content:space-between;align-items:center;min-height:var(--header-height);position:relative;box-sizing:border-box}header:after{content:"";position:absolute;height:1px;background-color:var(--bar-clr);inset:auto 0 0;margin:0 auto;width:0%;animation:show-hr-bar 1s ease .1s forwards}header .logo{cursor:pointer;margin-left:2px;font-size:2rem}header .logo,header .toggle-btn{position:relative;opacity:0;top:-1rem;animation:slide-down .9s ease-in-out .2s forwards}@keyframes slide-down{75%{opacity:1}to{top:0;opacity:1}}.hero{min-height:max(calc(100vh - var(--header-height)),500px);display:grid;align-content:center;row-gap:1rem}.hero .heading{display:grid;grid-template-columns:repeat(7,1fr);font-family:firaCode,sans-serif;letter-spacing:2px;margin:0;font-size:var(--heading);line-height:110%;text-wrap:nowrap;color:var(--primary-text-clr)}.hero .heading span{grid-column:span 7}.hero .heading span:first-child{justify-self:start}.hero .heading span:last-child{justify-self:end}.hero .sub-heading{box-sizing:border-box;font-size:1.375rem;line-height:115%;margin-block:.25em;font-weight:300;color:var(--secondary-text-clr)}.hero .sub-heading b{font-weight:600}.selected-projects{margin-top:50px;color:var(--primary-text-clr);display:grid;grid-template-columns:1fr}.projects .project{position:relative;padding-block:16px;padding-inline:2px;gap:16px 8px}.projects .project:after,.projects .project:last-child:before{content:"";width:0%;height:1px;position:absolute;inset:0 0 auto;background-color:var(--bar-clr)}.projects .project.to-reveal.reveal:last-child:before{inset:auto 0 0;animation-delay:calc(var(--delay) + 50ms)}.projects .project .project-title{display:block}.projects .project .project-title .text{width:fit-content}.projects .project .project-title .text:after{content:"";width:1em;height:1em;background-image:url(/arrow-up-right.svg);filter:invert(1);background-size:contain;display:inline-block;vertical-align:middle;margin-left:2px}:root[data-theme=light] .projects .project .project-title .shadow-text.text:after,.projects .project .project-title .shadow-text.text:after{filter:var(--secondary-color-svg)}:root[data-theme=light] .projects .project .project-title .text:after{filter:invert(0)}.projects .project .project-description{color:var(--secondary-text-clr);font-size:1rem;max-width:60ch;margin-block:0}.selected-projects .see-all{border:2px solid var(--primary-text-clr);background-color:var(--main-bg-clr);padding:6px 13px;border-radius:2rem;column-gap:2px;margin-top:20px;font-weight:600;font-size:1.125rem;--arrow-size: 23px;white-space:nowrap}.selected-projects .see-all:hover{background-color:var(--primary-text-clr);color:var(--main-bg-clr)}.all-projects{margin-top:25px}.all-projects .section-heading{margin-top:2em}.all-projects .projects .project img{width:100%;margin-bottom:12px}.about-section{color:var(--primary-text-clr);margin-top:var(--section-gap)}.about-section .about-card{position:relative;padding-block:1rem;padding-inline:.25rem}.about-section .about-card:nth-child(1):before{--delay: 0ms}.about-section .about-card:nth-child(1):after{--delay: 50ms}.about-section .about-card:nth-child(2):after{--delay: .1s}.about-section .about-card:nth-child(3):after{--delay: .15s}.about-section .about-card .card-description{--base-delay: .55s}.about-section .about-card:nth-child(1) .card-description{--delay: calc(var(--base-delay) + 0ms)}.about-section .about-card:nth-child(2) .card-description{--delay: calc(var(--base-delay) + 50ms)}.about-section .about-card:nth-child(3) .card-description{--delay: calc(var(--base-delay) + .1s)}.about-section .about-card :first-child{margin-top:0}.about-section .about-card :last-child{margin-bottom:0}.about-section .about-card:first-child:before,.about-section .about-card:after{--delay: 0ms;position:absolute;content:"";width:0%;inset:auto 0 0;height:1px;background-color:var(--bar-clr)}.about-section .about-card:first-child:before{inset:0 0 auto}.about-section .about-card .card-title:before{content:attr(data-num);color:var(--secondary-text-clr);position:absolute;right:.25rem;font-weight:700;opacity:.5}.about-section .about-card .card-description{color:var(--secondary-text-clr)}.contact{min-height:max(calc(100vh - var(--header-height)),350px);display:grid;align-content:center}.contact .section-heading{font-size:clamp(2.5rem,4vw + 1rem,3rem);--mb: .75em}.contact .chat{color:var(--secondary-text-clr);display:block;font-weight:300}.contact .email{color:var(--primary-text-clr);position:relative;display:flex;align-items:center;width:max-content}.contact .email:before{content:"";margin-right:4px;left:0;width:14px;height:14px;background-image:url(/arrow.svg);filter:invert(46%) sepia(4%) saturate(5%) hue-rotate(314deg) brightness(100%) contrast(86%);background-size:100%}footer{min-height:var(--header-height);display:flex;align-items:center;justify-content:center;text-align:center;font-size:.875rem;color:var(--secondary-text-clr);border-block-start:1px solid var(--bar-clr, #333);box-sizing:border-box}footer .copy{white-space:nowrap;margin-block:0}.not-found{min-height:calc(100vh - 2 * var(--header-height));display:grid;align-content:center;gap:2rem 0;color:var(--primary-text-clr)}.not-found .section-heading{font-size:clamp(1.5rem,2vw + 1rem,2.75rem);margin:0}.not-found a{width:max-content}@media (max-width: 450px){.hero{row-gap:.25rem}.hero .heading{letter-spacing:revert}.hero .heading span:last-child:after{content:"."}.hero .heading span:first-child,.hero .heading span:last-child{grid-column:span 7;justify-self:start}.hero .sub-heading{font-size:clamp(1rem,.9vw + 1rem,1.375rem);padding-right:16px}}@media (min-width: 550px){.all-projects .projects .project{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,auto)}.all-projects .projects .project .project-title{grid-column:span 2;margin-bottom:.25rem;align-self:start}.all-projects .projects .project .project-description{grid-column:span 2;font-size:.875rem}.all-projects .projects .project img{grid-column:1 / 5;grid-row:1 / 2;margin-bottom:0}.not-found{grid-template-columns:repeat(4,1fr)}.not-found>*{grid-column:3 / -1}}@media (min-width: 700px){:root{--margin: 20px;--heading: clamp(3.75rem, 6.25vw + 1rem, 6rem)}.hero .heading span:first-child{grid-column:1 / 5;justify-self:end}.hero .heading span:last-child{grid-column:4 / -1;justify-self:start}.hero .sub-heading{width:80%;margin:auto;text-align:center;padding-right:0}.selected-projects{grid-template-columns:repeat(4,1fr)}.selected-projects>h2,.selected-projects .projects{grid-column:span 4}.projects .project{display:grid;grid-template-columns:repeat(4,1fr);padding-block:20px;column-gap:8px}.projects .project .project-title{grid-column:span 2;margin-block:0;align-self:center}.projects .project .project-description{grid-column:span 2;max-width:55ch}.selected-projects .see-all{grid-column:1 / 3;margin-top:30px;width:fit-content;font-size:1.25rem}.about-section .about-cards .about-card{display:grid;grid-template-columns:1fr 1fr;align-items:center}.about-section .about-cards .about-card>*{margin-block:0}.about-section .about-card .card-title:before{position:relative;margin-right:.5rem;font-size:2.5rem;vertical-align:middle}}@media (min-width: 1075px){:root{--heading: clamp(5rem, 7vw + 1rem, 7rem);--margin: 28px}.hero .sub-heading{width:50%;font-size:1.65rem}.contact{grid-template-columns:1fr 1fr}.contact .email,.contact .section-heading{grid-column:2 / -1}.selected-projects .see-all{grid-column:3 / -1;width:50%;box-sizing:border-box;font-size:1.5rem;--arrow-size: 30px }.bg-container.projects .bg-pattern .bar:nth-child(3){width:20px}.all-projects .projects{display:grid;grid-template-columns:1fr 1fr}.all-projects~.contact,.all-projects .projects{column-gap:20px}.all-projects .projects.expand-first-project .project:first-child{grid-column:span 2;column-gap:20px}.all-projects .projects .project:nth-last-child(2){border-block-end:1px solid var(--bar-clr)}.about-section .about-cards .about-card{grid-template-columns:repeat(4,1fr);grid-auto-rows:110px}.about-section .about-cards .about-card:nth-child(2) :first-child{grid-column-start:2}.about-section .about-cards .about-card:nth-child(3) :first-child{grid-column-start:3}.about-section .about-card .card-title:before{font-size:3.25rem}}@media (min-width: 1440px){.wrapper{max-width:calc(1400px - var(--margin) * 2);margin:0 auto}.bg-pattern{margin:0 auto;max-width:1400px}.hero .sub-heading{font-size:1.9rem}}.hero .heading.to-reveal span,.section-heading.to-reveal,.about-card.to-reveal .card-title,.selected-projects .projects .project.to-reveal .project-title{transform:translateY(100%);clip-path:polygon(0 0,100% 0,100% 0%,0% 0%);filter:blur(3px)}.about-card.to-reveal.reveal:nth-child(2){--delay: 50ms}.about-card.to-reveal.reveal:nth-child(3){--delay: .1s}.hero .heading.to-reveal.reveal span,.section-heading.to-reveal.reveal,.about-card.to-reveal.reveal .card-title,.selected-projects .projects .project.to-reveal.reveal .project-title{animation:show-text .9s ease calc(.25s + var(--delay, 0ms)) forwards}.hero .heading.to-reveal.reveal span:last-child{animation-delay:.3s}.section-heading.to-reveal.reveal{animation-delay:0ms}@keyframes show-text{85%,to{transform:translateY(0);filter:blur(0)}to{transform:translateY(0);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%)}}.hero .sub-heading.to-reveal span{position:relative;top:-1rem;opacity:0}.hero .sub-heading.to-reveal.reveal span{animation:show-sub-heading .5s ease forwards}.hero .sub-heading.to-reveal.reveal span:nth-child(2){animation-delay:50ms}.hero .sub-heading.to-reveal.reveal span:nth-child(3){animation-delay:.1s}.hero .sub-heading.to-reveal.reveal span:nth-child(4){animation-delay:.15s}@keyframes show-sub-heading{to{top:0rem;opacity:1}}.animate-hr-bar.to-reveal.reveal:after,.animate-hr-bar.to-reveal.reveal:before{animation:show-hr-bar 1.2s ease-out var(--delay, .1s) forwards}@keyframes show-hr-bar{to{width:100%}}.project.to-reveal .project-description,.about-card.to-reveal .card-description{opacity:0;transform:translateY(5px)}.project.to-reveal.reveal .project-description,.about-card.to-reveal.reveal .card-description{animation:make-visible .75s ease calc(var(--base-delay, 0ms) + var(--delay)) forwards}.project.to-reveal.reveal .project-description{--base-delay: .6s}@keyframes make-visible{75%{transform:translateY(0)}to{opacity:1;transform:translateY(0)}}.shadow-link .container{--line-height: 1.15em;line-height:var(--line-height);overflow:hidden;position:relative;--gap: 50%}.shadow-link .container>*{transition:all .25s ease}.shadow-link .container .shadow-text{color:var(--secondary-text-clr);position:absolute;width:100%;transform:translateY(var(--gap))}.shadow-link:hover .container .main-text{transform:translateY(calc(-100% - var(--gap)))}.shadow-link:hover .container .shadow-text{transform:translateY(-100%)}.with-arrow{display:inline-flex;align-items:center;justify-content:center;--arrow-size: 20px}.with-arrow:after{filter:invert(1);content:"";width:var(--arrow-size);height:var(--arrow-size);background-image:url(/arrow-up-right.svg);background-repeat:no-repeat;background-position:center 1px;background-size:var(--arrow-size) var(--arrow-size)}.with-arrow.hoverable:hover:after,:root[data-theme=light] .with-arrow:after{filter:invert(0)}:root[data-theme=light] .with-arrow:hover:after{filter:invert(1)}.outline-btn{color:var(--primary-text-clr);border:var(--border-width, 1px) solid currentColor;background-color:var(--main-bg-clr);padding:6px 14px;border-radius:1rem}.outline-btn:hover{color:var(--main-bg-clr);background-color:var(--primary-text-clr)}.toggle-btn{--bg: transparent;--fg: var(--primary-text-clr);--btn-dimensions: 40px;background-color:var(--bg);width:var(--btn-dimensions);height:var(--btn-dimensions);border:none;display:flex;align-items:center;justify-content:center;margin:0;padding:0;cursor:pointer}.toggle-btn .main-circle{--circle-dimensions: 12px;width:var(--circle-dimensions);height:var(--circle-dimensions);background-color:var(--fg);border-radius:50%;position:absolute;transition:transform .4s ease .2s}.toggle-btn .main-circle:after{content:"";background-color:var(--main-bg-clr);border-radius:50%;--dimensions: calc(var(--circle-dimensions) * .75);width:var(--dimensions);height:var(--dimensions);position:absolute;top:.5px;right:-1px;transform-origin:right top;transform:scale(0);transition:transform .4s ease .2s}.toggle-btn .sun-rays{display:grid;place-items:center;transition:transform .4s ease .2s}.toggle-btn .sun-rays,.toggle-btn .sun-rays:after,.toggle-btn .sun-rays:before{--w: 2px;--h: 5px;width:var(--w);height:var(--h);background-color:var(--fg);position:absolute;--dist: 12px;box-shadow:0 var(--dist) 0 var(--fg),0 calc(-1 * var(--dist)) 0 var(--fg)}.toggle-btn .sun-rays:after{content:"";transform:rotate(120deg)}.toggle-btn .sun-rays:before{content:"";transform:rotate(240deg)}:root[data-theme=light] .toggle-btn .sun-rays{transition:transform .4s;transform:scale(0)}:root[data-theme=light] .toggle-btn .main-circle{transform:scale(1.3)}:root[data-theme=light] .toggle-btn .main-circle:after{transform:scale(1)}