@import"https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800&display=swap";.cursor-dot{width:5px;height:5px;background-color:#fff}.cursor-outline{width:30px;height:30px;border:2px solid hsla(0,0%,100%,.5)}.cursor-dot,.cursor-outline{display:none;position:fixed;top:0;left:0;transform:translate(-50%,-50%);border-radius:50%;z-index:1000;pointer-events:none}@media (min-width: 550px){.cursor-dot,.cursor-outline{display:block}}.nav{width:100vw;position:fixed;top:0;left:0;z-index:100;opacity:0}.navbar{display:flex;justify-content:space-between;align-items:center;padding:1rem 1rem .5rem 2rem}.logo{text-decoration:none;color:#fff;text-transform:uppercase}.menu-toggle{display:block;cursor:pointer}.nav-overlay{display:block;background:linear-gradient(180deg,rgba(0,0,0,.9) 30.91%,rgba(0,0,0,.67) 100%);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);position:fixed;top:-100%;left:0;z-index:-2;width:100%;height:100vh;overflow:hidden;padding:4em;transition:all 2s cubic-bezier(.16,1,.3,1)}.hamBox{background-color:#ffffff18;position:relative;padding:1.5em;border-radius:5px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:.5s ease;cursor:pointer}.hamBox:hover{background:#2a2a2f;transform:scale(.89)}.hamBox:hover .lineMiddle{right:-1em}.lineTop,.lineMiddle,.lineBottom{margin:0 auto;position:absolute;display:block;width:24px;height:.125rem;border-radius:10px;background:#fff;left:0;right:0;transform:rotate(0);transition:all .4s}.lineTop{top:1.9em}.lineMiddle{right:1em}.lineBottom{bottom:1.775rem}.lineTop.spin{top:1.45em;transform:rotate(135deg);background:#fff}.lineMiddle.spin{opacity:0;right:0}.lineBottom.spin{bottom:1.45em;transform:rotate(225deg);background:#fff}ul.nav-links{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;display:flex;flex-direction:column;justify-content:conter;text-align:center}ul.nav-links li{list-style:none;position:relative;padding:1em}ul.nav-links li a{text-decoration:none;color:#fff;font-size:1.5rem;position:relative;top:0;transition:all 2s cubic-bezier(.16,1,.3,1)}.nav-item-wrapper:after{content:"";position:absolute;top:100px;left:-10%;width:120%;height:100%;margin:0 auto;opacity:0}.nav-desktop{margin-right:1rem}.nav-desktop__nav-links{display:none;gap:3rem;padding:0;margin:0}.nav-desktop__nav-item{list-style:none;opacity:.35;transition:all .3s ease-in-out}.nav-desktop__nav-item:hover{opacity:.75}.nav-desktop__nav-link{font-size:1.125rem;color:#fff;text-decoration:none}.nav-desktop .active{opacity:1}@media (min-width: 768px){.menu-toggle,.nav-overlay{display:none}.nav-desktop__nav-links{display:flex}}@media (min-width: 900px){ul.nav-links li a{font-size:3rem}}.button{background-color:#0e100f;color:#fffce1;font-size:.875rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:1em 2em;border:1px solid #fffce1;transition:all .3s ease-in-out;display:flex;align-items:center;justify-content:center;text-decoration:none}.button>div{pointer-events:none}.button__icon{color:#fffce1;font-size:1rem;margin-right:.65em}.button:hover{transform:scale(.98)}.container{width:100%;min-width:375px;margin:0 auto}.sections{background-color:#0e100f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sections__grid{width:100%;max-width:1440px;margin:0 auto;display:grid;grid-template-areas:"about" "skills" "tech" "projects" "contact"}.resume{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;margin-inline:auto;margin-top:4rem;padding-block:3rem;border-block:1px solid rgb(124,124,111)}.resume__text{color:#fffce1;margin-bottom:.75em}.section{margin:0 auto;padding-block:4.5rem;padding-inline:2rem}.section.about{grid-area:about}.section.skills{grid-area:skills}.section.tech-stacks{grid-area:tech}.section.projects{grid-area:projects}.section.contact{grid-area:contact}.section__title{color:#fffce1;font-size:1.875rem;font-weight:700;text-align:center}.section__contents{padding-top:2rem}.section .contents--about{width:100%;margin:0 auto}.section .contents--skills{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2rem}.section .contents--tech-stacks{height:100%;display:flex;justify-content:center;align-items:center}.section__description{color:#fffce1;font-size:1rem;font-weight:300;line-height:1.5rem;letter-spacing:.02625rem;text-align:center}.section__description:nth-child(2){padding-block:1.5rem}.section .projects__container{display:flex;flex-direction:column;justify-content:center;gap:1.5rem}.section .projects__project-wrapper{flex-grow:1;flex-basis:clamp(250px,30%,350px);height:clamp(250px,40vw,350px);transition:all .3s ease-in-out}.section .projects__project-wrapper:hover{transform:translateY(-7px)}.section .projects__project{height:100%;background-color:#1e1e1e;text-decoration:none;padding:1.5rem;border-radius:1.25rem;display:flex;place-items:flex-end}.section .projects__text-wrapper{width:100%;padding-top:.75rem;border-top:1px solid #fff;pointer-events:none}.section .projects__project-title{color:#fff;font-size:1.5rem;font-weight:700;text-align:start;pointer-events:none}.section .projects__project-tech-stacks{color:#fff;font-size:1rem;pointer-events:none}.section .projects__more-projects-btn-wrapper{width:fit-content;margin:4rem auto 0}.section .skills__wrapper{width:clamp(150px,15vw,300px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:1.5rem;border:1px solid #bbbaa6}.section .skills__title,.section .skills__year{display:block;color:#fffce1;text-align:center}.section .skills__title{font-size:1.125rem;margin-bottom:.5em}.section .skills__year{font-size:1.25rem;font-weight:700}.section .skills__icon{width:48px;fill:#fffce1;padding-block:1rem}.hero{width:100%;color:#fff;position:relative;display:flex;flex-direction:column;justify-content:end;width:100vw;height:100vh;padding:0 2rem 3.5rem;overflow:hidden}.hero:after{content:"";width:100%;height:100%;z-index:-1;background:linear-gradient(135deg,#c3a3f1,#006bc8);position:absolute;top:0;left:0;z-index:-2}.hero__codes{z-index:1}.hero__title{font-size:1.625rem;font-weight:400;line-height:2.8125rem}.hero__title .title-indent{margin-left:1em}.hero__title .title-indent--name{background:#000;width:fit-content}.hero__title .title-indent--name:hover{background:#FCD18B;color:#000}.hero .socials{width:fit-content;background-color:#ffffff18;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:1rem;border-radius:5px;transition:.8s cubic-bezier(.16,1,.3,1);display:flex;flex-direction:column;gap:1rem;position:fixed;top:50%;right:0;transform:translate(-1rem,-50%);z-index:1}.hero .socials.start-position{transform:translate(100%,-50%)}.hero .socials__social-link{color:#fff;font-size:1.5rem}.hero__profile-pic-wrapper{width:100%;max-width:565px;height:100%;max-height:1000px;overflow:hidden;mix-blend-mode:luminosity;position:absolute;top:10%;right:0;z-index:-1}.hero__profile-pic{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;mix-blend-mode:hard-light;animation:reverse-animate-2 linear 1s 1}.hero .profile-pic-filter{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;opacity:.5;mix-blend-mode:hard-light;filter:blur(1px)}.hero__profile-pic:hover{animation:animate-2 1s linear .5s 1}.hero__profile-pic-wrapper:hover{animation:animate .2s linear .5s 3}.hero__profile-pic-wrapper{animation:reverse-animate .2s linear .5s 2}@keyframes animate-2{0%{left:5px}25%{left:10px}50%{left:-5px;top:-5px}75%{left:0}to{left:5px}}@keyframes reverse-animate-2{0%{left:5px}25%{left:0}50%{left:-5px;top:-5px}75%{left:10px}to{left:5px}}@keyframes animate{0%{position:0 0;filter:hue-rotate(0deg)}10%{position:5px 0}20%{position:-5px 0}30%{position:15px 0}40%{position:5px 0}50%{position:-25px 0;filter:hue-rotate(-180deg)}60%{position:-50px 0}70%{position:0 -20px}80%{position:-60px -20px}81%{position:0 0}to{position:0 0;filter:hue-rotate(360deg)}}@keyframes reverse-animate{0%{position:0 0;filter:hue-rotate(360deg)}10%{position:-5px 0}20%{position:5px 0}30%{position:-15px 0}40%{position:-5px 0}50%{position:25px 0;filter:hue-rotate(180deg)}60%{position:50px 0}70%{position:0 20px}80%{position:60px 20px}81%{position:0 0}to{position:0 0;filter:hue-rotate(0deg)}}.mouse{width:25px;height:40px;position:relative;margin:1.125rem auto;border:2px solid #eee;border-radius:60px;overflow:hidden;z-index:1}.mouse:before{content:"";width:5px;height:5px;position:absolute;top:7px;left:50%;transform:translate(-50%);background-color:#eee;border-radius:50%;opacity:1;animation:wheel 1.3s infinite;-webkit-animation:wheel 1.3s infinite}@keyframes wheel{to{opacity:0;top:27px}}@-webkit-keyframes wheel{to{opacity:0;top:27px}}@media (min-width: 550px){.hero{height:100vh}}.footer{background-color:#000;color:#fff;font-size:.75rem;text-align:center;display:flex;justify-content:center;align-items:flex-end}.footer__top-contents{display:flex;flex-direction:column;gap:3.5rem;padding:3.5rem 2rem}.footer .content__heading{font-size:1.1875rem;text-align:left}.footer .content__socials-wrapper{display:flex;gap:1rem;margin-top:1.125rem}.footer .content__social-link:not(:last-child){padding-right:1rem;border-right:1px solid rgba(255,255,255,.35)}.footer .content__social-icon{font-size:1.5rem;color:#fff}.footer .content__texts-wrapper{margin-top:1.125rem}.footer .content__text-body{font-size:1rem;line-height:1.8rem;text-align:start}.footer__bottom-contents{width:90%;margin:0 auto;padding:2rem;border-top:1px solid rgba(255,255,255,.3)}.footer__website-link{display:inline-block;color:#fff;margin-left:.25em}@media screen and (min-width: 768px){.footer__top-contents{width:50%;flex-direction:row;justify-content:space-between;margin:0 auto}.footer__bottom-contents{width:100%}}.contact-form{width:100%;min-width:326px;max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1.68rem;border-radius:.3125rem}.contact-form__input-wrapper{display:flex;flex-direction:column}.contact-form__label{color:#fffce1;font-size:.75rem;font-weight:500;text-transform:capitalize;margin-bottom:.75em}.contact-form__input,.contact-form__textarea{background-color:#1e1e1e;color:#fffce1;font-size:.875rem;padding:1.5em 1.25em}.contact-form ::placeholder{color:#989898}.contact-form__textarea{resize:none}.contact-form__submit-btn{background-color:#0e100f;color:#fffce1;font-size:.875rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:1em 2em;border:1px solid #fffce1;transition:all .3s ease-in-out;width:fit-content;cursor:pointer}.contact-form__submit-btn:hover{opacity:.85;transform:scale(.98)}.progress{color:#fff;width:50px;height:50px;position:fixed;bottom:60px;right:1rem;z-index:50;display:grid;place-items:center;border-radius:50%;cursor:pointer;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .3s ease-in-out}.progress:hover{opacity:.75;transform:scale(.98)}.progress-value{background:#000;height:calc(100% - 5px);width:calc(100% - 5px);display:grid;place-items:center;border-radius:50%;pointer-events:none}.chevron-icon{font-size:1.5rem}@media screen and (min-width: 550px){.section .projects__container{flex-direction:row;flex-wrap:wrap}}@media screen and (min-width: 768px){.button{font-size:.9375rem}.button__icon{font-size:1.0625em}.sections__grid{grid-template-columns:repeat(2,1fr);grid-template-areas:"about about" "skills tech" "projects projects" "contact contact"}.section,.section.contact{padding-block:7.5rem}.section__contents{margin-top:2.25rem}.section .contents--about{width:60%}.section .contents--skills{flex-direction:row;padding:0}.section .contents--tech-stacks{padding:0}.section__title{font-size:2.125rem}.section__description{font-size:1.125rem;line-height:1.75rem}.section__description:nth-child(2){padding-block:1.75rem}.resume{width:70%}.contact-form{gap:2.25rem;padding:2.25rem}.contact-form__label{font-size:.8125rem}.contact-form__input,.contact-form__textarea,.contact-form__submit-btn{font-size:.9375rem}}@media screen and (min-width: 1200px){.button{font-size:1rem}.button__icon{font-size:1.125rem}.contact-form{gap:2.375rem;padding:2.375rem}.contact-form__label{font-size:.875rem}.contact-form__input,.contact-form__textarea,.contact-form__submit-btn{font-size:1rem}}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;padding:0;font-family:Jost,sans-serif;display:grid;place-items:center}h1,h2,h3,h4,p{margin:0}img{max-width:100%}label{font-family:inherit}input,textarea,button{font-family:inherit;border:none;background:none}input:focus,textarea:focus{outline:none}button{cursor:pointer}.indent{margin-left:1rem}.indent--two-tabs{margin-left:2rem}.square-brackets{color:#cc76d1}.property{color:#aadafa}.value{color:#c5947c}.colon,.comma{color:#d4d4d4}.code-bg{background-color:#1e1e1e;border-radius:1.25rem;padding:1.5rem}.curly-brackets{color:#f9d849}.colon-comma{color:#d4d4d4}@media (min-width: 550px){body{cursor:none}}