@import"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300&display=swap";@import"https://fonts.googleapis.com/css2?family=Murecho:wght@300;400&display=swap";@import"https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope&display=swap";@import"https://fonts.googleapis.com/css2?family=Murecho:wght@300;400;500&family=Syncopate:wght@400;700&display=swap";html,body{width:100vw;height:100vh;margin:0;padding:0;overflow:hidden!important;-webkit-user-select:none;user-select:none}.homepage{position:relative;width:100vw;height:100vh;overflow:hidden}.mainImage{position:absolute;top:0;left:0;width:100vw;height:100vh;object-fit:cover;object-position:center;z-index:1;-webkit-user-select:none;user-select:none;pointer-events:none}body{font-family:Noto Sans SC,sans-serif;font-weight:300}.thin-look{font-family:Noto Sans SC,sans-serif;font-weight:400;opacity:.7}.navbar--white .nameSection,.navbar--white .nameEN,.navbar--white .nameCN,.navbar--white .title{color:#fff}.navbar--black .nameSection,.navbar--black .nameEN,.navbar--black .nameCN,.navbar--black .title{color:#000}.navbarText--white{color:#fff!important}.navbarText--black{color:#000!important}.nameSection{position:absolute;top:60px;left:60px;z-index:10;display:flex;flex-direction:column;transition:transform .25s}.nameSection--hoverable:focus,.nameSection--hoverable:hover{transform:scale(1.03);cursor:pointer}.nameEN{font-family:Syncopate,sans-serif;font-size:40px;font-weight:400;line-height:50px;letter-spacing:.2em}.nameCN{font-family:Noto Sans SC,sans-serif;font-size:24px;font-weight:300;margin-left:3px;margin-top:-5px}.projectSection,.workSection,.naviSection{position:absolute;left:60px;z-index:10;display:flex;flex-direction:column}.title{font-family:Syncopate,sans-serif;font-size:10px;font-weight:400;line-height:20px;letter-spacing:.2em;transition:transform .25s}.title:focus,.title:hover{transform:scale(1.05)}.projectSection{bottom:305px}.workSection{bottom:235px}.naviSection{bottom:145px}.instagramIcon{position:absolute;left:60px;bottom:85px;z-index:10;width:25px;height:25px;display:flex;align-items:center;justify-content:center;transition:transform .25s;cursor:pointer}.instagramIcon:focus,.instagramIcon:hover{transform:scale(1.1)}.copyright-bar{width:100%;text-align:center;font-size:8px;font-family:Syncopate,sans-serif;position:absolute;bottom:5px;letter-spacing:.2em;z-index:10}.copyright-bar--black{color:#222}.copyright-bar--white{color:#fff}.subpage{display:flex;flex-direction:column;min-height:100vh;color:#222}.subpage-main{position:absolute;left:400px;right:60px;background:#fff;display:flex;flex-direction:column;height:100vh;overflow-y:auto;padding-bottom:40px;box-sizing:border-box}.subpage-main::-webkit-scrollbar{display:none}.cvpage-title{text-align:left;margin-top:60px;margin-bottom:2rem;font-size:32px;letter-spacing:3px;font-weight:300;font-family:Murecho,sans-serif}.cvpage-text{font-size:15px;font-weight:400;line-height:25px;letter-spacing:1.1px;font-family:Murecho;font-style:normal}i{font-family:Murecho,sans-serif}a{color:inherit;text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}.cvpage-title a{font-size:18px}.statement-text{margin-top:130px;margin-bottom:100px;font-size:20px;font-weight:400;line-height:25px;letter-spacing:1.1px;font-family:Annie Use Your Telescope,cursive}.contact-main{position:absolute;left:320px;right:60px;background:#fff;display:flex;flex-direction:column;height:100vh;overflow-y:auto;padding-bottom:40px;box-sizing:border-box;align-items:center}.contact-content{display:flex;flex-direction:column;align-items:flex-start}.contact-img{padding-top:130px;padding-bottom:40px;width:600px;height:395px}.contact-text{font-size:15px;font-weight:400;line-height:25px;letter-spacing:3px;font-family:Murecho;font-style:normal}.thumbnailpage{display:flex;flex-direction:column;min-height:100vh;color:#222}.thumbnailpage-main{position:absolute;left:360px;right:60px;background:#fff;display:flex;flex-direction:column;height:100vh;overflow-y:auto;padding-bottom:40px;box-sizing:border-box}.thumbnailpage-main::-webkit-scrollbar{display:none}.thumbnail-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding-top:60px}.thumbnail-container{position:relative;width:100%;overflow:hidden;background-color:#f0f0f0;aspect-ratio:3/2;transition:transform .3s ease}.thumbnail-container:hover{transform:scale(1.05)}.thumbnail-image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}.thumbnail-title{text-align:center;margin-top:8px;font-size:14px;color:#333}@media (max-width: 768px){.thumbnail-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:15px}}@media (max-width: 480px){.thumbnail-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}}.projectpage{display:flex;flex-direction:column;min-height:100vh}.projectpage-main{position:fixed;inset:80px 60px 155px 300px;background:#fff;display:flex;flex-direction:column;align-items:center;box-sizing:border-box}.image-container{flex:0 0 auto;display:flex;justify-content:center;align-items:center;width:100%;height:calc(100vh - 300px);box-sizing:border-box}.project-image{max-width:90%;max-height:100%;object-fit:contain}.nav-arrow{position:absolute;background:none;border:none;font-size:24px;color:#888;cursor:pointer;padding:10px;z-index:5;width:5%;display:flex;align-items:center;justify-content:center}.nav-arrow:hover{color:#000}.left-arrow{left:0}.right-arrow{right:0}.project-info-container{margin-top:10px;width:90%;text-align:right}.thumbnail-link{font-family:Syncopate,sans-serif;font-size:10px;font-weight:400;line-height:20px;letter-spacing:.2em;background:#fff;border:none;cursor:pointer;transition:transform .25s}.thumbnail-link:focus,.thumbnail-link:hover{transform:scale(1.05)}@media (max-width: 768px){.projectpage-main{top:60px}.image-container{height:calc(100vh - 200px)}}.project-info-container{margin-top:10px;width:90%;text-align:right;position:relative}.image-details{font-family:Murecho,sans-serif;text-transform:uppercase;font-size:10px;font-weight:400;line-height:1.6;letter-spacing:2px}.image-details p{margin:4px 0}.thumbnail-link-container{margin-top:10px;align-self:flex-end}@media (min-width: 1200px){.project-info-container{max-width:calc(90% - ((100vw - 1200px)/2))}}