.wrapper{padding:0 10rem}body{background-color:var(--main-color);width:100%;color:var(--word-color)}.theme-preload{z-index:-9999;width:0;height:0;position:absolute;overflow:hidden}header{z-index:1000;width:100%;height:8rem;padding:1rem 0;position:fixed}header .wrapper-container{width:100%;height:100%}header nav{-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);width:100%;max-width:120rem;height:100%;box-shadow:0 0 .5rem var(--shadow);background-color:#7979792c;border:1px solid #7a7a7aa2;border-radius:3rem;flex-direction:row;justify-content:space-between;align-items:center;margin:0 auto;padding:1rem 2rem;display:flex}nav .pages-links{width:45rem}nav .logo{-moz-column-gap:2rem;column-gap:2rem;display:flex}.logo .github-profile{width:3rem;height:3rem}.pages-nav{z-index:1000;width:fit-content;color:var(--word-color);justify-content:center;padding:1rem;display:flex;position:fixed;top:calc(50vh - 16rem)}.pages-nav nav{z-index:1000;background-color:var(--main-color-02);border-radius:1rem;justify-content:center;align-items:center;width:6rem;height:32rem;display:flex;position:relative;overflow:hidden}.pages-nav ul{z-index:1002;background-color:var(--main-color-02);background:radial-gradient(ellipse farthest-corner at center,var(--main-color-05)60%,var(--main-color-06)90%);border-radius:1rem;flex-direction:column;justify-content:space-between;align-items:center;width:96%;height:99%;padding:1rem 0;display:flex;position:relative}ul li{background-color:var(--main-color);border-radius:.8rem;justify-content:center;align-items:center;padding:.5rem;display:flex}ul li:hover{cursor:pointer}.pages-nav nav .spin{background-image:conic-gradient(var(--link-hover-color)40deg,var(--main-color-02)40deg,var(--main-color-02)180deg,var(--link-hover-color)180deg,var(--link-hover-color)220deg,var(--main-color-02)220deg);width:100%;height:1000%;animation:3s linear infinite rotate;position:absolute}@keyframes rotate{to{transform:rotate(-360deg)}}.pages-nav li a svg{color:var(--svg-color)}.burger-menu,#menu-icon{display:none}main{background-color:var(--main-color);z-index:0;width:100%;height:100vh;min-height:50rem;max-height:90rem;padding-top:6rem;position:relative;overflow:hidden}main:before{content:"";-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);z-index:2;background:0 0;width:100vw;height:100vh;min-height:75.6rem;padding-top:6rem;position:absolute;top:0;left:0}main:after{content:"";opacity:.9;z-index:3;background-position:50%;background-repeat:no-repeat;background-size:cover;width:100vw;height:100vh;min-height:75.6rem;padding-top:6rem;position:absolute;top:0;left:0}html[data-theme=dark] main:after{background-image:url(../media/grid-background-black.09503193.png)}html[data-theme=light] main:after{background-image:url(../media/grid-background-white.be0968f7.png)}main .background-gradient{z-index:1;opacity:.5;border-radius:50%;position:absolute;left:50%;transform:translate(-50%)}main .hero-section-contents{z-index:4;justify-content:center;align-items:center;width:100%;max-width:140rem;height:92%;margin:0 auto;padding:0 10rem;display:flex;position:relative}.hero-section-contents .contents-box{flex-direction:column;align-items:center;width:90rem;display:flex}.contents-box .big-words{text-align:center;width:80%;margin-top:5rem}.contents-box .small-words{text-align:center;width:70%;color:var(--word-color);margin-top:4rem;margin-bottom:2rem}.contents-box .buttons-container{left:7rem}section.projects{background-color:var(--main-color);width:100%;height:fit-content;color:var(--word-color)}.projects .projects-contents{width:100%;max-width:120rem;height:fit-content;margin:0 auto;padding:5rem 0 10rem}.projects-contents .project-toggle-container label{background-color:var(--main-color-01);cursor:pointer;border:1px solid var(--link-hover-color);text-align:right;border-radius:2rem;justify-content:space-between;align-items:center;width:25rem;height:4rem;transition:all .5s;display:flex;position:relative}.project-toggle-container label p{z-index:2;color:var(--text-color-02);margin:0 2rem}.project-toggle-container label:after{content:"";background:var(--link-hover-color);width:12rem;height:3.4rem;color:var(--text-color-02);border-radius:6rem;place-content:center;font-family:Twk,Arial,Helvetica,sans-serif;font-size:1.6rem;transition:all .5s;display:grid;position:absolute;top:.2rem;left:.3rem;box-shadow:0 2px 5px #0003}.project-toggle-container input{visibility:hidden;width:0;height:0}.project-toggle-container input:checked+label:after{width:11rem;left:24.6rem;transform:translate(-100%)}.project-toggle-container input:checked+label #checked,.project-toggle-container input:not(:checked)+label #unchecked{color:var(--main-color-03)}.project-toggle-container label:active:after{width:13rem}.project-toggle-container input:checked+label:active:after{width:12rem}.project-toggle-container .background{z-index:-1;width:100%;height:100vh;position:absolute;top:0;left:0}.project-toggle-container input:checked+label+.background{background-color:#242424}.projects-contents .heading-contents{flex-direction:column;align-items:center;row-gap:1rem;width:100%;height:fit-content;display:flex}.projects-contents .projects-display{flex-direction:column;align-items:center;row-gap:7rem;width:100%;height:fit-content;margin-top:6rem;padding:0 3rem;display:flex}.projects-display .project-box{background-color:var(--main-color-02);width:100%;height:50rem;box-shadow:0 0 1rem var(--shadow);border-radius:4rem;padding:2rem;position:sticky;top:7rem}.project-box .project-box-contents{border-radius:0 3rem 3rem;flex-direction:row;width:100%;height:100%;display:flex;overflow:hidden}.project-box .description{flex-direction:column;justify-content:space-between;width:45%;padding-bottom:2rem;padding-right:2rem;display:flex;position:relative}.description .projects-ongoing-watermark{text-align:center;width:100%}.projects-ongoing-watermark h2{color:var(--water-mark-color);font-size:5rem}.description .top-description-contents{width:100%;height:fit-content}.top-description-contents .project-title{-moz-column-gap:2rem;flex-direction:row;align-items:center;column-gap:2rem;width:100%;height:fit-content;margin-bottom:1rem;display:flex}.project-title .project-logo{width:4.5rem;height:4.5rem}.top-description-contents .description-of-project{width:100%;height:fit-content}.top-description-contents .project-keywords{-moz-column-gap:.5rem;flex-flow:wrap;column-gap:.5rem;width:100%;height:fit-content;padding:1rem 0;display:flex}.project-keywords .keyword{border:1px solid var(--word-color);border-radius:2rem;width:fit-content;min-width:fit-content;height:fit-content;padding:.2rem .7rem}.bottom-description-contents .skill-stack-container{-moz-column-gap:.5rem;flex-flow:wrap;gap:.5rem;width:100%;height:fit-content;padding:1rem 0;display:flex}.skill-stack-container .skill{border:1px solid var(--word-color);border-radius:2rem;width:fit-content;height:fit-content;padding:.2rem .7rem}.bottom-description-contents .visit-site-cta{-moz-column-gap:.5rem;justify-content:space-between;align-items:center;column-gap:.5rem;width:100%;padding:1rem 0 0;display:flex}.visit-site-cta h5{color:var(--main-color-04)}.visit-site-cta .cta-container{-moz-column-gap:.5rem;flex-direction:row;column-gap:.5rem;width:fit-content;display:flex}.visit-site-cta .link{width:2.4rem;height:2.4rem}.project-box .media{background-color:var(--main-color);align-items:center;width:55%;display:flex}section.about{background-color:var(--main-color-02);width:100%;height:fit-content;color:var(--word-color)}.about .about-section-contents{width:100%;max-width:120rem;height:fit-content;margin:0 auto;padding:5rem 0 10rem}.about-section-contents .heading{text-align:center;width:100%;margin-bottom:5rem}.about-section-contents .personal-info-container{flex-direction:row;justify-content:space-between;width:100%;height:fit-content;display:flex}.about-section-contents .left-picture{border-radius:3rem;justify-content:center;align-items:center;width:35rem;height:48rem;display:flex;position:relative;overflow:hidden}.about-section-contents .left-picture .spin{background-image:conic-gradient(var(--link-hover-color)40deg,var(--main-color-02)40deg,transparent 180deg,var(--link-hover-color)180deg,var(--link-hover-color)220deg,var(--main-color-02)220deg);width:150%;height:150%;animation:3s linear .75s infinite rotate;position:absolute}.about-section-contents .left-picture .img{content:"";background-color:var(--main-color);background-image:url(../media/portfolio-about-pic.41aab675.jpg);background-position:50%;background-repeat:no-repeat;background-size:cover;border-radius:2.8rem;width:98%;height:98.6%;position:absolute}.about-section-contents .right-contents{width:calc(100% - 39rem);height:fit-content;box-shadow:0 0 .5rem var(--shadow);border:3px solid var(--main-color-06);background-color:var(--main-color-07);border-radius:3rem;flex-direction:column;justify-content:space-between;padding:.7rem;display:flex}.right-contents .personal-info{box-shadow:var(--shadow-02);text-wrap:wrap;background:var(--bg-texture-02);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:var(--border-texture-02);border-radius:2rem;padding:2rem}.right-contents .personal-info>h3{margin-bottom:2rem}.right-contents .stack-and-contact-box{width:100%;height:fit-content;padding:2rem}.stack-and-contact-box .stack-box{-moz-column-gap:1rem;column-gap:1rem;width:100%;margin-top:3rem;margin-bottom:2rem;display:flex}.stack-and-contact-box h5{margin-bottom:1rem}.stack-box .stack{border-radius:1rem;width:4rem;height:4rem}.stack-box .stack:first-child{background-image:url(../media/html-logo.989baa9c.png);background-position:50%;background-repeat:no-repeat;background-size:cover}.stack-box .stack:first-child:hover{background-size:110%}.stack-box .stack:nth-child(2){background-image:url(../media/css-logo.fefee3d4.png);background-position:50%;background-repeat:no-repeat;background-size:cover}.stack-box .stack:nth-child(2):hover{background-size:110%}.stack-box .stack:nth-child(3){background-image:url(../media/js-logo.031f5fb3.png);background-position:50%;background-repeat:no-repeat;background-size:cover}.stack-box .stack:nth-child(3):hover{background-size:110%}.stack-box .stack:nth-child(4){background-image:url(../media/java-logo.7e1c32f6.png);background-position:50%;background-repeat:no-repeat;background-size:cover}.stack-box .stack:nth-child(4):hover{background-size:110%}.stack-box .stack:nth-child(5){background-image:url(../media/mysql-logo.1b289846.png);background-position:50%;background-repeat:no-repeat;background-size:cover}.stack-box .stack:nth-child(5):hover{background-size:110%}.stack-box .stack:nth-child(6){background-image:url(../media/react-native-logo.03b8afb7.png);background-position:50%;background-repeat:no-repeat;background-size:150%}.stack-box .stack:nth-child(6):hover{background-size:160%}.stack-box .stack:nth-child(7){background-image:url(../media/react-logo.fe5ab668.png);background-position:50%;background-repeat:no-repeat;background-size:140%}.stack-box .stack:nth-child(7):hover{background-size:150%}.stack-box .stack:nth-child(8){background-image:url(../media/nextjs-logo.dae0b0e5.webp);background-position:50%;background-repeat:no-repeat;background-size:cover}.stack-box .stack:nth-child(8):hover{background-size:140%}.stack-box .stack:nth-child(9){background-image:url(../media/tailwindcss-icon.ba5f8e9f.webp);background-position:50%;background-repeat:no-repeat;background-size:130%}.stack-box .stack:nth-child(9):hover{background-size:140%}.services{background-color:var(--main-color);width:100%;height:fit-content;color:var(--word-color)}.services .services-contents{width:100%;max-width:140rem;height:fit-content;margin:0 auto;padding:5rem 0 10rem}.services-contents .services-contents-heading{text-align:center;width:100%;height:fit-content;margin-bottom:5rem}.services-contents .services-container{-moz-column-gap:3rem;grid-template-columns:repeat(auto-fit,31rem);justify-content:center;gap:3rem;width:100%;height:fit-content;display:grid}.services-container .services-box{background-color:var(--main-color-02);border-radius:3rem;width:31rem;height:62rem;padding:1rem}.services-box .services-container-contents{border-radius:2rem;width:100%;height:100%;overflow:hidden}.services-container-contents .services-video-container{background-color:#0ff;width:100%;height:40rem;position:relative;overflow:hidden}.services-video-container video{object-fit:cover;width:100%;height:100%}.services-video-container #frontend{position:absolute;top:-8.2rem}.services-description .services-desc-heading{-moz-column-gap:2rem;flex-direction:row;justify-content:center;column-gap:2rem;width:100%;padding:1rem 0;display:flex}.services-description .services-desc-body{padding:0 1rem 1rem}.exploration{background-color:var(--main-color-02);width:100%;height:fit-content;color:var(--word-color);padding:5rem 10rem;overflow:hidden}.exploration .exploration-contents{width:100%;max-width:140rem;height:fit-content;margin:0 auto}.exploration-contents .exploration-heading{text-align:center;width:100%;height:fit-content;margin-bottom:5rem}.exploration-carousel{justify-content:center;align-items:center;gap:2rem;width:100%;max-width:90rem;margin:0 auto;padding:2rem 0;display:flex;position:relative}.carousel-btn{border:1px solid var(--main-color-06);background-color:var(--main-color-01);width:4.4rem;height:4.4rem;color:var(--word-color);cursor:pointer;z-index:10;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;transition:all .3s;display:flex}.carousel-btn:hover{background-color:var(--link-hover-color);color:#fff;border-color:var(--link-hover-color);transform:scale(1.1)}.carousel-btn:active{transform:scale(.95)}.carousel-track{perspective:1200px;flex-shrink:0;width:70rem;height:52rem;position:relative}.carousel-item{transform-style:preserve-3d;transition:all .6s cubic-bezier(.23,1,.32,1);position:absolute;top:50%;left:50%}.carousel-item--center{z-index:5;opacity:1;transform:translate(-50%,-50%)translateZ(0)rotateY(0)scale(1)}.carousel-item--left{z-index:3;opacity:.85;transform:translate(-135%,-50%)translateZ(-80px)rotateY(25deg)scale(.85)}.carousel-item--right{z-index:3;opacity:.85;transform:translate(35%,-50%)translateZ(-80px)rotateY(-25deg)scale(.85)}.carousel-item--far-left{z-index:1;opacity:0;pointer-events:none;transform:translate(-250%,-50%)translateZ(-200px)rotateY(40deg)scale(.6)}.carousel-item--far-right{z-index:1;opacity:0;pointer-events:none;transform:translate(150%,-50%)translateZ(-200px)rotateY(-40deg)scale(.6)}.carousel-item--hidden{z-index:0;opacity:0;pointer-events:none;transform:translate(-50%,-50%)translateZ(-300px)scale(.4)}.carousel-slide{-webkit-user-select:none;user-select:none;background-color:gray;border-radius:1.6rem;justify-content:center;align-items:center;width:30rem;height:55rem;display:flex;position:relative;overflow:hidden;box-shadow:0 10px 40px #00000040}.carousel-slide-video-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}.carousel-slide-video-container video,.carousel-slide-video-container img{object-fit:cover;width:100%;height:100%}.carousel-slide-number{color:#fff6;font-size:8rem;font-style:italic;font-weight:700}footer{background-color:var(--main-color);border-top:1px solid var(--main-color-06);width:100%;color:var(--word-color);padding:10rem}footer .footer-contents{-moz-column-gap:2rem;flex-wrap:wrap;justify-content:space-between;gap:2rem;display:flex}footer .sm-links{-moz-column-gap:1rem;column-gap:1rem;width:fit-content;margin-top:1rem;display:flex}.sm-links .sm{cursor:pointer;color:#000;background-color:#fff;border-radius:1rem;justify-content:center;align-items:center;width:4rem;height:4rem;transition:all .15s;display:flex}.sm .github-profile{width:3rem;height:3rem}.sm-links .sm:hover{box-shadow:.2rem .2rem 1rem #177afc,-.2rem -.2rem 1rem #3d32c2}.footer-contents .footer-contact h6{margin-bottom:1rem}
@media only screen and (max-width:1200px){.projects-display .project-box{width:90%;height:fit-content}.project-box .project-box-contents{border-radius:2rem;flex-direction:column-reverse}.project-box .description{flex-direction:column;row-gap:2rem;width:100%;padding-right:0;display:flex}.description .top-description-contents{width:90%;margin-top:2rem}.project-title .project-logo{width:4.8rem;height:4.8rem}.top-description-contents .description-of-project{width:100%;height:fit-content}.top-description-contents .project-keywords{row-gap:.5rem}.bottom-description-contents .skill-stack-container{width:100%}.project-box .media,.media a img{aspect-ratio:2;width:100%}}@media only screen and (max-width:1100px) and (orientation:landscape){.right-contents .personal-info{width:100%;margin-left:0}}@media only screen and (max-width:1121px){.about-section-contents .personal-info-container{align-items:stretch}.about-section-contents .right-contents{height:-moz-fit-content}.right-contents .stack-and-contact-box{margin-top:4rem}.stack-and-contact-box .stack-box{flex-wrap:wrap;gap:1rem;display:flex}}@media only screen and (max-width:944px){.wrapper{padding:0 5rem}.about-section-contents .left-picture{aspect-ratio:5/7;width:30rem;position:relative}.about-section-contents .right-contents{flex-direction:column;justify-content:space-between;width:calc(100% - 32rem);display:flex}.right-contents .personal-info{width:100%}}@media only screen and (max-width:853px){.wrapper{padding:0 4rem}.contents-box .big-words{text-align:center;width:100%}.about-section-contents .personal-info-container{flex-direction:column;align-items:center}.about-section-contents .left-picture{width:30rem;height:30rem;position:relative}.about-section-contents .right-contents{row-gap:2rem;width:100%;margin-top:3rem}.right-contents .personal-info{width:100%;margin-left:0}.services-contents .services-container{-moz-column-gap:2rem;column-gap:2rem}}@media only screen and (max-width:820px){.carousel-track{width:32rem;height:52rem}.carousel-item--left,.carousel-item--right{opacity:0;pointer-events:none}.carousel-item--center{transform:translate(-50%,-50%)translateZ(0)rotateY(0)scale(1)}.exploration-carousel{gap:1rem}}@media only screen and (max-width:721px){.wrapper{padding:0 3rem}h1{font-size:4.5rem;line-height:5.5rem}.hero-section-contents .contents-box{flex-direction:column;align-items:center;width:100%;display:flex}.contents-box .big-words{text-align:center;width:100%}.contents-box .small-words{width:90%;margin-top:4rem;margin-bottom:2rem}.right-contents .personal-info{width:100%}footer{padding:10rem 5rem}}@media only screen and (max-width:667px){.pages-nav{position:fixed;top:7rem}.pages-nav nav{background-color:var(--main-color-06);align-items:center;width:4rem;height:4rem;display:flex}.pages-nav ul{display:none}.pages-nav nav .spin{background-image:none;width:100%;height:1000%;animation:3s linear infinite rotate;position:absolute}.pages-nav nav #menu-icon{z-index:10;color:var(--main-color-04);display:block;position:relative}.pages-nav .burger-menu{transition:all .25s;display:none}.burger-menu.active{background-color:var(--main-color-06);z-index:1010;height:fit-content;box-shadow:0 0 .5rem var(--shadow);border-radius:1rem;display:block;position:absolute;left:5.2rem}.burger-menu ul{z-index:1002;background-color:var(--main-color-02);border-radius:1rem;flex-direction:column;justify-content:space-between;align-items:center;row-gap:1rem;width:13rem;height:99%;margin:0 1rem;padding:1rem .5rem;display:flex;position:relative}.burger-menu ul li{background-color:var(--main-color-06);width:100%;box-shadow:0 0 .2rem var(--shadow);border-radius:.8rem;justify-content:center;align-items:center;padding:.5rem;display:flex}ul li:hover{cursor:pointer}.burger-menu ul li a{background-color:var(--main-color-06);justify-content:space-between;width:100%;padding-right:1rem;display:flex}.projects-contents .projects-display{padding:0}.right-contents .personal-info{width:100%;margin-left:0}.buttons-container a .btn-01{padding:.8rem 1.2rem}.buttons-container a .btn-02{padding:.8rem 1rem}}@media only screen and (max-width:593px){.wrapper{padding:0 1rem}h1{font-size:5rem;line-height:6rem}h2{font-size:3.5rem;line-height:4.2rem}h3{font-size:3rem;line-height:4.2rem}h4{font-size:2.7rem;line-height:3.5rem}h5{font-size:2.3rem;line-height:2.8rem}h6{font-size:1.9rem;line-height:2.4rem}.buttons-container{-moz-column-gap:1rem;flex-wrap:wrap;gap:1rem;left:0}.buttons-container .social-media{flex-basis:100%}.buttons-container .social-media .icon{position:absolute;top:0;left:0}.social-media .social-media-handles a:first-child .sm{top:0;left:0}.social-media .social-media-handles a:nth-child(2) .sm,.social-media .social-media-handles a:nth-child(3) .sm{top:0;left:0}.buttons-container .social-media:hover .social-media-handles a:first-child .sm{top:1rem;left:7rem}.buttons-container .social-media:hover .social-media-handles a:nth-child(2) .sm{top:6rem;left:6rem}.buttons-container .social-media:hover .social-media-handles a:nth-child(3) .sm{top:7rem;left:0}main .wrapper{padding:0 1rem}.projects .small-words{padding:0 1rem}.projects-display .project-box{padding:1rem}footer{padding:10rem 3rem}}@media only screen and (max-width:437px){.buttons-container .social-media{width:12rem;height:12rem;margin-left:2rem;position:relative}.about-section-contents .right-contents{height:-moz-fit-content}.right-contents .stack-and-contact-box{margin-top:4rem}.stack-and-contact-box .stack-box{flex-wrap:wrap;gap:1rem;display:flex}}@media only screen and (max-width:350px){.projects .wrapper{padding:0 1rem}}