:root{font-family:Chakra Petch,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;background:linear-gradient(90deg,#0e133d,#1b5973 60%,#1b5973 100%,#020024);background:#0e133d;background:linear-gradient(90deg,#0e133d,#174355 60%,#174355 100%,#020024);background:radial-gradient(circle at 50% 50%,#0c185b,#111e4d,#141f3f,#151c32,#131824,#0e1117,#060708,#000);background:radial-gradient(circle at 50% 50%,#290b5b,#26164d,#23193f,#1e1932,#181625,#111017,#070708,#000);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#fff;text-decoration:inherit}body{margin:0;display:flex;justify-content:center;min-width:320px;min-height:100vh}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:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.chakra-petch-light{font-family:Chakra Petch,sans-serif;font-weight:300;font-style:normal}.chakra-petch-regular{font-family:Chakra Petch,sans-serif;font-weight:400;font-style:normal}.chakra-petch-medium{font-family:Chakra Petch,sans-serif;font-weight:500;font-style:normal}.chakra-petch-semibold{font-family:Chakra Petch,sans-serif;font-weight:600;font-style:normal}.chakra-petch-bold{font-family:Chakra Petch,sans-serif;font-weight:700;font-style:normal}.chakra-petch-light-italic{font-family:Chakra Petch,sans-serif;font-weight:300;font-style:italic}.chakra-petch-regular-italic{font-family:Chakra Petch,sans-serif;font-weight:400;font-style:italic}.chakra-petch-medium-italic{font-family:Chakra Petch,sans-serif;font-weight:500;font-style:italic}.chakra-petch-semibold-italic{font-family:Chakra Petch,sans-serif;font-weight:600;font-style:italic}.chakra-petch-bold-italic{font-family:Chakra Petch,sans-serif;font-weight:700;font-style:italic}@keyframes slide-down{0%{transform:translateY(-50%);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes slide-right{0%{transform:translate(-20%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes curtain-slide{0%{transform:translate(-100%)}to{transform:translate(0)}}#root{max-width:50rem;width:100%;display:flex;flex-direction:column;gap:2rem;padding:2rem;padding-bottom:0}.home-contents{display:flex;flex-direction:column}.navbar{display:flex;flex-direction:column;align-items:center;margin-bottom:55px}.navbar a.selected{color:#fff;padding:10px 15px}.navbar a.unselected{color:#aaa;padding:10px 15px}.navbar a.unselected:hover{color:#fff}.site-footer{padding:2em 1em 1em;text-align:center}.footer-content{display:flex;flex-direction:column;align-items:center;gap:.8em;padding-top:1em;margin-bottom:1em;border-top:1px solid #333;border-top:1px solid white}.contact-info,.footer-links{display:flex;flex-direction:row;align-items:center}.contact-info h3,.footer-links h3{margin-bottom:.5em}.contact-info a,.footer-links ul li a{color:#fff;text-decoration:none;margin:.3em;font-size:1.2em;transition:color .3s}.contact-info a:hover,.footer-links ul li a:hover{color:#646cff}.contact-info i{font-size:1.5em}.footer-links ul{display:flex;flex-direction:row;list-style:none;padding:0;margin:0}.footer-links ul li{margin:.3em}.footer-bottom{font-size:.9em;border-top:1px solid #333;border-top:1px solid white;padding-top:1em}.home-contents{display:flex;flex-direction:column;padding:0 2em 1em;gap:3em}@media (max-width: 800px){.home-contents{padding:0 1em 1em}}.home-contents h1{font-size:3em}.see-more{align-self:flex-end;color:#aaa;animation:slide-right 1s ease-out forwards;animation-delay:1.4s;opacity:0}.see-more:hover{color:#fff}.hero{display:flex;flex-direction:column;align-items:flex-start;gap:2em;width:100%;max-width:1200px;position:relative}.hero>.intro-container{overflow:hidden;display:flex;flex-direction:column}.hero>.intro-container>h2,.hero>.intro-container>span{display:inline-block;margin-top:0;margin-bottom:0;animation:curtain-slide 1s ease-out forwards}.hero>.intro-container>span{color:#aaa}.image-text-section img{border-radius:50%;margin-right:20px;object-fit:cover}img#home-img{width:180px;height:180px;border-radius:10%;box-shadow:0 0 #000000bf;z-index:1;animation:slide-right 1s ease-out forwards;animation-delay:.5s;opacity:0}.hero-text-content{animation:slide-right 1s ease-out forwards;animation-delay:.5s;opacity:0}.description-section{display:flex;flex-direction:column;gap:1em}.description-section p{margin:0;animation:slide-down 1s ease-out forwards;animation-delay:.5s;opacity:0}.home-projects{display:flex;flex-direction:column}.home-projects>h1{margin-bottom:0;animation:slide-right 1s ease-out forwards;animation-delay:1s;opacity:0}.home-projects>p{animation:slide-right 1s ease-out forwards;animation-delay:1s;opacity:0}.home-projects>a{align-self:flex-end}.home-projects>div{display:flex;flex-direction:column;width:100%;flex-grow:1}.home-projects-display{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0em;width:100%}.mini-project{display:flex;justify-content:center;align-items:center;position:relative;width:calc(50% - 3.2em);height:250px;padding:1em;margin:.5em;border-radius:1em;border:1px solid hsl(240,6%,20%);background-color:#2e2f33e6;box-shadow:0 2px 4px #0003;color:#fff;text-align:left;transition:background-color .3s;animation:slide-right 1s ease-out forwards;animation-delay:1s;opacity:0}.mini-project div{display:flex;flex-direction:column;align-items:flex-start}.mini-project h2{margin:0}.mini-project img{max-width:230px;object-fit:contain}.mini-project:nth-child(1){animation-delay:1s}.mini-project:nth-child(2){animation-delay:1.2s}.mini-project:nth-child(3){animation-delay:1.4s}.mini-project:hover{background-color:#333;border:1px solid #646cff;transition:background-color .3s,border .3s;box-shadow:0 4px 8px #0006}.mini-project:hover h2{color:#646cff}.mini-project-content h2,.mini-project-content div{position:absolute;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);margin:0;padding:.5rem 1rem 0rem;left:0rem}.mini-project-content h2{top:.5rem;border-radius:.5rem}.mini-project-content div{bottom:.5rem;border-radius:.5rem;width:calc(100% - 2rem);display:flex;flex-direction:row;align-items:center}.mini-project-technologies{display:flex;flex-direction:row;align-items:center;justify-content:flex-end}.mini-project-technologies img,.mini-project-technologies svg{max-width:20px;margin-left:.5rem}.github-link-home{position:relative;display:inline-block;font-size:20px;margin:0;z-index:99}.github-link-home:hover:after{content:"View on GitHub";position:absolute;bottom:100%;transform:translate(-25%);background-color:#333333c2;color:#fff;padding:1px 5px;border-radius:5px;white-space:nowrap;font-size:.7em;opacity:0;transition:opacity .3s}.github-link-home:hover:after{opacity:1}@media (max-width: 1100px){.mini-project{width:calc(50% - 3.2em)}}@media (max-width: 800px){.mini-project{width:calc(100% - 3em)}}#oktopus-api{max-width:200px;width:250px;height:250px}#vhdl_to_java{max-width:300px;width:170px;height:170px}.home-posts{display:flex;flex-direction:column}.home-posts>h1{margin-bottom:0;display:flex;animation:slide-right 1s ease-out forwards;animation-delay:1s;opacity:0}.home-posts>p{animation:slide-right 1s ease-out forwards;animation-delay:1s;opacity:0}.blog-posts{margin-top:.5em;margin-left:0;padding-left:0;list-style:none}.blog-post{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:1em;animation:slide-right 1s ease-out forwards;animation-delay:1s;opacity:0}.blog-post span{color:#aaa}.blog-post:nth-child(1){animation-delay:1s}.blog-post:nth-child(2){animation-delay:1.2s}.blog-post:nth-child(3){animation-delay:1.4s}.home-post-title{margin-top:.2em;margin-bottom:0}.home-post-title a:hover{color:#646cff}.home-post-description{margin-top:.2em}.projects{display:flex;flex-direction:column;padding:0 1.5em 1em}.projects>h1{margin:0}.projects-display{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;max-width:64rem;margin:0 auto;padding:1rem 0rem}.project{overflow:visible;flex:1 1 calc(50% - 1rem);max-width:calc(50% - 1rem);height:360px;border-radius:1rem;border:1px solid hsl(240,6%,20%);background-color:#2e2f33e6;box-shadow:0 2px 4px #0003;overflow:hidden;opacity:0;display:flex;justify-content:center;align-items:center;position:relative;z-index:1}.project img{max-width:300px;object-fit:contain}.project:hover{background-color:#333;border:1px solid #646cff;transition:background-color .3s,border .3s;box-shadow:0 4px 8px #0006}.project:hover h2{color:#646cff}.project#soon:hover{border:1px solid hsl(240,6%,20%);background-color:#2e2f33e6}.project-content>h2,.project-content>div{position:absolute;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.8);margin:0;padding:.5rem 1rem;left:0rem;z-index:1}.project-content>h2{top:.5rem;border-radius:.5rem}.project-content>p{position:absolute;top:2.2em;left:1em}.project-content>img{position:absolute;top:50%;left:50%;transform:translate(-50%,-40%)}.project-content>img#oktopus-api{transform:translate(-50%,-45%)}.project-content div{bottom:.5rem;border-radius:.5rem;width:calc(100% - 2rem);display:flex;flex-direction:row;align-items:center}.project-technologies{display:flex;flex-direction:row;align-items:center;justify-content:end}.project-technologies img,.project-technologies svg{max-width:20px;margin-left:.5rem;justify-items:end}.project-links>a{position:relative;overflow:visible}.github-link{position:relative;display:inline-block;font-size:20px;margin:0}.github-link:hover:after{content:"View on GitHub";position:absolute;bottom:100%;transform:translate(-25%);background-color:#333333c2;color:#fff;padding:1px 5px;border-radius:5px;white-space:nowrap;font-size:.7em;opacity:0;transition:opacity .3s}.github-link:hover:after{opacity:1}#express{fill:#fff}@media (max-width: 768px){.project{flex:1 1 100%;max-width:100%}}#vhdl_to_java_big{max-width:250px}.project.disabled{pointer-events:none;opacity:.7}.project-page{display:flex;padding:0 1.5em}.project-page h1{margin-top:0;margin-bottom:0}.project-page-left-navbar,.project-page-right-navbar{display:flex;flex-direction:column;flex-shrink:0;width:95.59px}.project-page-left-navbar div,.project-page-right-navbar div{display:flex;flex-direction:column;margin-top:20px}.project-page-left-navbar a,.project-page-right-navbar a{margin-top:10px;color:#aaa;position:sticky}.project-page-left-navbar a:hover,.project-page-right-navbar a:hover{color:#fff;cursor:pointer}.project-page-left-navbar span,.project-page-right-navbar span{font-weight:400;font-size:.8em;color:#aaa}.project-page-content{display:flex;flex-direction:column;margin-left:40px;margin-right:20px}.project-page-content img{max-width:200px;height:auto;align-self:center;margin-top:20px;margin-bottom:20px}.project-page-content h2{margin-bottom:0}.project-page-content ul{padding-left:20px}.project-page-content>img#vhdl_to_java_big{max-width:300px}.project-page-content>img#shape-editing-web-app{max-width:450px}.feature{margin:5px}.technologies{display:flex}.technologies span{margin-right:10px}.project-page-right-navbar{margin-left:auto}.project-page-right-navbar a{margin-top:0;font-size:1.5em;color:#aaa}@media (max-width: 800px){.project-page-left-navbar,.project-page-right-navbar{display:none}.project-page{padding:0 1.5em 1em}.project-page-content{margin-left:0;margin-right:0}}.posts-page{display:flex;flex-direction:column;padding:0 1.5em 1em;flex-grow:1}.posts-page span{color:#aaa}.post-page{display:flex;flex-direction:column;align-items:flex-start;flex-grow:1;padding:0 1.5em 1em}.post-page h1{margin-top:0;margin-bottom:0}.post-page span{margin-top:.5em;margin-bottom:18.496px;color:#aaa}.mini-post{opacity:0}.about-page{display:flex;flex-direction:column;padding:0 10em 1em;gap:2em;flex-grow:1}@media (max-width: 1200px){.about-page{padding:0 5em 1em}}@media (max-width: 768px){.about-page{padding:0 2em 1em}}@media (max-width: 480px){.about-page{padding:0 1em 1em}}.image-text-section{display:flex;align-items:flex-start}.image-text-section img{width:150px;height:150px;animation:slide-right 1s ease-out forwards;opacity:0}.image-text-section h2{margin-top:0;margin-bottom:0;animation:slide-right 1s ease-out forwards;opacity:0}.image-text-section div{display:flex;flex-direction:column;height:100%}.text-content div{animation:slide-right 1s ease-out forwards;opacity:0}.image-text-section span{margin-top:0;color:#aaa}.image-text-section div.contact-info-about{display:flex;flex-direction:row;align-items:end;gap:1em;margin-bottom:1em}.image-text-section div.contact-info-about a{color:#aaa;text-decoration:none;font-size:1.3em;transition:color .3s}.image-text-section div.contact-info-about a:hover{color:#646cff}.content-section{display:flex;flex-direction:column;gap:.5em}.content-section h2{margin-top:0;margin-bottom:0;animation:slide-down 1s ease-out forwards;opacity:0}.content-section h3{margin-top:0;margin-bottom:.2em;color:#aaa}.content-section p{color:#aaa;margin-top:.2em;margin-bottom:0}.content-section div{display:flex;flex-direction:column;margin-bottom:1em}.content-section div:nth-child(2){animation:slide-down 1s ease-out forwards;animation-delay:1s;opacity:0}.content-section div:nth-child(3){animation:slide-down 1s ease-out forwards;animation-delay:1.2s;opacity:0}