:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;--bg-color: hsl(232, 19%, 15%);--txt-color: rgb(255, 255, 255);--focus-color: hsl(200, 100%, 70%);background-color:var(--bg-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html{position:relative}*{transition:background-color .1s linear,color .1s linear;box-sizing:border-box;scroll-behavior:smooth}header *{margin:0}:root.light{--bg-color: white;--txt-color: hsl(0 0% 10%);--focus-color: hsl(200, 80%, 50%)}body{margin:0 auto;max-width:1200px;height:inherit;min-height:100vh;background-color:var(--bg-color);color:var(--txt-color)}a{font-weight:500;color:var(--txt-color);text-decoration:inherit}a:hover{cursor:pointer;color:var(--focus-color)}section a{text-decoration:underline}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:var(--focus-color)}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@property --percent{syntax: "<percentage>"; inherits: false; initial-value: 0%;}main{z-index:1}main,footer{padding:0rem clamp(1rem,3%,10rem)}main>section:not(:first-of-type){margin-bottom:4rem}footer{min-height:50px;margin-top:5rem;text-align:center;color:var(--txt-color);opacity:.8;font-weight:300}nav{display:grid;grid-template-columns:max-content 1fr repeat(5,min-content);grid-template-rows:3rem;column-gap:2rem;font-size:1.5rem;position:sticky;top:0rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:9999}nav,#nav-overlay{background-color:hsla(from var(--bg-color) h s l / .25);padding:.5rem 2rem .5rem 0}#nav-overlay{display:contents;z-index:1}nav *{z-index:1}nav button{display:grid;padding:.5rem;height:inherit;aspect-ratio:1;align-items:center;justify-content:center;border-radius:25%}nav button svg{grid-area:1 / 1;pointer-events:none}nav button#toggleScheme{color:#fff}:root:not(.light) svg#sun{opacity:0}:root.light svg#moon{opacity:0}nav a{padding:.25rem 1rem}#nav-options-wrapper{display:contents}#menu-icon{color:var(--txt-color);display:none;padding:0;height:100%;background-color:hsla(from var(--bg-color) h s l / 0)}#menu-icon svg{width:100%;height:100%;padding:.25rem}button#closeMenu{position:absolute;display:none}@media (max-width: 900px){nav{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 0fr;padding:0}#nav-overlay{display:flex;justify-content:space-between;padding:.25rem}nav.open #nav-overlay{background-color:#66ccff1a}:root.light nav.open #nav-overlay{transition:color .2s ease-in-out;background-color:#66ccff80}#nav-options-wrapper{display:none;position:absolute;background-color:#15161e;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:0px solid hsl(232,19%,25%);border-bottom-width:4px;width:100%;left:0;justify-items:left;padding:4rem 1rem 1rem;z-index:0}:root.light #nav-options-wrapper{background-color:var(--bg-color);border-color:#b3b6cb}nav.open #nav-options-wrapper{display:grid}#nav-options-wrapper a{width:100%}button#toggleScheme{aspect-ratio:2 / 1;height:3rem;border-radius:.5rem;display:grid;grid-template-columns:1fr 1fr;margin-top:1rem;justify-items:center;justify-self:center;position:relative;transition:all .1s ease-in-out;padding:.5rem 0}button#toggleScheme:before{content:"";display:block;position:absolute;box-sizing:border-box;padding:.25rem 0;width:calc(50% - .25rem);height:calc(100% - .5rem);left:.25rem;border-radius:.25rem 0 0 .25rem;background-color:var(--focus-color);transition:all .1s ease-in-out}:root.light button#toggleScheme:before{left:50%;border-radius:0 .25rem .25rem 0}button#toggleScheme svg{opacity:1!important;grid-area:unset;z-index:2;color:#fff;position:relative}svg#moon{left:.1rem}svg#sun{right:.1rem}:root:not(.light) svg#moon,:root.light svg#sun{color:#000}#menu-icon{display:block}}.Card-Wrapper{position:absolute;perspective:500px}.Card{--details: black;--bg: white;--padding: .5rem}.Card{--rotation: 0deg;aspect-ratio:63 / 88;width:10rem;height:auto;display:inline-grid;grid-template-areas:"card";box-sizing:border-box;transition:all .2s ease-in-out;transform:rotateY(var(--rotation));position:relative;transform-style:preserve-3d}.Card.flipped{transform:rotateY(var(--rotation))}@keyframes wiggle{0%{transform:rotateY(var(--rotation))}to{transform:rotateY(calc(var(--rotation) + 10deg))}}@keyframes rotate{0%{transform:rotateY(0) rotateX(-5deg)}to{transform:rotateY(360deg) rotateX(-5deg)}}.Card>*{grid-area:card;border-radius:.5rem}@media (hover:hover){.Card-Wrapper:hover{cursor:pointer}}.Card .FrontSide{width:100%;height:100%;padding:var(--padding);background:radial-gradient(circle,var(--details) 0 2.2rem,var(--bg) 2.25rem 2.4rem,var(--details) 2.45rem 2.6rem,transparent 2.6rem 100%),repeating-linear-gradient(-45deg,var(--details) 0 .5rem,transparent .5rem 1rem),repeating-linear-gradient(45deg,var(--details) 0 .5rem,transparent .5rem 1rem);background-repeat:no-repeat;background-origin:content-box;background-color:var(--bg);z-index:1}.Card .FrontSide:before{content:"";display:block;outline:5px solid var(--details);border-radius:.05rem;height:100%;pointer-events:none}.Card .FrontSide,.Card .BackSide,.Card .FrontSide:before{backface-visibility:hidden}.Card .BackSide{--icon-url: attr(data-icon-url);position:relative;transform:rotateX(0);background-color:var(--bg);color:var(--details);transform:rotateY(180deg);z-index:1}.Card .BackSide div.ace{box-sizing:border-box;padding:0rem .5rem;font-weight:600;font-size:1.5rem;font-family:Times New Roman,Times,serif;display:block;height:100%;width:100%;position:absolute;background-image:linear-gradient(var(--details));background-position:.3rem 2rem;background-size:1.5rem 2.5rem;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(#000),var(--icon-url);mask-image:linear-gradient(#000),var(--icon-url);-webkit-mask-position:0rem 0rem,.4rem 2rem;mask-position:0rem 0rem,.4rem 2rem;-webkit-mask-size:1.75rem 1.75rem,1.25rem;mask-size:1.75rem 1.75rem,1.25rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}.Card .BackSide div.ace:nth-of-type(2){rotate:180deg}.Card .BackSide div.icon{background-color:var(--details);top:0;right:0;bottom:0;left:0;margin:auto;width:5rem;height:5rem;position:absolute;-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);-webkit-mask-size:5rem 5rem;mask-size:5rem 5rem;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}section#intro{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;padding:clamp(1rem,max(3vh,5vw),10rem) 0;padding-top:clamp(1rem,max(3vh,5vw),10rem);column-gap:2rem}section#intro header{margin-top:5rem}section#intro header span{color:var(--focus-color)}section#intro p{font-size:1.35rem}#cards-container,#cards-small{grid-column:2;grid-row:1 / 3;display:grid;grid-template-columns:1fr 1fr 1fr;gap:.1rem;margin:0 auto;position:relative}section#intro>div .Card-Wrapper:nth-child(2n){justify-self:left}section#intro>div .Card-Wrapper:nth-child(odd){justify-self:right}section#intro .Card-Wrapper{position:relative;font-size:0}section#intro .Card{--details: var(--focus-color);--bg: var(--bg-color)}section#intro .BackSide{--bg: var(--focus-color)}section#intro .Card .BackSide *{display:none}section#intro .BackSide .icon{display:block;background:var(--bg-color);-webkit-mask-image:url(/glasses.svg),url(/topography.svg);mask-image:url(/glasses.svg),url(/topography.svg);-webkit-mask-position:center,center;mask-position:center,center;-webkit-mask-size:300%,300%;mask-size:300%,300%;width:100%;height:100%}#cards-container .Card.first .BackSide .icon{-webkit-mask-position:left top,left top;mask-position:left top,left top}#cards-container .Card.second .BackSide .icon{-webkit-mask-position:50% top,50% top;mask-position:50% top,50% top}#cards-container .Card.third .BackSide .icon{-webkit-mask-position:right top,right top;mask-position:right top,right top}#cards-container .Card.fourth .BackSide .icon{-webkit-mask-position:left 87%,left 92.5%;mask-position:left 87%,left 92.5%}#cards-container .Card.fifth .BackSide .icon{-webkit-mask-position:50% 87%,50% 92.5%;mask-position:50% 87%,50% 92.5%}#cards-container .Card.sixth .BackSide .icon{-webkit-mask-position:right 87%,right 92.5%;mask-position:right 87%,right 92.5%}#cards-small{display:none;padding:.5rem 5rem;-webkit-tap-highlight-color:transparent}#cards-small:focus-visible{outline:none}#cards-small:focus-visible .Card{border-radius:.25rem;outline:3px solid black}@media (hover:hover){#cards-small:hover{cursor:pointer}}#cards-container:after,#cards-small:after{content:"Click Me!";display:block;position:absolute;left:95%;bottom:100%;opacity:.4;font-size:1.25rem;white-space:nowrap;rotate:20deg;font-family:Trebuchet MS,Lucida Sans Unicode,Lucida Grande,Lucida Sans,Arial,sans-serif}#cards-small .Card.second .BackSide{background-image:none}#cards-small .Card.second .BackSide .icon{-webkit-mask-position:-15% center,50% center;mask-position:-15% center,50% center;-webkit-mask-size:125%,300%;mask-size:125%,300%}#cards-small.slide .Card.second .BackSide .icon{-webkit-mask-position:115% center,40% center;mask-position:115% center,40% center}@media (max-width: 1200px){section#intro{grid-template-columns:unset;grid-template-rows:400px 1fr 1fr}#cards-container,#cards-small{grid-row:1;grid-column:unset}}@media (max-width: 800px){section#intro{grid-template-rows:1fr}#cards-container{display:none}section#intro header{margin-top:2.5rem}#cards-small{display:grid;grid-template-columns:1fr}#cards-small:after{left:75%;bottom:95%;rotate:6deg}#cards-small{--mult: 1}#cards-small.slide{--mult: -1}#cards-small *{transition:none}#cards-small .Card.second .BackSide .icon{transition:mask-position .5s cubic-bezier(.34,.87,0,.92)}#cards-small>*{grid-row:1 / 2;grid-column:1 / 2;transition:all .2s ease-in-out!important}#cards-small>div:first-child{z-index:1;left:calc(var(--mult) * 4rem);transform:rotate(calc(var(--mult) * 5deg))}#cards-small>div:nth-child(2){z-index:0;left:calc(var(--mult) * -4rem);transform:rotate(calc(var(--mult) * -5deg))}#cards-small .Card.first{--rotation: 0deg !important}#cards-small .Card.second{--rotation: 180deg !important}}section#education ul{padding-inline-start:50px}section#education li span{float:right}section#education li strong,section#education li span{font-weight:700}section#education li p{margin-top:0;font-size:clamp(.8rem,3vw,1rem)}section#education li b{font-weight:500;font-size:1rem}section#education li::marker{content:attr(data-year) "  "}section#education li strong,section#education li::marker{color:var(--focus-color)}section#projects{--urban-bg: hsl(203, 100%, 40%);--urban-txt: white;--fish-bg: hsl(180, 2%, 20%);--fish-txt: white;--badger-bg: crimson;--badger-txt: white;--typefight-bg: rgb(202, 146, 255);--typefight-txt: hsl(0, 0%, 20%);--dungeon-bg: gold;--dungeon-txt: hsl(0, 0%, 15%)}section#projects a{color:inherit}:root.light section#projects{--typefight-bg: hsl(0, 0%, 20%);--typefight-txt: rgb(202, 146, 255);--dungeon-bg: hsl(0, 0%, 15%);--dungeon-txt: gold}section#projects>header{padding:0 min(10rem,5%)}section#projects .showcase{width:100%;border-radius:.5rem;display:grid;padding:unset;margin-bottom:1rem}.showcase header{--icon-url: "";--border-width-bottom: 5px;display:grid;align-items:baseline;grid-template-columns:3rem 1fr;padding:.75rem .25rem;font-size:1.15rem;border-bottom:var(--border-width-bottom) solid hsla(0 0% 100% / 0);transition:border-bottom .1s linear;position:relative}.showcase header.expanded{border-bottom:5px solid hsla(0 0% 100% / .1)}.showcase header>div{display:flex;align-items:baseline;flex-wrap:wrap}.showcase header>div>*{display:inline-block;white-space:nowrap;width:auto;text-overflow:ellipsis;overflow-x:hidden}@media (hover:hover){.showcase header:hover{cursor:pointer}}.showcase header *{display:inline-block;font-size:clamp(1rem,3vw,1.15rem)}.showcase header h3{margin-right:1rem;font-size:1.3rem}.showcase header h3>svg{width:1rem}.showcase header>svg{transform:scale(1.5);align-self:center;justify-self:center;rotate:0deg;transition:rotate .2s ease-in-out}.showcase header.expanded>svg{rotate:180deg}.showcase header:after{content:"";display:block;height:calc(100% + var(--border-width-bottom));position:absolute;right:0;top:0;width:20%;background-color:currentColor;-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);-webkit-mask-position:center;mask-position:center;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100%;mask-size:100%;opacity:.3}div.collapsable{display:grid;grid-template-rows:0fr;transition:grid-template-rows .2s ease-in-out}div.collapsable.expanded{grid-template-rows:1fr}div.collapsable>div{overflow:hidden;display:grid;grid-template-columns:max-content 1fr}div.collapsable>div>*{grid-row:1 / 2}section#projects .showcase aside{display:inline-block;position:relative;grid-column:1 / 2;padding:1rem;align-content:center}section#projects .showcase .discription{font-size:1.05rem;padding:0rem 5rem 1rem 1rem;position:relative}section#projects .showcase .discription img{text-align:center;display:block;margin:0 auto;max-width:100%;border-radius:1rem}section#projects .showcase aside>.Card-Wrapper{position:relative}div.collapsable>div>*:not(aside){grid-column:2 / 3}.showcase .tools{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1rem}.showcase .tools div{background-color:#ffffff40;padding:.25rem .5rem;border-radius:.25rem}.Card.urban{--details: var(--urban-bg)}.Card.badger{--details: var(--badger-bg)}.Card.fish{--bg: var(--fish-txt);--details: var(--fish-bg) }.Card.typefight{--bg: var(--typefight-txt);--details: var(--typefight-bg)}.Card.dungeon{--bg: var(--dungeon-txt);--details: var(--dungeon-bg)}@media (max-width: 800px){section#projects{padding:0 1%}section#projects>header{padding:0 5%}.showcase>header:after{width:25%;-webkit-mask-size:100%;mask-size:100%}div.collapsable>div{display:flex;flex-direction:column-reverse}div.collapsable>div aside{align-self:center}section#projects .showcase .discription{padding:0rem 2rem 1rem 1rem}}section#contact form{border:3px solid var(--focus-color);background-color:transparent;width:min(400px,100%);padding:.5rem 1rem;border-radius:.5rem;justify-self:center;margin:3rem auto;overflow:hidden;position:relative;z-index:0}section#contact form h3{margin:0;color:var(--focus-color);display:flex;justify-content:space-between;flex-direction:row;align-items:center;font-size:1.5rem}section#contact form h3>button{color:var(--txt-color);background-color:transparent;padding:.5rem;position:relative;font-size:.85rem;opacity:.8}section#contact form label{margin-top:.5rem;display:inline-block;font-weight:500}section#contact form input,section#contact form textarea{width:100%;border-width:.15rem;border-radius:.5rem;border-color:transparent;background-color:var(--txt-color);color:var(--bg-color);font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;padding:.25rem .5rem;font-size:1rem;border-style:solid;outline:none}section#contact form *:focus-visible{border-color:var(--focus-color)}section#contact form *::placeholder{color:inherit;opacity:.5}section#contact form textarea{resize:none;scrollbar-width:thin;scrollbar-color:var(--bg-color) var(--txt-color);margin-bottom:.5rem}section#contact button[type=submit]{background-color:var(--focus-color);padding:.5rem 1rem;justify-self:right;display:block;grid-column:2 / 3;position:relative}:root.light section#contact button[type=submit]{color:#fff}section#contact form:before{--height: 30rem;content:"@";display:block;position:absolute;font-size:var(--height);line-height:var(--height);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-weight:700;top:40%;left:50%;transform:translateY(-50%) translate(-50%);pointer-events:none;z-index:-1;opacity:.1}section#contact form div:last-of-type{display:grid;grid-template-columns:1fr max-content;align-items:center;column-gap:.5rem}section#contact form>div:last-of-type div{font-size:1.05rem;display:inline-block;width:100%}section#contact form div.loading:after{content:".";animation:loading-dots 3s linear infinite}@keyframes loading-dots{0%{content:"."}33%{content:".."}66%{content:"..."}}section#contact form div.error span{color:#fc4a6e;font-weight:700}section#contact form div.success{position:relative}section#contact form div.success+button[type=submit]{color:transparent!important}section#contact form div.success+button[type=submit]:after{content:"5s";display:inline-flex;color:var(--bg-color);position:absolute;align-items:center;justify-content:center;top:0;right:0;bottom:0;left:0;margin:auto;font-size:1.5rem;animation:countdown-5s 5s linear forwards}@supports (width: 1rlh){section#contact form div.success+button[type=submit]:after{--percent: 0%;content:"";display:block;height:1.5rem;width:1.5rem;position:absolute;background-image:conic-gradient(transparent 0 var(--percent),white var(--percent) 100%);top:0;right:0;bottom:0;left:0;margin:auto;border-radius:50%;outline:.2rem solid white;outline-offset:2px;animation:countdown 5s linear 1s forwards}}@keyframes countdown{0%{--percent: 0%}to{--percent: 100%}}@keyframes countdown-5s{0%{content:"5"}20%{content:"4"}40%{content:"3"}60%{content:"2"}80%{content:"1"}to{content:"0"}}