#nav-bar{display:flex;align-items:end;position:absolute;z-index:100;gap:var(--spacing-md);padding:var(--spacing-sm)}#nav-bar h2{font-family:var(--font-style-cursive)}nav ul{display:flex;gap:var(--spacing-md)}nav ul li{list-style:none}nav ul li a{opacity:var(--opacity-md)}nav ul li a.active{font-weight:700;opacity:1}nav ul li a:hover{opacity:1}#menu-bar{margin-bottom:.25rem}#menu-bar svg{width:var(--icon-size-sm);height:var(--icon-size-sm)}#menu-drawer{flex-direction:column;position:fixed;top:0;right:0;z-index:100;background-color:var(--background-color);box-shadow:-.125rem 0 .25rem #0000001a;width:var(--menu-width);height:100%;padding:var(--spacing-lg) var(--spacing-md);transition:transform .3s ease-in-out;transform:translate(100%)}#menu-drawer.open{transform:translate(0)}#theme-btn{cursor:pointer}#menu-drawer #theme-btn{position:absolute;bottom:var(--spacing-md)}#menu-btn{position:fixed;top:var(--font-size-lg);right:var(--spacing-sm);z-index:200;width:var(--icon-size-md);height:var(--icon-size-md);cursor:pointer}#menu-btn span{display:block;border:.125rem solid var(--font-color);border-radius:var(--component-radius);margin:.25rem 0;margin-left:auto;transition:opacity .2s ease-in-out,width .2s ease-in-out,transform .1s ease-in-out}#menu-btn span:nth-child(1){width:100%}#menu-btn span:nth-child(2){width:80%}#menu-btn span:nth-child(3){width:60%}#menu-btn.close span:nth-child(1){transform:translateY(.375rem) rotate(45deg)}#menu-btn.close span:nth-child(2){opacity:0;width:0;transform:translate(.625rem) scaleX(0)}#menu-btn.close span:nth-child(3){width:100%;transform:translateY(-.375rem) rotate(-45deg)}:root{--picture-size: 15rem}#home{background-image:linear-gradient(to right,rgba(var(--font-color-rgb),.125) 1px,transparent 1px),linear-gradient(to bottom,rgba(var(--font-color-rgb),.125) 1px,transparent 1px);background-size:40px 40px;background-repeat:repeat space;height:100vh}#profile{object-fit:cover;object-position:top;border-radius:50%;width:var(--picture-size);height:var(--picture-size)}#home h2{font-size:calc(var(--font-size-lg) * .9);margin:var(--spacing-sm) 0}#home .content{text-align:center;width:calc(var(--content-width) * 1.2)}#scroll-down{display:flex;align-items:center;position:absolute;bottom:var(--spacing-md);opacity:var(--opacity-sm);margin-right:var(--icon-size-md);cursor:pointer}@media (min-width: 720px){:root{--picture-size: 16.25rem}}@media (min-width: 1080px){:root{--picture-size: 22.5rem}#home{flex-direction:row;gap:var(--spacing-lg)}#home .content{max-width:25rem}}#about .content p{text-indent:var(--spacing-sm);margin-bottom:var(--spacing-sm)}#about .svg-flex a{display:flex;align-items:center;opacity:var(--opacity-md);gap:var(--spacing-tn)}#about .svg-flex a:hover{opacity:1}#skill{background-image:radial-gradient(circle,rgba(var(--font-color-rgb),.3) 1px,#0000 1px);background-size:40px 40px}#skill-list{display:grid;grid-template-rows:repeat(4,minmax(var(--icon-size-lg),1fr));justify-items:center;gap:var(--spacing-sm);margin:var(--spacing-sm) 0}.skill-group{display:flex;gap:var(--spacing-sm)}.skill-group svg{width:var(--icon-size-lg);height:var(--icon-size-lg);cursor:pointer}#project-filter{display:flex;gap:var(--spacing-tn);margin:var(--spacing-sm) 0}#project-filter button{padding:var(--spacing-tn)}#project-filter button.unselected{background-color:transparent;color:var(--font-color)}#project-filter button.unselected svg{fill:var(--font-color)}#project-list{display:grid;grid-template-columns:1fr;gap:var(--spacing-md);margin:0 var(--spacing-sm)}#project-list img{object-fit:cover;border-radius:var(--component-radius);width:var(--content-width);height:calc(var(--content-width) * .625);margin-bottom:var(--spacing-tn);cursor:pointer}.project-info{display:flex;align-items:end;justify-content:space-between}.project-info>div{display:flex;gap:var(--spacing-tn)}#project-list .project-info>div svg{opacity:var(--opacity-md);width:var(--icon-size-sm);height:var(--icon-size-sm)}body.no-scroll{overflow:hidden}#project-detail{display:flex;flex-direction:column;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;position:fixed;top:0;z-index:300;background-color:var(--background-color);box-shadow:0 0 1.25rem #0006;width:100%;height:100%;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-sm);transition:transform .4s cubic-bezier(.4,0,.2,1)}#close-project-btn{display:flex;flex-direction:column;justify-content:space-around;position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);width:var(--icon-size-md);height:var(--icon-size-md);cursor:pointer}#close-project-btn span{border:.125rem solid var(--font-color);border-radius:var(--component-radius)}#close-project-btn span:nth-child(1){transform:translateY(.375rem) rotate(-45deg)}#close-project-btn span:nth-child(2){transform:translateY(-.375rem) rotate(45deg)}#project-detail h2{font-size:calc(var(--font-size-lg) * 1.2)}#project-detail h3{line-height:calc(var(--letter-height) * 1.2);opacity:var(--opacity-md);margin-bottom:var(--spacing-sm)}#project-detail h4{font-size:calc(var(--font-size-sm) * 1.125)}#project-detail p{margin-bottom:var(--spacing-sm)}#project-detail ul{opacity:var(--opacity-md);padding-left:var(--spacing-sm)}#project-detail ul li{line-height:var(--letter-height);margin-bottom:var(--spacing-tn)}#project-stack{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--spacing-sm);padding:0 var(--spacing-sm)}#project-stack svg{width:var(--icon-size-lg);height:var(--icon-size-lg)}#project-image{position:relative}#project-image img{border-radius:0;width:100%}#slider-image{display:flex;overflow-x:hidden}#slider-image::-webkit-scrollbar{display:none}#slider-image .image-container{flex:1 0 100%}#slider-image .image-container img{position:relative;top:50%;left:50%;transform:translate(-50%,-50%);padding:.125rem}#slider-button{display:flex;justify-content:space-between;position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);z-index:1;margin:0 var(--spacing-tn)}#slider-button button{background-color:var(--background-color);opacity:var(--opacity-md);width:var(--icon-size-md);height:var(--icon-size-md);padding-top:.188rem;transition:opacity .3s ease-in-out}#slider-button button:hover{opacity:1}#slider-button svg{fill:var(--font-color);width:var(--icon-size-md);height:var(--icon-size-md)}#minimizer{display:flex;justify-content:center;gap:var(--spacing-tn);margin-top:var(--spacing-tn)}#minimizer img{opacity:var(--opacity-sm);width:var(--spacing-sm);height:var(--spacing-sm);cursor:pointer;transition:opacity .3s ease-in-out}#minimizer img:hover{opacity:1}#minimizer img.active{opacity:1;border:.125rem solid var(--font-color)}@media (min-width: 720px){#project-filter{gap:var(--spacing-sm)}#project-detail{padding:6% 24%}#project-detail .project-info>div{gap:var(--spacing-sm)}#project-stack{gap:var(--spacing-md)}#slider-button{margin:0 var(--spacing-sm)}#slider-button button{width:var(--icon-size-lg);height:var(--icon-size-lg)}}#contact{background-image:radial-gradient(circle,rgba(var(--font-color-rgb),.3) 1px,#0000 1px);background-size:40px 40px}form{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}form input,form textarea{resize:none;font-family:var(--font-style-inp-btn);font-size:var(--font-size-sm);letter-spacing:calc(var(--letter-spacing) * 2);background-color:var(--input-color);color:var(--font-color);border:none;border-radius:var(--component-radius);padding:var(--spacing-tn) var(--spacing-sm);cursor:pointer;transition:letter-spacing .3s ease}form input:focus,form textarea:focus{outline:none}form input:not(:placeholder-shown),form textarea:not(:placeholder-shown){letter-spacing:var(--letter-spacing)}form textarea:nth-child(4){height:calc(var(--content-width) * .7)}form button{align-self:flex-end;margin-top:var(--spacing-sm);padding:var(--spacing-tn) var(--spacing-sm)}footer{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-sm);margin-top:var(--spacing-sm);padding-bottom:var(--spacing-md)}#contact-info{display:flex;flex-direction:column;align-items:center;opacity:var(--opacity-md);gap:var(--spacing-tn)}#copyright{font-family:var(--font-style-inp-btn);opacity:var(--opacity-sm)}#back-to-top{display:flex;align-items:center;justify-content:center;position:fixed;right:var(--spacing-sm);bottom:var(--spacing-lg);background-color:var(--button-color);border-radius:50%;width:calc(var(--icon-size-lg) + var(--spacing-tn));height:calc(var(--icon-size-lg) + var(--spacing-tn));cursor:pointer;transition:all .3s ease}#back-to-top svg{fill:var(--text-color);width:var(--icon-size-lg);height:var(--icon-size-lg)}@media (min-width: 720px){#back-to-top{right:var(--spacing-md);bottom:var(--spacing-md)}}:root{--collage-lg: 9.375rem;--collage-md: 5.625rem;--collage-sm: 1.875rem}.collage-container{position:relative}.collage{position:absolute;z-index:-1}#pointing{top:calc(var(--spacing-tn) * -1);right:calc(var(--collage-sm) * -1);width:var(--collage-lg);height:var(--collage-lg)}#sunburst{top:calc(var(--collage-sm) * -1);right:calc(var(--collage-sm) * -1);rotate:8deg;width:var(--collage-md);height:var(--collage-md)}#double-quotes{top:calc(var(--collage-sm) * -1);right:0;width:calc(var(--collage-sm) * 1.2);height:calc(var(--collage-sm) * .8)}#writing{top:40%;left:calc(var(--collage-md) * -1.2);width:var(--collage-lg);height:var(--collage-lg)}#skill-list img.collage{top:calc(var(--spacing-tn) * -1);left:calc(var(--spacing-tn) * -1);width:calc(var(--collage-sm) * 1.7);height:calc(var(--collage-sm) * 1.7);opacity:0;clip-path:circle(0% at 50% 50%)}#skill-list img.collage.show{opacity:1;animation:drawCircle .5s forwards}@keyframes drawCircle{0%{clip-path:circle(0% at 0% 50%)}to{clip-path:circle(75% at 50% 50%)}}#megaphone{top:calc(var(--collage-md) * 2.1);right:calc(var(--collage-md) * -1.6);width:calc(var(--collage-lg) * 1.8);height:calc(var(--collage-lg) * 1.2)}#palm-up{top:calc(var(--spacing-md) * -1);left:calc(var(--spacing-lg) * .8 * -1);rotate:-12deg;width:var(--collage-lg);height:var(--collage-lg)}#reaching-out{z-index:1;bottom:var(--spacing-lg);right:calc(var(--collage-sm) * -1);width:var(--collage-lg);height:calc(var(--collage-lg) * .4)}@media (min-width: 720px){:root{--collage-lg: 13.125rem}}@media (min-width: 1080px){:root{--collage-lg: 16.25rem}}@media (min-width: 1440px){:root{--collage-lg: 20rem}}:root{--font-style-default: "Lato", sans-serif;--font-style-cursive: "Playfair Display", cursive;--font-style-inp-btn: "Ubuntu Mono", monospace}:root{--font-size-lg: 1.5rem;--font-size-md: 1.25rem;--font-size-sm: 1rem;--letter-height: 1.5rem;--letter-spacing: .125rem}:root{--icon-size-lg: 2rem;--icon-size-md: 1.5rem;--icon-size-sm: 1rem}:root{--spacing-lg: 5rem;--spacing-md: 2.5rem;--spacing-sm: 1.25rem;--spacing-tn: .625rem}:root{--menu-width: 15rem;--content-width: 20rem;--component-radius: 1rem;--opacity-md: .7;--opacity-sm: .5}:root{--background-color:hsl(0, 0%, 93%);--text-color: hsl(0, 0%, 100%);--input-color: hsl(0, 0%, 90%);--button-color: hsl(0, 0%, 10%);--font-color: hsl(0, 0%, 10%);--font-color-rgb: 0, 0, 0}body.dark{--background-color:hsl(0, 0%, 7%);--text-color: hsl(0, 0%, 0%);--input-color: hsl(0, 0%, 10%);--button-color: hsl(0, 0%, 90%);--font-color: hsl(0, 0%, 90%);--font-color-rgb: 255, 255, 255}*{font-family:var(--font-style-default);box-sizing:border-box;margin:0;padding:0}h2{font-size:var(--font-size-lg)}h3{font-size:var(--font-size-md)}h4{font-size:var(--font-size-sm)}p{font-size:var(--font-size-sm);line-height:var(--letter-height);letter-spacing:var(--letter-spacing);opacity:var(--opacity-md)}a{text-decoration:none;font-size:var(--font-size-sm);color:var(--font-color);cursor:pointer}svg{fill:var(--font-color);width:var(--icon-size-md);height:var(--icon-size-md)}body{background-color:var(--background-color);color:var(--font-color);height:100vh}body::-webkit-scrollbar{display:none}section{display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative;gap:var(--spacing-sm);padding:var(--spacing-md) 0}.content{width:var(--content-width)}.svg-flex{display:flex;align-items:center;gap:var(--spacing-sm)}span.space{display:inline-block;width:var(--spacing-sm)}button{display:flex;align-items:center;font-family:var(--font-style-inp-btn);font-size:var(--font-size-sm);background-color:var(--button-color);color:var(--text-color);border:none;border-radius:var(--component-radius);gap:var(--spacing-tn);cursor:pointer}button svg{fill:var(--text-color);width:var(--icon-size-sm);height:var(--icon-size-sm)}@media (min-width: 720px){:root{--font-size-lg: 2rem;--content-width: 26.25rem}}