:root{--ff-primary: system-ui, Avenir, Helvetica, Arial, sans-serif;--marquee-duration: 20s;--primary-fc: #dcdcdc;--bgc-transparent: rgba(0, 0, 0, .5);--bgc-dark-mode: rgb(23, 12, 12);--fw-regular: 400;--fw-semi-bold: 500;--fw-bold: 700;--fs-100: .7rem;--fs-200: .8125rem;--fs-300: .875rem;--fs-400: 1rem;--fs-500: 1.2rem;--fs-600: 1.5rem;--fs-700: 1.875rem;--fs-800: 2.5rem;--fs-900: 3.5rem;--size-100: .25rem;--size-200: .5rem;--size-300: .75rem;--size-400: 1rem;--size-500: 1.5rem;--size-600: 2rem;--size-700: 3rem;--size-800: 4rem;--size-900: 5rem;--maxw-handy: 600px;--maxh-handy: 932px;color:var(--primary-fc);background-color:var(--bgc-dark-mode)}:root h1{font-size:var(--fs-900)}:root h2{font-size:var(--fs-800)}:root h3{font-size:var(--fs-700)}:root h4{font-size:var(--fs-600)}:root h5{font-size:var(--fs-500)}:root p{font-size:var(--fs-400)}*,*:before,*:after{box-sizing:border-box}*{margin:0;padding:0;font:inherit}ul,ol{list-style:none}html:focus-within{scroll-behavior:smooth}html,body{min-height:100%;overflow-x:hidden;background-image:linear-gradient(to right,#0d0006,#03111d)}body{text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto;text-decoration:none;color:var(--primary-fc)}img,picture,svg{max-width:100%;display:block}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.background-processing{white-space:pre-line;background-color:var(--bgc-transparent);box-shadow:0 0 20px #000}.app{margin:0 auto;padding:var(--size-400) var(--size-300);max-width:var(--maxw-handy);max-height:var(--maxh-handy);display:flex;flex-direction:column;align-items:center;background-size:cover;background-position:center center;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.app h5{font-weight:700;color:#fff;text-align:center}.app .section-switch{width:80%}.app .labels{display:flex;justify-content:space-around;margin-top:var(--size-400)}.app .labels label{cursor:pointer}.app .labels h5{color:var(--primary-fc)}.app .labels h5:hover{color:#fff;scale:1.1}.app input[type=radio],.app .home-section,.app .contact-section{display:none}.app :has(#home:checked) label[for=home] h5{color:#fff;scale:1.1}.app :has(#home:checked) .content .home-section{display:block}.app :has(#contact:checked) label[for=contact] h5{color:#fff;scale:1.1}.app :has(#contact:checked) .content .contact-section{display:block}@media screen and (min-width: 600px){.app{min-height:100vh;width:100%;max-width:960px}.background-processing{margin:0 auto;width:80%}}.contact{padding:20px}.contact form{display:flex;flex-direction:column;gap:var(--size-300)}.contact .flex-item{display:flex;justify-content:space-between;gap:var(--size-400)}.contact label{flex:1}.contact input,.contact textarea{width:100%;height:2rem;padding:0 var(--size-200);border-radius:var(--size-300);border:0;outline:0}.contact textarea{height:5rem}.contact button{padding:var(--size-100) var(--size-300);border-radius:var(--size-200);border:0}.contact button:hover{cursor:pointer;color:#fff;background-color:var(--bgc-transparent)}@media screen and (min-width: 600px){form h5{display:none}}.storybook-button{padding:4px 12px;display:inline-block;cursor:pointer;border:0;border-radius:3em;height:32px;line-height:1;font-family:Nunito Sans,Helvetica Neue,Helvetica,Arial,sans-serif}.storybook-button--primary{background-color:#5a5a63;color:#fff}.storybook-button--secondary{box-shadow:#00000026 0 0 0 1px inset;background-color:transparent;color:#333}.storybook-button--small{font-size:12px}.storybook-button--medium{font-size:14px}.storybook-button--large{font-size:16px}.home{width:100%;padding:20px}.home nav{position:fixed;top:0;left:50%;transform:translate(-50%);padding:var(--size-300);width:100%;max-width:var(--maxw-handy);background-color:#000;z-index:1}.home nav a:hover{color:#ff0}.home nav ul{display:flex;justify-content:space-around;flex-wrap:wrap}.home h6{font-weight:700}.home .about-me{margin-top:40px;display:flex;justify-content:center;gap:5%;align-items:center}.home .text-container{flex:2.5;overflow-x:hidden}.home .title{padding-left:100%;width:fit-content;white-space:nowrap;color:#fff;animation:marquee 8s linear infinite}.home .self-introduction{height:fit-content;margin-top:var(--size-300);overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}.home .img-container{flex:1}.home .img-container img{border-radius:50%;object-fit:cover}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-100%)}}@media screen and (min-width: 600px){.home nav,.home h5.title{display:none}.home .about-me{gap:0;margin-top:1rem}.home .self-introduction{margin-top:0;height:fit-content}.home .img-container{flex:.6}.home .img-container img{border-radius:50%;object-fit:cover;height:10rem}}.projects{width:100%;padding:20px;box-sizing:border-box}.projects h6{color:#333}.projects h5.welcome{display:none}.projects .carousel-container{padding-top:2rem;width:100%;margin:0 auto;overflow:hidden;position:relative}.projects .carousel-container .carousel{padding-top:var(--size-400);height:25rem;display:flex;gap:20px;will-change:transform;position:relative}.projects .carousel-container .card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;transition:transform .3s;opacity:.5}.projects .carousel-container .card-Icon img{height:4rem}.projects .carousel-container .card.active{opacity:1;z-index:2}.projects .carousel-container .card.active .card-Icon img:hover{transform:scale(1.2);animation:paused}.projects .carousel-container .web-link{padding-top:var(--size-400);display:flex;align-items:center}.projects .carousel-container .web-link h6{padding-bottom:var(--size-200);color:#fff;animation:flicker .5s ease-in-out infinite alternate}.projects .carousel-container .web-link h6:hover{animation:paused;color:#ff0}.projects .carousel-container .card.active.no-transition{transition:none!important}.projects .carousel-container .card-details{position:absolute;top:30%;flex:1;display:flex;flex-direction:column;align-items:center;width:100%}.projects .carousel-container .card-details .image-display{opacity:.5;width:100%;height:14rem;border-radius:var(--size-400);background-size:cover;background-position:center}.projects .carousel-container .nav-button{top:56%}.projects .video-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:20}.projects .video-modal .video-container{width:100vw;height:100vh;display:flex;justify-content:center;align-items:center}.projects .video-modal video{height:100%;width:100%;object-fit:contain}.projects .video-modal .close-button{position:absolute;right:0%;transform:translate(20%);top:0%;background:transparent;border:none;cursor:pointer;z-index:1}.projects .video-modal .close-button svg{width:3.5vw}.projects .video-modal .close-button:hover{scale:1.2}@keyframes floatUpDown{0%{transform:translateY(0)}to{transform:translateY(-2rem)}}@keyframes flicker{0%{opacity:0}to{opacity:1}}@keyframes marquee{0%{transform:translate(0)}to{transform:translate(-105%)}}@media screen and (min-width: 600px){.projects h5{display:none}.projects h5.welcome{display:block;width:fit-content;white-space:nowrap;padding-left:105%;animation:marquee var(--marquee-duration) linear infinite}.projects .carousel-container .card-details{width:80%;top:22%}.projects .carousel-container .card-details .image-display{height:25rem}.projects .carousel-container .carousel{height:40rem}.projects .carousel-container .nav-button{top:52.5%}.projects .carousel-container .nav-button.prev{left:10%}.projects .carousel-container .nav-button.next{right:10%}}.nav-button{position:absolute;width:40px;height:40px;background:#ffffff4d;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:background .3s ease}.nav-button:hover{background:#ffffffe6}.nav-button.prev{left:0}.nav-button.play{left:50%;transform:translate(-50%)}.nav-button.next{right:0}.arrow{display:block;width:12px;height:12px;border-top:2px solid #333;border-left:2px solid #333}.arrow.left{transform:rotate(-45deg);margin-left:3px}.arrow.right{transform:rotate(135deg);margin-right:3px}.play-button{width:0;height:0;opacity:.8;border-left:18px solid #333;border-top:12px solid transparent;border-bottom:12px solid transparent;cursor:pointer;margin-left:5px}.play-button:hover{opacity:1}