@import"https://fonts.googleapis.com/css2?family=Jua&family=Roboto:wdth,wght@75..100,100..900&display=swap";:root{--header-height: 3rem;--primary-color: #FFEBB8;--secondary-color: #d8a171;--cta-color:#FFBF60;--cta-color-40: #FFF3E0;--bg-color: #FFFDF8;--black-color: #2C2C2C;--white-color: #fff;--desc1-color: #b0b0b0;--desc2-color: #767676;--body-font: "Roboto", sans-serif;--heading-font: "Jua", sans-serif;--font-light: 300;--font-regular: 400;--font-medium: 500;--font-bold: 700;--z-fixed: 100;--z-modal: 1000;--z-tooltip: 10}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body,button,input,textarea{font-family:var(--body-font);font-size:var(--font-normal)}h1{color:var(--secondary-color);font-weight:var(--font-bold);font-family:var(--heading-font);font-size:40px}h2{color:var(--black-color);font-family:var(--heading-font);font-weight:var(--font-medium);font-size:28px;height:28px;display:flex;align-items:center}h3{font-weight:var(--font-bold);color:var(--black-color);font-size:20px}a{color:var(--black-color);text-decoration:none}desc{color:var(--desc2-color);font-size:16px;line-height:32px}desc.bold{font-weight:var(--font-bold)}header{display:flex;flex-direction:column;gap:16px}btn{cursor:pointer;border:none;outline:none;border-radius:16px;font-family:var(--heading-font);font-size:var(--font-medium)}img{max-width:100%;height:auto}body{font-family:Arial,sans-serif;margin:0;box-sizing:border-box;max-width:100%;overflow-x:hidden;padding:0 128px;background-color:var(--bg-color)}.app{align-items:center}.content{max-width:1400px;padding:0;display:flex;flex-direction:column;gap:64px;width:100%}section{display:flex;flex-direction:column;width:100%}.grid{display:grid;grid-template-columns:repeat(2,1fr)}main{margin-top:120px}.btn-black{background-color:var(--black-color);color:var(--white-color);display:inline-flex;gap:8px;justify-content:center;align-items:center;padding:16px 24px;width:fit-content;align-self:center}.half-50{width:100%}.horizontal{display:flex;flex-direction:row;gap:48px}ul{list-style:none}mock{color:var(--desc2-color);background-color:var(--desc1-color);border-radius:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;height:720px;width:100%}.coming-soon{color:var(--desc2-color);display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:jua;font-size:64px;padding-top:64px;width:100%}.px-16{width:16px}.px-64{width:64px}.px-128{width:128px}.gap16{gap:16px}.gap8{gap:8px}.gap24{gap:24px}.gap32{gap:32px}.padding-bottom-16{padding-bottom:16px}row{display:flex;align-items:stretch;gap:8px}row.wrap{flex-wrap:wrap}.fill{width:100%}.space-between{justify-content:space-between}column{display:flex;flex-direction:column}bullet{margin-top:12px;width:8px;height:8px;background-color:var(--cta-color);border-radius:50%}badge{display:inline-flex;align-items:center;width:fit-content;background-color:var(--cta-color-40);color:var(--cta-color);border-radius:12px;padding:4px 8px;font-family:Roboto,sans-serif;font-size:14px;font-weight:var(--font-medium);white-space:nowrap}box{display:flex;flex-direction:column;width:100%}p-middle{text-align:center}.center{align-items:center}button{background-color:var(--black-color);color:var(--white-color);border:none;border-radius:12px;padding:8px 16px;font-family:jua;font-size:16px;display:inline-flex;align-items:center;gap:8px;cursor:pointer}@media screen and (max-width: 768px){body{padding:0 16px}main{margin-top:80px}.content{gap:48px}.grid{grid-template-columns:1fr}.half-50{width:100%}.horizontal{display:flex;flex-direction:row;gap:0}}.miniprofile{width:128px;border-radius:128px}.profile-info{font-family:jua;color:var(--secondary-color);font-size:88px}.cat{object-fit:cover;width:100%;border-radius:24px;height:680px}.work-list,.gallery-list{margin:32px 0}.gallery-img{object-fit:cover;width:100%;border-radius:24px;aspect-ratio:1/1}.emoji{display:none}@media screen and (max-width: 768px){.profile-info{font-family:jua;font-size:48px;padding-top:48px;text-align:center}.miniprofile{width:128px;display:none}.cat{object-fit:cover;width:100%;border-radius:24px;height:200px}.emoji{display:flex;width:100%;justify-content:center;align-items:center;margin-top:24px;background-color:var(--bg-color)}.emoji video{width:256px;background-color:var(--bg-color)}}.cardwork{display:flex;flex-direction:column;gap:16px;border-radius:24px;cursor:pointer}.cardwork-img-wrapper{position:relative;border-radius:24px;overflow:hidden}.cardwork-img{object-fit:cover;width:100%;height:100%;aspect-ratio:16/9}.cardwork-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:2}.overlay-gif{width:128px;height:128px}.cardwork-info{display:flex;flex-direction:column;gap:8px}.tag-list{display:flex;flex-wrap:wrap;gap:8px}.cardwork-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.tag-content{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:24px;font-size:12px;font-family:Roboto,sans-serif;font-weight:var(--font-bold)}.profile{width:100%;object-fit:cover;aspect-ratio:3/2;border-radius:24px;margin-bottom:48px}.section-track{width:30%;position:sticky;height:fit-content;top:128px;z-index:10;padding:0 48px}.track{display:flex;flex-direction:column;gap:32px}.track-item{width:fit-content;font-family:jua;color:var(--desc1-color);cursor:pointer;transition:color .3s ease}.track-item.active{color:var(--cta-color);font-weight:700;position:relative}.track-item.active:before{content:"";position:absolute;left:-12px;top:50%;transform:translateY(-50%);width:4px;height:60%;background:var(--cta-color);border-radius:2px}.timeline{padding-left:8px}.skills{gap:24px}verticalline{flex:1;background-color:var(--desc1-color);width:2px;height:100%;border-radius:24px}@media screen and (max-width: 768px){.section-track{display:none}}.works-header{position:sticky;top:64px;background:var(--bg-color);z-index:-1;padding:16px 0;width:100%}.work-detail{max-width:720px;margin:auto;display:flex;flex-direction:column;gap:16px}.work-title{font-size:28px;font-weight:700}.detail-image{width:100%;border-radius:16px}.type{font-weight:700;color:var(--accent-color)}.tags{display:flex;flex-wrap:wrap;gap:8px}.description{line-height:1.6;display:flex;flex-direction:column;gap:64px;padding-top:48px}.navbar{padding:16px 120px;display:flex;justify-content:space-between;align-items:center;position:fixed;width:100%;top:0;left:0;z-index:1000}.navbar-logo{width:auto;height:64px;border-radius:48px;padding:12px;display:flex;gap:16px;align-items:center;font-family:jua;color:var(--cta-color);font-size:24px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#e2e2e23d}.icon{width:48px}.nav-tog{display:none}.icon:hover{transform:scale(1.1);transition:ease .3s}.navbar-items{display:flex;align-items:center;width:auto;padding:12px 12px 12px 32px;gap:24px;border-radius:24px;font-family:jua;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background-color:#e2e2e23d}.navbar-items a{text-decoration:none;font-size:16px}.navbar-drop{display:none}.navbar a.active{color:var(--black-color)}@media screen and (max-width: 768px){.navbar{padding:16px;box-shadow:0 2px 16px #00000029;height:64px;background-color:var(--white-color);z-index:2000}.navbar-items{display:none}.nav-shadow{box-shadow:none}.navbar-logo{background-color:var(--white-color);-webkit-backdrop-filter:0px;backdrop-filter:0px}.icon{width:32px}.nav-tog{display:block}.navbar-drop{position:fixed;width:100%;display:flex;flex-direction:column;left:0;top:-100%;transition:.6s;align-items:center;margin-top:64px;padding:24px;gap:24px;border-radius:0 0 24px 24px;font-family:jua;color:var(--desc2-color);background-color:var(--white-color);box-shadow:0 2px 16px #00000029;z-index:1000}.navbar-drop a{text-decoration:none;color:var(--desc2-color)}.show{top:0}}.footer{display:flex;flex-direction:column;align-items:center;padding-top:48px;margin-top:64px;padding-bottom:64px;max-width:1400px;gap:24px}.footer-socials{display:flex;align-items:center;gap:24px}.footer-social{width:2rem}.desc-footer{text-align:center;width:100%;opacity:.4;font-weight:var(--font-bold);display:flex;flex-direction:column;justify-content:center;gap:16px}@media screen and (max-width: 768px){.footer{flex-direction:column;align-items:flex-start;padding-top:0;padding-bottom:120px;margin-top:64px;gap:24px;width:100%}.footer-socials{width:100%;gap:16px;justify-content:center}}@media screen and (max-width: 1096px){.footer{flex-direction:column;padding-top:0;gap:24px;width:100%}.footer-socials{width:100%;gap:16px;justify-content:center}}.scroll-top{position:fixed;bottom:-120px;right:128px;transform:translate(50%);background-color:var(--primary-color);color:#fff;border:none;border-radius:96px;width:96px;height:64px;font-size:24px;cursor:pointer;transition:bottom .4s ease;z-index:1000;display:flex;justify-content:center;align-items:center}.scroll-top:hover{transform:translate(50%) scale(1.1)}.scroll-top:active{transform:translate(50%) scale(.8)}.scroll-top img{width:64px;height:64px;animation:shake .4s ease-in-out infinite}.scroll-top.visible{bottom:20px}@keyframes shake{0%,to{transform:rotateX(8deg)}50%{transform:rotate(-8deg)}}@media screen and (max-width: 768px){.scroll-top{right:50%}}