#nav-bar{display:flex;align-items:center;position:absolute;z-index:1;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);position:relative;padding-bottom:.125rem;cursor:pointer;transition:color .2s ease-in-out,opacity .2s ease-in-out}nav ul li a.active{font-weight:700;opacity:1}nav ul li a:hover{opacity:1}nav ul li a:after{background-color:currentColor;width:0;height:.125rem;content:"";position:absolute;left:0;bottom:0;transition:width .2s ease-in-out}nav ul li a:hover:after,nav ul li a.active:after{width:100%}#menu-bar{display:flex;align-items:center}#menu-bar svg{width:var(--icon-size-sm);height:var(--icon-size-sm);opacity:var(--opacity-md);cursor:pointer;transition:opacity .2s ease-in-out,transform .2s ease-in-out}#menu-bar svg:hover{opacity:1;transform:translateY(-.0625rem)}#menu-btn{width:var(--icon-size-md);height:var(--icon-size-md);cursor:pointer}#menu-container{background-color:var(--background-color);border-radius:50%;display:flex;position:fixed;top:var(--spacing-tn);right:var(--spacing-tn);z-index:3;padding:var(--spacing-tn)}#menu-btn span{border:.125rem solid var(--font-color);border-radius:var(--component-radius);display:block;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){width:0;opacity:0;transform:translate(.625rem) scaleX(0)}#menu-btn.close span:nth-child(3){width:100%;transform:translateY(-.375rem) rotate(-45deg)}#menu-drawer{background-color:var(--background-color);box-shadow:-.125rem 0 .25rem #0000001a;width:var(--menu-width);height:100%;flex-direction:column;position:fixed;top:0;right:0;z-index:2;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-controls{display:flex;position:absolute;left:var(--spacing-md);bottom:var(--spacing-md);gap:var(--spacing-sm)}@media (min-width: 720px){#nav-bar{background-color:var(--background-color);width:100%;position:fixed}}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;gap:var(--spacing-tn);opacity:var(--opacity-md)}#copyright{font-family:var(--font-style-inp-btn);opacity:var(--opacity-sm)}.svg-flex a{position:relative}.svg-flex a:after{background-color:currentColor;width:0;height:.125rem;content:"";position:absolute;left:0;bottom:-.125rem;transition:width .2s ease-in-out}.svg-flex a:hover:after{width:100%}#back-to-top{background-color:var(--button-color);color:var(--text-color);border-radius:50%;width:calc(var(--icon-size-lg) + var(--spacing-tn));height:calc(var(--icon-size-lg) + var(--spacing-tn));display:flex;align-items:center;justify-content:center;position:fixed;right:var(--spacing-sm);bottom:var(--spacing-lg);cursor:pointer;transition:transform .4s cubic-bezier(.4,0,.2,1),box-shadow .4s cubic-bezier(.4,0,.2,1)}#back-to-top svg{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{--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{opacity:var(--opacity-sm);display:flex;align-items:center;position:absolute;bottom:var(--spacing-md);margin-right:var(--icon-size-md);cursor:pointer}#scroll-down img{width:var(--icon-size-md);height:var(--icon-size-md);rotate:45deg}@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;gap:var(--spacing-tn)}#about .svg-flex svg{width:var(--icon-size-sm);height:var(--icon-size-sm);stroke:currentColor;fill:none}#about .svg-flex .document-label{text-decoration:none;display:inline-block;position:relative;padding-bottom:.125rem}#about .svg-flex .document-label:after{background-color:currentColor;width:0;height:.125rem;content:"";position:absolute;left:0;bottom:0;transition:width .2s ease-in-out}#about .svg-flex a:hover .document-label:after{width:100%}#about .svg-flex a:after{content:none}#experience{background-image:radial-gradient(circle,rgba(var(--font-color-rgb),.3) 1px,#0000 1px);background-size:40px 40px;padding-bottom:var(--spacing-lg)}#experience .content{text-align:left}#experience .experience-header{margin-bottom:var(--spacing-sm)}#experience .experience-label{font-family:var(--font-style-inp-btn);font-size:calc(var(--font-size-sm) * .8);letter-spacing:calc(var(--letter-spacing) * 1.5);text-transform:uppercase;opacity:var(--opacity-sm);margin-bottom:calc(var(--spacing-tn) * .5)}#experience .experience-header h3{margin:0}#experience .experience-list{padding-left:var(--spacing-sm)}#experience .experience-list li{line-height:var(--letter-height);margin-bottom:var(--spacing-tn)}#experience .experience-list p{margin:0}#skill{background-color:var(--background-color)}#skill-list{display:grid;grid-auto-rows:minmax(var(--icon-size-lg),auto);row-gap:var(--spacing-md);justify-items:center;margin:var(--spacing-sm) 0}.skill-group{display:flex;gap:calc(var(--spacing-md) * 1.2)}.skill-group img{width:var(--icon-size-lg);height:var(--icon-size-lg);cursor:pointer;transition:filter .3s ease-in-out}.skill{display:flex;flex-direction:column;align-items:center;width:calc(var(--icon-size-lg) * 1.6)}.skill p{font-size:.8em}body.dark #skill-list .skill-group img{filter:invert(1)}#project{background-image:radial-gradient(circle,rgba(var(--font-color-rgb),.3) 1px,#0000 1px);background-size:40px 40px;padding-bottom:var(--spacing-lg)}#project-filter{display:flex;gap:var(--spacing-tn);margin:var(--spacing-sm) 0}#project-filter button{padding:var(--spacing-tn)}#project-filter button svg{width:var(--icon-size-sm);height:var(--icon-size-sm);stroke:currentColor;fill:none}#project-filter button .filter-label{position:relative;padding-bottom:.125rem}#project-filter button .filter-label:after{background-color:currentColor;width:0;height:.125rem;content:"";position:absolute;left:0;bottom:0;transition:width .2s ease-in-out}#project-filter button:not(.active):hover .filter-label:after{width:100%}#project-filter button.unselected{background-color:transparent;color: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{width:var(--icon-size-sm);height:var(--icon-size-sm);opacity:var(--opacity-md)}#project-list .project-info>div img{width:var(--icon-size-sm);height:var(--icon-size-sm);opacity:var(--opacity-md);transition:filter .3s ease-in-out}body.no-scroll{overflow:hidden}#project-detail{background-color:var(--background-color);box-shadow:0 0 1.25rem #0006;width:100%;height:100%;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none;display:flex;flex-direction:column;position:fixed;top:0;z-index:1;gap:var(--spacing-sm);padding:var(--spacing-md) var(--spacing-sm);transition:transform .4s cubic-bezier(.4,0,.2,1)}#close-project-btn{width:var(--icon-size-md);height:var(--icon-size-md);display:flex;flex-direction:column;justify-content:space-around;position:absolute;top:var(--spacing-sm);right:var(--spacing-sm);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-header{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}#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)}#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:flex-start;gap:var(--spacing-sm);padding:0}#project-stack svg{width:var(--icon-size-lg);height:var(--icon-size-lg)}#project-stack img{width:var(--icon-size-lg);height:var(--icon-size-lg);transition:none}body.dark #project-list .project-info>div img,body.dark #project-stack img{filter:invert(1)}#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%);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);display:flex;align-items:center;justify-content:center;padding:0;transition:opacity .3s ease-in-out}#slider-button button:hover{opacity:1}#slider-button svg{color: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{border:.125rem solid var(--font-color);opacity:1}@media (min-width: 720px){#project-filter{gap:var(--spacing-sm)}#project-detail{padding:6% 24%}#project-header{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:var(--spacing-md)}#project-detail .project-info>div{gap:var(--spacing-sm)}#project-stack{justify-content:flex-end;flex-wrap:nowrap;gap:var(--spacing-sm)}#slider-button{margin:0 var(--spacing-sm)}#slider-button button{width:var(--icon-size-lg);height:var(--icon-size-lg)}}#contact{background-color:var(--background-color)}form{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-top:var(--spacing-md)}.form-field{background-color:var(--input-color);border-radius:var(--component-radius);position:relative}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:transparent;color:var(--font-color);border:none;border-radius:var(--component-radius);width:100%;padding:var(--spacing-tn) calc(var(--spacing-sm) * 2) 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[name=message]{height:calc(var(--content-width) * .7)}.field-icon{width:var(--icon-size-sm);height:var(--icon-size-sm);opacity:0;pointer-events:none;position:absolute;top:var(--spacing-tn);right:var(--spacing-sm);transform:translateY(0);transition:opacity .2s ease-in-out,transform .2s ease-in-out}.form-field:hover .field-icon,.form-field:focus-within .field-icon{opacity:1;transform:translateY(0) scale(1.05)}form button{align-self:flex-end;margin-top:var(--spacing-sm);padding:var(--spacing-tn) var(--spacing-sm)}form button:disabled{cursor:not-allowed}:root{--collage-lg: 9.375rem;--collage-md: 5.625rem;--collage-sm: 1.875rem}.collage-container{position:relative}.collage{z-index:-1;position:absolute}#pointing{width:var(--collage-lg);height:var(--collage-lg);top:calc(var(--spacing-tn) * -1);right:calc(var(--collage-sm) * -1)}#sunburst{width:var(--collage-md);height:var(--collage-md);top:calc(var(--collage-sm) * -1);right:calc(var(--collage-sm) * -1);rotate:8deg}#double-quotes{width:calc(var(--collage-sm) * 1.2);height:calc(var(--collage-sm) * .8);top:calc(var(--collage-sm) * -1);right:0}#writing{width:var(--collage-lg);height:var(--collage-lg);top:40%;left:calc(var(--collage-md) * -1.2)}#experience-scribble{width:calc(var(--collage-sm) * 4.6);height:calc(var(--collage-sm) * 1.4);top:calc(var(--spacing-sm) * -.5);left:calc(var(--collage-sm) * -.4)}#skill-list img.collage{clip-path:circle(0% at 50% 50%);opacity:0;width:calc(var(--collage-sm) * 1.7);height:calc(var(--collage-sm) * 1.7);top:calc(var(--spacing-tn) * -1);left:calc(var(--spacing-tn) * 0)}#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{width:calc(var(--collage-lg) * 1.8);height:calc(var(--collage-lg) * 1.2);top:calc(var(--collage-md) * 1);right:calc(var(--collage-md) * -1.6)}#palm-up{width:var(--collage-lg);height:var(--collage-lg);top:calc(var(--spacing-md) * -1);left:calc(var(--spacing-lg) * .8 * -1);rotate:-12deg}#reaching-out{width:var(--collage-lg);height:calc(var(--collage-lg) * .4);bottom:var(--spacing-lg);right:calc(var(--collage-sm) * -1);z-index:1}@media (min-width: 720px){:root{--collage-lg: 13.125rem}#pointing{z-index:1}}@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{width:var(--icon-size-md);height:var(--icon-size-md)}svg:not(.lucide){fill:var(--font-color)}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{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);display:flex;align-items:center;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}}