:root{--heavy-green: #004632;--paper: #fef8dd;--heavy-paper: #f8f0ca;--green-1: #317640;--green-2: #97b06d;--green-3: #9fb676;--text-black: #000;--round-border-radius: 9999px;--normal-border-radius: 1rem;--mouse-x: 0px;--mouse-y: 0px;--mouse-x-from-center: calc((100vw + var(--mouse-x)) / 2 - 50vw);--mouse-y-from-center: calc((100vh + var(--mouse-y)) / 2 - 50vh)}:root{font-family:Merriweather,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;background-color:var(--heavy-green);color:var(--text-black)}button{border-radius:var(--round-border-radius);border:none;font-family:Merriweather;font-weight:700;font-style:italic;padding:.5rem 1rem;display:inline-flex;text-wrap:nowrap;gap:.5rem;cursor:pointer;background-color:var(--green-1);color:var(--paper)}button:hover{background-color:var(--heavy-green)}button.secondary{background-color:transparent;background-color:initial;color:var(--heavy-green);border:solid 2px var(--heavy-green)}button.secondary:hover{background-color:var(--green-3)}button:not(.no-icon):after{content:"";color:var(--paper);display:inline-block;width:.5rem;aspect-ratio:1;background-image:url(/icons/detail_link_icon.svg);background-repeat:no-repeat;background-position:center;background-size:contain;margin:auto 0}button.default-hidden{display:none}.tile{padding:1rem;background-color:var(--paper);border-radius:var(--normal-border-radius)}.tile h1,.tile h2,.tile h3,.tile h4,.tile h5,.tile h6{margin:0;font-family:Bebas Neue,system-ui,Avenir,Helvetica,Arial,sans-serif}.tile h1{font-size:7rem}.tile h2{font-size:4rem}#about,#hobbies,#games{background-color:var(--green-1);color:var(--paper)}#github,#projects,#archive{color:var(--paper);background-color:var(--green-2)}:is(#experience,#education,#tech) h1,:is(#experience,#education,#tech) h2{color:var(--heavy-green)}#about h1{display:inline-grid;width:100%;height:100%;line-height:1;place-content:center}:is(#about h1) i{font-size:3rem;font-weight:400;font-family:Merriweather,system-ui,Avenir,Helvetica,Arial,sans-serif}#summary{display:grid;place-content:center;padding:2rem 1rem}#summary span{padding:0rem 1rem}#summary strong{border-top:2px solid var(--heavy-green);display:inline-flex;justify-content:center;border-radius:1rem 1rem 0 0;margin-top:.5rem;padding:.2rem 1rem;font-size:1.2rem;color:var(--heavy-green)}.info-tile{cursor:pointer}.info-tile a{width:100%;height:100%;display:grid;place-content:center}.info-tile svg{width:2.5rem;aspect-ratio:1}#experience{display:flex;flex-direction:column}#experience ul{background-color:var(--heavy-paper);border-radius:var(--normal-border-radius);padding:1rem;align-items:end;flex-grow:1;justify-content:center;width:-moz-fit-content;width:fit-content;margin:0 auto;display:flex;flex-direction:column;gap:1.5rem}:is(#experience ul)>*{display:flex;align-items:center;gap:1rem}:is(:is(#experience ul)>*) .timepoint{text-align:center;font-weight:700;font-style:italic;color:var(--heavy-green);line-height:1.2}:is(:is(#experience ul)>*)>p{border:2px solid var(--green-2);background-color:var(--paper);border-radius:var(--normal-border-radius);padding:.5rem 1rem;margin:0}:is(:is(:is(#experience ul)>*)>p) em{font-weight:700;color:var(--heavy-green)}:is(#experience ul)>*:not(:first-child):before{content:"〇";font-weight:700;color:var(--heavy-green);margin-right:-.5rem}:is(#experience ul)>*:first-child{position:relative;justify-content:right;width:100%}:is(:is(#experience ul)>*:first-child)>p{width:calc(100% - 2rem);text-align:right;color:var(--paper);background-color:var(--heavy-green);border-top-right-radius:var(--round-border-radius);border-bottom-right-radius:var(--round-border-radius);border:none}:is(:is(:is(#experience ul)>*:first-child)>p) em{color:var(--green-3)}:is(:is(#experience ul)>*:first-child) .timepoint{position:absolute;left:-.5rem;background-image:url(/icons/info_star.svg);background-repeat:no-repeat;background-size:100%;background-position:center;padding:1rem}#experience .company-list{display:flex;align-items:center;margin:.5rem 0;justify-content:right;gap:.5rem}#education h2{text-align:center}#education .emphasis{text-align:center;padding:1rem 2rem;width:-moz-fit-content;width:fit-content;margin:0 auto;background-color:var(--heavy-green);border-radius:var(--normal-border-radius);color:var(--paper)}:is(#education .emphasis) em strong{color:var(--green-3)}#education>.graduated-at{background-color:var(--heavy-paper);width:-moz-max-content;width:max-content;padding:1rem 2rem;margin:0 auto;position:relative;border-radius:0 0 var(--round-border-radius) var(--round-border-radius);color:var(--heavy-green)}:is(#education>.graduated-at) .decorative-round{position:absolute;left:0rem;top:50%;transform:translate(-50%,-50%);transform-origin:center;color:var(--paper);background-color:var(--green-2);border-radius:var(--round-border-radius);aspect-ratio:1;width:2.5rem;display:inline-grid;place-content:center;font-size:1.2rem;font-weight:700;border:solid var(--green-2) 2px}#projects{padding:1.4rem;display:grid;grid-template-columns:1fr auto}#projects h2{line-height:1;height:-moz-fit-content;height:fit-content}#projects button{margin-top:1rem;height:-moz-fit-content;height:fit-content}#projects li{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:.5rem;background-color:var(--paper);border:solid var(--green-2) 4px;border-radius:var(--normal-border-radius);margin-left:-2rem;margin-right:-2rem}:is(#projects li):first-child{margin-left:0;margin-left:initial}:is(#projects li):last-child{margin-right:0;margin-right:initial}:is(#projects li)>a{color:var(--heavy-green);text-decoration:none;width:100%;height:100%;display:grid;place-content:center}:is(#projects li) .logo-container{width:100%;display:grid;place-content:center;aspect-ratio:1;background-color:var(--heavy-paper)}:is(#projects li) strong{font-size:1.2rem;text-align:center;font-weight:700;color:var(--heavy-green);line-height:1}:is(#projects li) p{font-size:.9rem;padding:.1rem 1rem;margin:.5rem;border-radius:var(--round-border-radius);text-align:center;background-color:var(--green-2);text-wrap:nowrap}:is(#projects li):nth-child(3),:is(#projects li):not(:nth-child(3)):hover{z-index:1}:is(#projects li):after{content:"";top:0;position:absolute;background-color:var(--green-2);width:100%;height:100%;opacity:40%;display:none}#projects ul{display:grid;max-width:100%;width:-moz-fit-content;width:fit-content;margin:0 auto;overflow:hidden;height:-moz-fit-content;height:fit-content;grid-column-start:1;grid-column-end:3;grid-template-columns:repeat(3,minmax(auto,200px));padding:0}:is(#projects ul):has(li:hover)>li{position:relative}:is(:is(#projects ul):has(li:hover)>li):after{display:block}:is(#projects ul):hover li:hover{opacity:100%;z-index:2}:is(:is(#projects ul):hover li:hover):after{display:none}#games{padding-bottom:1.5rem;display:grid;grid-template-rows:auto 1fr}#games h2{text-align:center}#games ul{display:grid;color:var(--heavy-green);padding:0;margin-block:auto}:is(#games ul) li{margin-top:-.5rem;justify-self:center;padding:.5rem 1rem;width:-moz-fit-content;width:fit-content;display:flex;gap:.5rem;border:solid var(--green-1) 4px;align-items:center;background-color:var(--paper);border-radius:var(--normal-border-radius)}:is(#games ul) li:before{content:"";display:inline-block;width:1rem;aspect-ratio:1;border-radius:var(--round-border-radius);background-color:var(--green-2)}:is(#games ul) li:nth-child(2n){background-color:var(--heavy-paper)}:is(:is(#games ul) li:nth-child(2n)):before{background-color:var(--heavy-green)}#games p{text-align:center}#games button{margin:0 auto;display:flex;gap:.5rem;border:1px solid var(--paper)}#tech{padding:1rem}#tech ul{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:100%;padding:0 4rem}:is(#tech ul) li{display:flex;justify-content:center;flex-grow:1;padding:.5rem 1.5rem;border:solid var(--green-2) 2px;border-radius:var(--normal-border-radius);text-align:center;font-weight:700;max-width:200px}:is(#tech ul) li:nth-child(4n-1){background-color:var(--green-2);color:var(--paper);font-style:italic;border-radius:var(--round-border-radius)}:is(#tech ul) li:nth-child(4n){background-color:var(--green-1);color:var(--paper);border:none}:is(#tech ul) li:nth-child(4n-2){background-color:var(--green-1);color:var(--paper);font-style:italic}:is(#tech ul) li:nth-child(4n-3),:is(#tech ul) li:nth-child(4n){border-radius:var(--round-border-radius)}#hobbies{display:flex;flex-direction:column-reverse;align-items:center;padding-left:0;padding-right:0}#hobbies h2{text-align:center}#hobbies ul{display:flex;flex-direction:row;justify-content:center;padding-left:0;min-width:18rem}:is(#hobbies ul) li{display:flex;align-items:center;border-radius:var(--round-border-radius);padding:1rem;max-width:100%;color:var(--heavy-green);background-color:var(--heavy-paper);border:solid var(--green-1) 4px;text-wrap:nowrap}:is(:is(#hobbies ul) li) svg{width:2rem;min-width:2rem;aspect-ratio:1;fill:var(--heavy-green)}:is(#hobbies ul) li:not(:first-child){margin-left:-.5rem}:is(#hobbies ul):has(li:hover) li:not(:first-child){margin-left:-2rem}:is(#hobbies ul):has(li:hover) li:nth-child(2){z-index:1}:is(#hobbies ul) li:hover{z-index:2}:is(#hobbies ul) li:nth-child(2n){background-color:var(--green-2)}#blogs{background-color:var(--green-3);color:var(--paper);padding-top:6rem;display:grid;grid-template-columns:1fr auto;align-items:last baseline;position:relative}#blogs:before{content:"";width:clamp(300px,50%,500px);max-width:100%;overflow:hidden;height:90%;position:absolute;left:50%;transform-origin:center;transform:translate(-50%);background-image:url(/images/blog_background.svg);background-repeat:no-repeat;background-size:100%;opacity:50%;z-index:0}#blogs *{z-index:1}#blogs h2{margin-bottom:-.25rem;line-height:1}#archive{background-image:url(/images/archives_background.svg);background-repeat:no-repeat;background-size:auto 100%;display:grid;grid-template-columns:25% auto;place-items:center}#archive:before{content:"";display:block}#archive button{grid-column:2;width:-moz-fit-content;width:fit-content}#avatar{position:absolute;border:solid 1rem var(--heavy-green);overflow:hidden;background-color:var(--paper);border-radius:var(--round-border-radius);transform-origin:center;display:none;z-index:5}#avatar svg{padding-left:3%;transform:scale(1)}html{font-size:80%}body{width:100vw;overflow-y:auto;overflow-x:hidden;height:100vh;display:grid;justify-items:center;align-items:center;position:relative;box-sizing:border-box;grid-template-rows:1fr 1rem}body:after{content:"";min-height:1rem;width:1rem;display:block}main{display:grid;grid-gap:1rem;gap:1rem;width:min(100%,1300px);height:-moz-max-content;height:max-content;flex-grow:1;position:relative;padding:1rem;box-sizing:border-box;grid-template-areas:"about about about" "summary summary summary" "linkedin github mail" "tech tech tech" "projects projects projects" "games games games" "experience experience experience" "hobbies hobbies hobbies" "education education education" "blogs blogs blogs" "archive archive archive"}@media screen and (min-width: 700px){main{grid-template-areas:"about about about summary summary summary" "about about about summary summary summary" "linkedin linkedin github github mail mail" "projects projects projects games games games" "experience experience experience tech tech tech" "hobbies hobbies hobbies education education education" "blogs blogs blogs archive archive archive"}#avatar{width:10rem;left:50%;top:1rem;transform:translate(-50%);display:block}#about{padding-right:4rem}#summary{padding-left:5rem}}@media screen and (min-width: 1200px){main{height:clamp(100px,calc(100% - 2rem),900px);grid-template-areas:"about about about summary summary summary projects games" "about about about summary summary summary projects games" "about about about summary summary summary projects games" "about about about summary summary summary projects games" "linkedin linkedin github github mail mail projects games" "experience experience experience hobbies hobbies hobbies tech education" "experience experience experience blogs blogs blogs tech archive"}#avatar{left:50%;top:max(50%,30rem);width:15rem;transform:translate(-50%,-50%)}#tech{padding:2rem}#tech h2{text-align:right;line-height:1;padding-left:40%}#tech ul{padding:3rem 1rem 1rem;margin-top:2rem;background-color:var(--heavy-paper);border-radius:var(--normal-border-radius)}#about{padding-right:1rem}#summary{padding-left:1rem}}#about{grid-area:about}#summary{grid-area:summary}#linkedin{grid-area:linkedin}#github{grid-area:github}#mail{grid-area:mail}#experience{grid-area:experience}#education{grid-area:education}#projects{grid-area:projects}#games{grid-area:games}#tech{grid-area:tech}#hobbies{grid-area:hobbies}#blogs{grid-area:blogs}#archive{grid-area:archive}#hair-1,#hair-2,#hair-3{transform-box:fill-box;transform-origin:top center;animation-timing-function:ease-in-out;animation-iteration-count:infinite;animation-direction:alternate}#hair-1{animation-name:sway1;animation-duration:.5s;animation-delay:0s}#hair-2{animation-name:sway2;animation-duration:.7s;animation-delay:.3s}#hair-3{animation-name:sway3;animation-duration:1s;animation-delay:.6s}@keyframes sway1{0%{transform:rotate(0)}to{transform:rotate(-6deg)}}@keyframes sway2{0%{transform:rotate(0)}to{transform:rotate(-10.5deg)}}@keyframes sway3{0%{transform:rotate(0) translateY(-10px)}to{transform:rotate(10deg) translateY(-5px)}}#eyes{--dampen-value: .05;--dx: calc(var(--mouse-x-from-center) * var(--dampen-value));--dy: calc(var(--mouse-y-from-center) * var(--dampen-value));--max-dx: calc(clamp(-10%, var(--dx), 3%) - 15px) ;--max-dy: calc(clamp(-10%, var(--dy), 4%) - 8px) ;transform:translate(var(--max-dx),var(--max-dy))}#eyebrow{--dampen-value: .05;--dy: calc(var(--mouse-y-from-center) * var(--dampen-value));transform:translateY(calc(var(--dy) - 20px))}::backdrop{background-color:var(--heavy-green);opacity:50%}dialog{border:medium none currentcolor;border:initial;background-color:var(--paper);border-radius:var(--normal-border-radius);width:min(80vw,600px);padding:2rem;box-sizing:border-box}dialog h2{margin:0;font-family:Bebas Neue,system-ui,Avenir,Helvetica,Arial,sans-serif;font-size:3rem;color:var(--heavy-green);line-height:1}dialog h4{margin:0;font-size:1.4rem}dialog form[method=dialog]>button[type=submit]{float:right;padding-inline:.5rem 1rem;gap:.25rem}:is(dialog form[method=dialog]>button[type=submit]):before{content:"";width:1.2rem;aspect-ratio:1;background-image:url(/icons/close.svg);background-position:center;fill:var(--heavy-green);background-repeat:no-repeat;background-size:100% 100%;font-size:1rem;display:block}dialog section{margin-block:1rem 0}.skills-learned{list-style-type:none;padding-left:0;display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}.skills-learned li{border-radius:var(--round-border-radius);padding:.5rem 1rem;color:var(--heavy-green);font-size:.9rem;border:2px solid var(--heavy-green);font-weight:700}:is(#projects-dialog section)>ul{margin-bottom:2rem;padding-left:0;list-style:none}:is(:is(:is(#projects-dialog section)>ul) li) div[role=heading]{background-color:var(--heavy-paper);border-radius:var(--normal-border-radius);padding:1rem 2rem;display:flex;gap:1rem;align-items:center;justify-content:space-between}:is(:is(:is(:is(#projects-dialog section)>ul) li) div[role=heading]) img{width:3rem}:is(:is(:is(:is(#projects-dialog section)>ul) li) div[role=heading]) div{margin-right:auto}:is(:is(:is(:is(#projects-dialog section)>ul) li) div[role=heading]) strong{background-color:var(--green-3);padding:.25rem 1rem;display:block;width:-moz-fit-content;width:fit-content;font-size:.9rem;text-align:center;color:var(--paper);border-radius:var(--normal-border-radius)}:is(#projects-dialog section) div[role=contentinfo]{padding:1rem}:is(#games-dialog section)>ul{list-style:none;padding-left:0}:is(:is(:is(:is(#games-dialog section)>ul) li) div[role=heading]) h4{font-style:italic}:is(:is(:is(#games-dialog section)>ul) li) div[role=heading]{display:flex;justify-content:space-between;border-bottom:2px solid var(--green-3);gap:1rem}:is(:is(:is(:is(#games-dialog section)>ul) li) div[role=heading]) a{color:var(--heavy-green);padding:.5rem 1rem;text-decoration:underline;text-underline-offset:2px;font-weight:700}:is(:is(:is(#games-dialog section)>ul) li) div[role=contentinfo]{padding:1rem}button{transition:background-color .2s}.info-tile{transition:all .2s cubic-bezier(.075,.82,.165,1);transform:translateY(0)}.info-tile:hover{transform:translateY(-.5rem)}.info-tile:active{transform:translateY(0) scale(.98)}#hobbies ul li{width:2rem;transition:all .5s;gap:0}:is(#hobbies ul li) span{width:0%;overflow:hidden;transition:width .2s}:is(#hobbies ul li):hover{min-width:-moz-fit-content;min-width:fit-content;gap:.5rem}:is(#hobbies ul li):hover span{width:100%}#projects ul{overflow:visible;padding-bottom:2rem;padding-left:1.5rem;perspective:30rem}:is(#projects ul) li{transition:transform .2s ease-in-out;transform:rotateY(20deg)}:is(:is(#projects ul) li):first-child{transform:rotateY(20deg) translateZ(-10rem)}:is(:is(#projects ul) li):nth-child(2){transform:rotateY(20deg) translateZ(-3rem)}:is(:is(#projects ul) li):hover{transform:rotateY(0) translateZ(0)}:is(#projects ul):has(li:hover) li:not(:hover){transform:rotateY(10deg) translateZ(-10rem)}:is(:is(#projects ul):has(li:hover) li:not(:hover)):nth-child(2){transform:rotateY(10deg) translateZ(-5rem)}:is(:is(#projects ul):has(li:hover) li:not(:hover)):nth-child(3){transform:rotateY(10deg) translateZ(-2rem)}@media (prefers-reduced-motion: reduce){button,.info-tile{transition:none}#hobbies ul li{transition:none;width:-moz-fit-content;width:fit-content;gap:.5rem}:is(#hobbies ul li) span{width:auto;display:none}:is(#hobbies ul li):hover span{display:inline}:is(#projects ul) li{transition:none}}