*,*:before,*:after{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}body{line-height:1.5;-webkit-font-smoothing:antialiased}img,picture,video,canvas,svg{display:block;max-width:100%;height:auto}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate}ul,ol{list-style:none}a{color:inherit;text-decoration:none}abbr{text-decoration:underline dotted;cursor:help}@font-face{font-family:FigTree;src:url(/fonts/figtree/variable/Figtree%5Bwght%5D.woff2) format("woff2"),url(/fonts/figtree/variable/Figtree-Italic%5Bwght%5D.woff2) format("woff2"),url(/fonts/figtree/variable/Figtree%5Bwght%5D.ttf) format("truetype"),url(/fonts/figtree/variable/Figtree-Italic%5Bwght%5D.ttf) format("truetype")}:root{--primary-hue: 200;--primary-saturation: 75%;--primary-lightness: 45%;--accent-hue: 40;--accent-saturation: 100%;--accent-lightness: 50%}html{font-family:Figtree}.nav-placeholder{position:sticky;top:0;z-index:8;height:5rem;background-color:#fff}@media only screen and (min-width: 1024px){.nav-placeholder{height:7rem}}.wrapper{max-width:1280px;margin-inline:auto;padding-inline:1rem}.relative{position:relative}.markdown-content ul,.markdown-content ol{list-style:initial;margin-left:2em;padding-left:1em}.markdown-content h1,.markdown-content h2,.markdown-content h3,.markdown-content h4,.markdown-content h5,.markdown-content h6,.markdown-content p{margin-bottom:1rem}.nav{width:100%;padding-block:1rem;position:fixed;left:50%;z-index:10;display:flex;gap:1rem;justify-content:space-between;align-items:center;transform:translate(-50%);transition:all .5s ease}.nav--1{color:hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness))}.nav--2{color:#fff}.nav__menu-toggle-btn{width:2.5rem;height:2.5rem;margin-inline-start:auto}.nav__menu-toggle{display:none}.nav__menu-toggle:checked+.nav__list{transform:translate(0)}.nav__menu-toggle:checked~.nav__backdrop{display:initial}.nav__list{height:100svh;width:18rem;font-size:1rem;padding:1rem;position:fixed;inset:0 0 0 auto;z-index:11;background-color:hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));transform:translate(100%);transition:transform .3s ease}.nav__item{color:#fff;text-transform:uppercase;border-block-end:1px solid transparent}.nav__item:not(:first-child):hover{color:hsl(var(--accent-hue) var(--accent-saturation) var(--accent-lightness))}.nav__link{display:block;padding-inline:1rem;padding-block:.5rem}.nav__backdrop{height:100svh;display:none;position:fixed;z-index:9;top:0;right:0;bottom:0;left:0;background-color:#00000080}@media only screen and (min-width: 1024px){.nav__menu-toggle-btn{display:none}.nav__list{height:auto;width:initial;padding:initial;background:initial;position:static;z-index:0;display:flex;gap:.5rem;align-items:center;transform:translate(0)}.nav__item{color:inherit;transition:border-block-end-color .375s ease}.nav__item:not(:first-child):hover{color:inherit;border-block-end-color:hsl(var(--accent-hue) var(--accent-saturation) var(--accent-lightness))}.nav__menu-toggle:checked+.nav__list{display:flex}}.brand{width:15rem;background-color:#0000;transition:all .5s ease}.brand--primary{color:hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness))}.brand--white{color:#fff}@media only screen and (min-width: 1024px){.brand{width:20rem}}.hero{color:#fff;background-image:url(/images/unsplashFreeProgrammingDeskSetup.webp);background-position:center;background-repeat:no-repeat;background-size:cover;height:100svh}.hero__overlay{height:100%;background-color:hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness) / .9)}.hero__wrapper{height:100%;display:flex;align-items:center;justify-content:center}.hero__img-frame{width:13rem;height:13rem;margin-inline:auto;margin-block-end:1rem;display:flex;justify-content:center;align-items:center;background-color:hsl(var(--primary-hue) var(--primary-saturation) var(--primary-lightness));border-radius:100%;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.hero__img{width:90%;height:90%;border-radius:100%}.greeting{font-weight:800;margin-block-end:1rem}.greeting>span{font-weight:400}.connect{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}.connect__label{font-weight:100;text-transform:uppercase}.connect__arrow{flex-shrink:0;width:3rem}.connect__list{display:flex;align-items:center;gap:1rem}.connect__icon{min-width:1.5rem;min-height:1.5rem}.connect__icon:hover{color:hsl(var(--accent-hue) var(--accent-saturation) var(--accent-lightness))}.about{display:grid;grid-template-columns:1fr;place-items:center;margin-block-end:8rem;text-align:center}.hello-gif{width:20rem;height:12.5rem}.about__info h1{font-size:3rem;font-weight:500;text-transform:uppercase;color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness))}.about__info h2{font-weight:600;margin-block-end:1rem}.to-connect{color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness))}.tech-list,.work-list{display:flex;justify-content:center;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-block-end:8rem}.tech-list li{max-width:10rem}.work-list{display:grid;grid-template-columns:1fr;gap:1rem}.work-list li{padding:2rem;border:1px dashed gray}.work-list li video{width:100%}.work-list__proj-label{font-weight:600}.work-list a{color:#00f}.work-list a:hover{text-decoration:underline}.experience-list{display:flex;justify-content:center;gap:1.5rem;flex-wrap:wrap;margin-block-end:8rem}.experience-list__company{display:flex;align-items:center;gap:.5rem}.experience-list__company h2{color:gray}.experience-list__title{text-transform:uppercase;color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness))}.experience-list__company img{max-width:4rem}.experience-list li{padding:2rem;max-width:45ch;border:1px solid gray}@media only screen and (min-width: 640px){.work-list{grid-template-columns:repeat(2,1fr)}}@media only screen and (min-width: 1024px){.nav-placeholder{height:7rem}.about{text-align:start;grid-template-columns:480px 1fr}.about__info h1{font-size:4rem}.hello-gif{width:auto;height:auto}}.title,.sub-title{text-align:center}.title{color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));font-size:3rem;text-transform:uppercase}.sub-title{font-weight:500;margin-block-end:2rem}@media only screen and (min-width: 1024px){.title{font-size:4rem}}.contact{margin-block-end:8rem}.contact h3{color:gray;font-weight:400;text-align:center;margin-block-end:4rem}.contact form{max-width:720px;margin-inline:auto;display:flex;flex-direction:column;gap:1rem}.contact form>div{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}.contact form>div>*{flex-grow:1}.contact form input,.contact form textarea{padding:1rem}.contact form textarea{resize:vertical}.contact form button{width:max-content;padding:.5rem 2rem;border:none;background-color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness));color:#fff;border-radius:.3rem;cursor:pointer}.contact form button:hover{--primary-lightness: 43%;background-color:hsl(var(--primary-hue),var(--primary-saturation),var(--primary-lightness))}.blog{margin-block:2rem;display:grid;grid-template-columns:1fr;gap:1rem}.blog__card{border-radius:1rem;border:1px solid rgb(128,128,128,.4);padding:1rem;transition:transform .3s ease;cursor:pointer}.blog__card:hover{transform:scale(1.03)}.blog__img-wrapper{margin-block-end:1rem;position:relative;background-color:#80808033;height:100px;max-height:300px;overflow:hidden}.blog__img-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}@media only screen and (min-width: 640px){.blog{grid-template-columns:repeat(2,1fr)}}.action_btn{position:absolute;z-index:5}.back-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background-color:#f5f5f5;border:none;border-radius:4px;cursor:pointer;font-weight:500;transition:all .3s ease;box-shadow:0 2px 4px #0000001a}.back-btn:hover{background-color:#e8e8e8;transform:translate(-5px)}.back-icon{font-size:18px;transition:transform .3s ease}.back-btn:hover .back-icon{transform:translate(-3px)}.blog__img-wrapper{margin-block-end:1rem;position:relative;background-color:#80808033;height:450px;overflow:hidden}.blog__img-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;cursor:pointer;transition:transform .3s ease}.blog__img-wrapper img:hover{transform:scale(1.03)}.markdown-content{margin-block:1.5rem}