@import"https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;500;700&display=swap";html{box-sizing:border-box}:root{--clr-neutral-900: hsl(227, 75%, 14%);--clr-neutral-800: hsl(226, 25%, 17%);--clr-neutral-700: hsl(225, 23%, 24%);--clr-neutral-600: hsl(226, 11%, 37%);--clr-neutral-300: hsl(0, 0%, 78%);--clr-neutral-200: hsl(217, 61%, 90%);--clr-neutral-100: hsl(0, 0%, 93%);--clr-neutral-0: hsl(200, 60%, 99%);--clr-point-300: hsl(220, 90%, 60%);--clr-point-200: hsl(205, 85%, 70%);--clr-point-100: hsl(210, 30%, 85%);--clr-red-400: hsl(3, 86%, 64%);--clr-red-500: hsl(3, 71%, 56%);--clr-red-700: hsl(3, 77%, 44%);--gradient-bg: linear-gradient(180deg, #05123b 0%, #091540 65%, #000000 85%);--ff-main: "Noto Sans", sans-serif;--fw-regular: 400;--fw-medium: 500;--fw-bold: 700;--fs-body: 1rem}*,*:before,*:after{box-sizing:inherit}body{margin:0;background:var(--clr-neutral-800)}.app-wrapper{min-height:100vh;background:var(--gradient-bg);z-index:-9999}.inner{padding:0 60px}@keyframes bg-zoom{0%{background-size:85%}50%{background-size:115%}to{background-size:101%}}body{background-color:#000}.cf-section{height:100vh;position:relative;background-image:url(/JH_portfolio.io/assets/Frame1-CYgj9wMD.png);background-size:cover;background-color:#000}.cf-comment{width:800px;height:400px;left:29%;top:20%;background:#00000001;border:1px solid rgba(255,255,255,.2);border-radius:20px;box-shadow:0 8px 32px #00000059}.cf-text{font-size:40px;font-weight:var(--fw-bold);color:#fff}.cf-content{color:#fff;position:relative;z-index:1;padding:0 60px;top:90%;transform:translateY(-50%);height:350px}.cf-content-title{color:var(--clr-neutral-600);font-weight:var(--fw-medium)}.cf-mark{margin-top:35px}.cf-Link{margin-right:20px}.icon-effect{transition-duration:.3s}.icon-effect:hover{cursor:pointer;transform:scale(1.5)}.cf-Link{text-decoration-line:none;color:var(--clr-neutral-0)}.hero-bg{position:relative;overflow:hidden;width:100%;height:100vh}.lottie-bg{position:absolute;top:50%;left:50%;width:1200px;transform:translate(-50%,-50%);opacity:0;animation:fade-in1 3s ease forwards;animation-delay:0s}.hero-container{display:flex;justify-content:center;align-items:center;background-size:cover;background-position:center;background-repeat:no-repeat;width:100%;height:100vh}.title-text-1,.title-text-2{font-weight:var(--fw-bold);color:#fff;display:block;opacity:0;-webkit-user-select:none}.title-text-1{text-align:center;animation:fade-in2 1s forwards;animation-delay:1s;font-size:4rem}.title-text-2{text-align:center;animation:fade-in3 1s forwards;animation-delay:1.5s;font-size:2rem}.scroll-down{position:absolute;padding:0 1rem;bottom:2rem;left:46%;color:var(--clr-neutral-0)}.scroll-border{position:absolute;inset:0;border-radius:32px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);background-size:300% 100%;animation:borderMove 2.5s infinite;padding:2px;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes zoom-in{0%{scale:0%}50%{scale:140%}to{scale:100%}}@keyframes fade-in1{50%{opacity:1}to{opacity:1}}@keyframes fade-in2{70%{opacity:1}to{opacity:1}}@keyframes fade-in3{80%{opacity:1}to{opacity:1;visibility:visible}}@keyframes borderMove{0%{background-position:0% 0%}to{background-position:300% 0%}}.modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;width:100%}.modal-content{position:relative;width:800px;height:500px;background:linear-gradient(135deg,#ffffff40,#ffffff0d);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:20px;box-shadow:0 8px 32px #00000059;padding:60px 0;overflow:hidden;color:var(--clr-neutral-0);transform:scaleX(0);transform-origin:center;animation:modal-animation .6s ease forwards}.modal-close{border:none;cursor:pointer;position:absolute;border-radius:32px;width:50px;height:50px;top:10px;right:10px}.modal-flex-box{display:flex}.card-image-box{width:200px;height:200px}.card-image{margin:0 60px;width:100%;height:100%;border-radius:32px;overflow:hidden}.card-content-box{display:flex;flex-direction:column;width:500px}.card-name{font-size:30px;font-weight:700}.card-definition{font-size:18px}.modal-pj-inner{padding:20px 60px 0}.modal-pj-title{font-size:20px}.pj-grid{cursor:grab;overflow:hidden;overflow-x:auto;padding-right:8px;scroll-snap-type:x mandatory}.pj-grid:active{cursor:grabbing}.pj-grid::-webkit-scrollbar{height:7px}.pj-grid::-webkit-scrollbar-thumb{width:100px;background:var(--clr-point-200);border-radius:32px}.pj-grid::-webkit-scrollbar-track{background:var(--clr-neutral-600);border-radius:32px}.modal-pj-wrapper{width:150px;height:150px;padding-bottom:10px;object-fit:cover;scroll-snap-align:start}.modal-pj-image{width:100%;height:100%;border-radius:12px;-webkit-user-select:none;user-select:none;pointer-events:none;-webkit-user-drag:none}@keyframes modal-animation{0%{transform:scaleX(0)}to{transform:scaleX(1)}}.spiral-container{position:relative;height:1200px;perspective:5000px;cursor:grab}.spiral-gallery{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;cursor:grab}.spiral-item{cursor:pointer;position:absolute;left:50%;top:10%;transform:translate(-50%);transform-style:preserve-3d}.spiral-item:hover .card-front{transform:scale(1.1)}.card{cursor:pointer;position:relative;width:250px;height:250px;transform-style:preserve-3d}.card-front{display:flex;justify-content:center;align-items:center;cursor:pointer;position:absolute;inset:0;border-radius:48px;overflow:hidden;background-color:#bde8f511;backface-visibility:hidden;padding:20px;transition:ease .3s}.card-image-wrapper{width:200px;height:200px}.card-back{position:absolute;inset:0;border-radius:48px;background:#4988c411;transform:rotateY(180deg);backface-visibility:hidden}.card img{max-width:100%;height:auto;display:block}.spiral-title-container{display:flex;justify-content:center;margin-top:10%;font-size:30px;color:var(--clr-neutral-0)}.project-section{align-items:center;min-width:1300px}.main-project-section{max-width:1500px}.main-title-box,.team-project-container{opacity:1;transform:translateY(40px);will-change:transform,opacity;color:#fff}.project-content-title{display:flex;justify-content:space-between}.main-title-box{margin-bottom:50px}.main-title-text{font-weight:var(--fw-bold);font-size:50px}:root{--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px}.p-1{padding:var(--space-1)}.p-2{padding:var(--space-2)}.p-3{padding:var(--space-3)}.p-4{padding:var(--space-4)}.pt-1{padding-top:var(--space-1)}.pt-2{padding-top:var(--space-2)}.pt-3{padding-top:var(--space-3)}.pt-4{padding-top:var(--space-4)}.pr-1{padding-right:var(--space-1)}.pr-2{padding-right:var(--space-2)}.pr-3{padding-right:var(--space-3)}.pr-4{padding-right:var(--space-4)}.pl-1{padding-left:var(--space-1)}.pl-2{padding-left:var(--space-2)}.pl-3{padding-left:var(--space-3)}.pl-4{padding-left:var(--space-4)}.pb-1{padding-bottom:var(--space-1)}.pb-2{padding-bottom:var(--space-2)}.pb-3{padding-bottom:var(--space-3)}.pb-4{padding-bottom:var(--space-4)}.m-1{margin:var(--space-1)}.m-2{margin:var(--space-2)}.m-3{margin:var(--space-3)}.m-4{margin:var(--space-4)}.mt-1{margin-top:var(--space-1)}.mt-2{margin-top:var(--space-2)}.mt-3{margin-top:var(--space-3)}.mt-4{margin-top:var(--space-4)}.mr-1{margin-right:var(--space-1)}.mr-2{margin-right:var(--space-2)}.mr-3{margin-right:var(--space-3)}.mr-4{margin-right:var(--space-4)}.ml-1{margin-left:var(--space-1)}.ml-2{margin-left:var(--space-2)}.ml-3{margin-left:var(--space-3)}.ml-4{margin-left:var(--space-4)}.mb-1{margin-bottom:var(--space-1)}.mb-2{margin-bottom:var(--space-2)}.mb-3{margin-bottom:var(--space-3)}.mb-4{margin-bottom:var(--space-4)}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.block{display:block}.inline-block{display:inline-block}.hidden{display:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.justify-end{justify-content:flex-end}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr);gap:24px}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-5{grid-template-columns:repeat(5,1fr)}.place-center{place-items:center}.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.inset-0{inset:0}.project-card{display:flex;flex-direction:column;color:var(--clr-neutral-200);border-left:solid 1px #726d6d;border-right:solid 1px #726d6d;border-radius:12px;margin:24px}.card-header h2{font-size:30px;line-height:1.2}.card-header .flex{display:flex;align-items:center}.overview{font-size:19px;line-height:1.5;overflow:hidden;min-height:3em}.card-media img{flex-shrink:0;width:250px;aspect-ratio:1 / 1;overflow:hidden;border-radius:12px}.card-body{flex-grow:1}.card-media{flex-shrink:0}.skill-image{width:50px}.info-block{height:240px;overflow:hidden}.info-block ul{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}.side-section{max-width:1600px;margin:150px auto;color:var(--clr-neutral-0)}.title-text{font-size:50px;font-weight:var(--fw-bold);color:var(--clr-neutral-200)}.sd-card{margin:10px;background:#00000030;border:solid 1px #111;border-radius:12px;min-height:250px}.sd-card-bg{inset:0;margin:0 auto;overflow:hidden;background-color:#111111e0;opacity:0;transition:opacity .3s ease}.sd-card:hover .sd-card-bg{opacity:1}.sd-overview{font-size:18px}.header{position:fixed;top:0;left:0;width:100%;height:80px;transition:transform .3s ease;z-index:1}.header.hidden{transform:translateY(-100%)}.header-box{display:flex;position:fixed;width:100%;justify-content:space-between;padding:0 60px;background-color:transparent;-webkit-user-select:none}.logo{display:flex;align-items:center;color:var(--clr-neutral-0);font-size:2rem;cursor:pointer}.logo_text{font-weight:700}.nav-ul{color:var(--clr-neutral-0);width:600px;list-style:none;display:flex;justify-content:space-around}.nav-li{position:relative;cursor:pointer;font-size:24px;text-align:center;padding-bottom:5px}.nav-li:hover{transition-duration:.5s;scale:1.1}.nav-li:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:1px;background:var(--clr-point-200);transform:translate(-50%);transition:width .3s ease}.nav-li:hover:after{width:100%}.link{text-decoration:none;color:var(--clr-neutral-0)}