@font-face{font-family:nNungo;font-weight:900;src:url(/portfolio/fonts/nNungo.woff2) format("woff2"),url(/portfolio/fonts/nNungo.ttf) format("truetype")}#aboutme_container{width:100%;min-height:100vh;display:grid;grid-template-columns:1fr 1fr;background-color:#0a0a0a}#aboutme_container .container_img{display:flex;justify-content:center;align-items:center;padding:11vh 2rem 2rem;position:relative;overflow:hidden}#aboutme_container .container_img:after{content:"";position:absolute;inset:-30%;background:linear-gradient(115deg,transparent 36%,rgba(125,255,90,.34) 48%,rgba(255,154,61,.28) 55%,transparent 68%);transform:translate(-80%);animation:light-sweep 1.5s ease forwards;pointer-events:none}#aboutme_container .container_img img{width:clamp(220px,32vw,420px);height:auto;max-height:80vh;object-fit:contain;position:relative;z-index:1}#aboutme_container .container_text{display:flex;flex-direction:column;justify-content:center;gap:1.5rem;padding:11vh 3rem 3rem 2.5rem;border-left:1px solid rgba(255,255,255,.08)}.aboutme_label{font-family:monospace;font-size:.72rem;font-weight:700;color:#ff9a3d;letter-spacing:.12em}.title_mask{overflow:hidden}#aboutme_container .container_text h1{font-family:nNungo;font-size:clamp(2.4rem,4vw,4rem);color:#7dff5a;line-height:.95;margin:0;animation:title-rise .7s cubic-bezier(.16,1,.3,1) both}.title_line{width:72px;height:2px;background:#ff9a3d;margin-top:-.5rem;transform-origin:left center;animation:line-draw .55s .35s ease both}#aboutme_container .container_text ul{display:flex;flex-direction:row;align-items:center;gap:.85rem;list-style:none;padding:0;flex-wrap:wrap}#aboutme_container .container_text ul li{width:auto;min-width:4.6rem;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;cursor:pointer;position:relative;flex-shrink:0}#aboutme_container .container_text ul li .icon-box{width:clamp(2.8rem,3.5vw,3.4rem);height:clamp(2.8rem,3.5vw,3.4rem);background-color:transparent;border:1.5px solid rgba(255,154,61,.7);clip-path:polygon(25% 0%,100% 0%,100% 75%,75% 100%,0% 100%,0% 25%);display:flex;justify-content:center;align-items:center;transition:transform .25s ease,background-color .25s ease,border-color .25s ease}#aboutme_container .container_text ul li svg{width:clamp(1.1rem,1.6vw,1.4rem);height:clamp(1.1rem,1.6vw,1.4rem);fill:#ff9a3d;flex-shrink:0}#aboutme_container .container_text ul li span{position:static;opacity:1;visibility:visible;background:none;color:#ffffff8c;padding:0;font-family:monospace;font-size:.62rem;font-weight:700;letter-spacing:.06em;white-space:nowrap;transition:color .25s ease}#aboutme_container .container_text ul li:hover .icon-box{transform:translateY(-3px);border-color:#ff9a3d}#aboutme_container .container_text ul li.is-active .icon-box{background-color:#7dff5a;border-color:#7dff5a}#aboutme_container .container_text ul li.is-active svg{fill:#0a0a0a}#aboutme_container .container_text ul li.is-active span{color:#7dff5a}.text_block{display:flex;flex-direction:column;gap:.8rem;padding-left:1rem;border-left:2px solid rgba(255,154,61,.45)}.text_block.is-swapping h4,.text_block.is-swapping h5{animation:text-in .35s ease}#aboutme_container .container_text h4,#aboutme_container .container_text h5{transition:opacity .3s ease}#aboutme_container .container_text h4{font-family:monospace;font-size:clamp(.82rem,1.4vw,1rem);font-weight:900;color:#fff;line-height:1.7}#aboutme_container .container_text h5{font-family:monospace;font-size:clamp(.72rem,1.1vw,.88rem);font-weight:400;color:#fff9;line-height:1.7}#aboutme_container .container_text #skills{width:fit-content;background-color:#ff9a3d;color:#fff;clip-path:polygon(0% 0%,100% 0%,100% 70%,88% 100%,0% 100%);border:none;padding:.7rem 1.8rem;font-family:nNungo,sans-serif;font-size:clamp(.95rem,1.6vw,1.2rem);cursor:pointer;transition:background-color .25s ease;letter-spacing:.04em}#aboutme_container .container_text #skills:hover{background-color:#ffb066}@media(max-width:1024px){#aboutme_container .container_text{padding:10vh 2rem 3rem 1.5rem;gap:1.2rem}#aboutme_container .container_text h1{font-size:clamp(2rem,3.5vw,3rem)}}@media(max-width:900px){#aboutme_container{grid-template-columns:1fr}#aboutme_container .container_img{padding:12vh 2rem 1.5rem;border-bottom:1px solid rgba(255,255,255,.06)}#aboutme_container .container_img img{width:clamp(180px,55vw,300px);max-height:38vh}#aboutme_container .container_text{border-left:none;padding:2rem 1.5rem 4rem;gap:1.2rem}}@media(max-width:768px){#aboutme_container .container_text{align-items:center;text-align:center}#aboutme_container .container_text h1{font-size:clamp(1.8rem,7vw,2.8rem);text-align:center}#aboutme_container .container_text ul{justify-content:center}#aboutme_container .container_text h4{font-size:clamp(.82rem,3.5vw,1rem);text-align:center}#aboutme_container .container_text h5{font-size:clamp(.72rem,3vw,.88rem);text-align:center}#aboutme_container .container_text #skills{align-self:center}.title_line{align-self:center;transform-origin:center}.text_block{border-left:none;border-top:2px solid rgba(255,154,61,.2);padding-left:0;padding-top:1rem}}@media(min-width:320px)and (max-width:400px){#aboutme_container .container_text h1{font-size:1.7rem}#aboutme_container .container_text ul li .icon-box{width:2.5rem;height:2.5rem}}@media(max-width:280px),(max-width:420px)and (max-height:420px){#aboutme_container .container_img{display:none}#aboutme_container .container_text{padding:46px .45rem .7rem;gap:.4rem;align-items:flex-start;text-align:left}#aboutme_container .container_text h1{font-size:.95rem!important;text-align:left}#aboutme_container .container_text ul li{min-width:0}#aboutme_container .container_text ul li span{display:none}#aboutme_container .container_text ul li .icon-box{width:1.6rem;height:1.6rem}#aboutme_container .container_text h4,#aboutme_container .container_text #text-h4{font-size:.58rem!important;text-align:left}#aboutme_container .container_text h5,#aboutme_container .container_text #text-h5{font-size:.52rem!important;text-align:left}#aboutme_container .container_text #skills{font-size:.65rem;padding:.28rem .5rem}.text_block{padding-top:.4rem}.container_img:after,.title_mask h1,.title_line,.text_block.is-swapping h4,.text_block.is-swapping h5{animation:none}.title_line{width:36px;transform:none}}@keyframes light-sweep{to{transform:translate(80%)}}@keyframes title-rise{0%{transform:translateY(110%)}to{transform:translateY(0)}}@keyframes line-draw{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes text-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.container_img:after,.title_mask h1,.title_line,.text_block.is-swapping h4,.text_block.is-swapping h5{animation:none}.title_line{transform:none}}#aboutme_container .container_img img[data-tilt]{aspect-ratio:1;object-fit:cover;border-radius:20px;border:1px solid rgba(125,255,90,.55);box-shadow:0 0 0 6px #7dff5a12,0 24px 60px -12px #000c,0 0 50px #7dff5a40,18px 18px 0 -2px #ff9a3d8c;transition:transform .15s ease-out,box-shadow .3s ease;will-change:transform}.text_block{padding:1.1rem 1.2rem;border:1px solid rgba(255,255,255,.1);border-left:3px solid #ff9a3d;background:linear-gradient(160deg,#ffffff0f,#ffffff03);backdrop-filter:blur(8px)}#aboutme_container .container_text ul li .icon-box{transition:transform .25s ease,background-color .25s ease,border-color .25s ease,box-shadow .25s ease}#aboutme_container .container_text ul li:hover .icon-box{box-shadow:0 0 22px #ff9a3d8c}#aboutme_container .container_text ul li.is-active .icon-box{box-shadow:0 0 26px #7dff5a99}#aboutme_container .container_text h1{text-shadow:0 0 30px rgba(125,255,90,.45)}#skills{background:#ff9a3d;color:#0a0a0a;font-weight:900;transition:box-shadow .25s ease,transform .25s ease,background .25s ease}#skills:hover{background:#ffb066;box-shadow:0 0 34px #ff9a3db3;transform:translateY(-2px)}@media(max-width:280px),(max-width:420px)and (max-height:420px){.text_block{backdrop-filter:none;padding:.4rem .5rem}}[data-astro-cid-ysruilfg],[data-astro-cid-ysruilfg]:after,[data-astro-cid-ysruilfg]:before{margin:0%;padding:0%;box-sizing:border-box}html,body{background-color:#0a0a0a;color:#fff;overflow-x:hidden;margin:0%;padding:0%;box-sizing:border-box}