:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}body{margin:0;color:#661f26;font-family:Yeseva One,serif}.world{background-color:#f5dfd2;height:100vh;width:100vw;position:relative}.world:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100dvh;background-color:#f5dfd2;z-index:-10}.spline{width:100vw;height:100%;z-index:-1}a{text-decoration:none;color:inherit}.decor{position:absolute}.decor img{width:50px}.intro{position:absolute;text-align:center;transform:translate(-50%,-50%);top:50%;left:50%;width:100vw;height:100vh}.intro-text{top:70%;left:50%;transform:translate(-50%,-50%);font-size:22px;font-family:Special Gothic Expanded One;text-align:center;z-index:1;pointer-events:none;position:absolute}.hide{background-color:#f5dfd2;width:600px;height:300px;position:absolute;top:70%;left:68%;z-index:100000}.item{position:absolute;transition:transform .25s ease;z-index:1}.item img{width:110px;height:auto;transform:translate(-25%);margin-bottom:10px}.item:hover{transform:scale(1.1);transition:transform .25s ease}.about-page{scroll-padding-top:30px;scroll-behavior:smooth;font-family:Roboto Mono,sans-serif;padding-bottom:10px;background-color:#e9f6eb;color:#31728c;overflow-x:hidden;min-height:100vh;position:relative}.about-page:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background-color:#e9f6eb;z-index:-1}.banner{margin-top:0;position:relative;width:100%}.banner img{width:100vw;height:50vh;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,black 70%,transparent 100%);mask-image:linear-gradient(to bottom,rgb(0,0,0) 70%,transparent 100%)}.navbar{display:flex;gap:20px;justify-content:space-between;align-items:center;flex-direction:column;padding:4px 20px;border-radius:24px;-webkit-backdrop-filter:blur(17.5px);backdrop-filter:blur(17.5px);background-color:#fff9;width:calc(60% - 40px);max-width:calc(60% - 40px);flex-wrap:wrap;font-size:16px;position:fixed;margin-top:10px;left:50%;transform:translate(-50%);z-index:1000;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f}@media (min-width: 640px){.navbar{flex-wrap:nowrap;padding:4px 20px}}.nav-brand{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:6px;margin:auto 0;width:100%}@media (min-width: 640px){.nav-brand{width:auto}}.nav-home{text-decoration:none;color:#18181b;font-weight:700;font-size:18px;text-transform:uppercase;transition:color .3s}.nav-home:hover{color:#064f6c}.nav-items{display:flex;flex-direction:column;gap:20px;justify-content:center;align-items:center;text-align:center;margin:auto 0;color:#31728c;font-weight:600;width:100%}@media (min-width: 640px){.nav-items{flex-direction:row;width:auto}}.nav-item{cursor:pointer;padding:8px 16px;border-radius:8px;transition:all .3s ease;font-weight:300;text-align:center}.about-page .nav-item:hover{background-color:#0000000d;color:#18181b;transform:translateY(-1px)}.navbar img{width:80px}.container{display:flex;padding:30px;gap:20px}.introduction{width:300px;padding:15px;text-align:center;margin:0 0 10px 20px;flex-direction:column;align-items:center;display:flex;line-height:30px}.profile-img{height:280px;width:auto;margin:20px}.logo img{width:66px;margin-top:5px}.contents{display:flex;flex-direction:column;margin-left:50px;gap:30px}.school,.work{display:flex;flex-direction:row;margin-bottom:20px;gap:50px;align-items:flex-start;line-height:1.5;margin-top:15px}.volunteer-contents{display:flex;flex-direction:row;gap:30px}.vol img{height:180px;border-radius:10px}.vol{width:280px}.logo-vol img{width:88px;margin-right:20px}.logo-vol p{font-size:15px;width:400px;margin:8px 0}.description p{margin:8px 0;line-height:1.4}.contents h2{margin-bottom:25px;display:inline}.logo-vol{display:flex;flex-direction:column;gap:25px}.gallery-page{background-color:#cedfb6;min-height:100dvh;width:100vw;padding-bottom:80px;color:#255b3a}.gallery-page:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100dvh;background-color:#cedfb6;z-index:-1}.gallery-page .banner img{width:100vw;height:35vh;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,rgb(0,0,0) 80%,transparent 100%);object-position:50% 85%}.left{display:grid;grid-template-columns:auto auto}.left img{height:58vh;width:4.5vw}.gallery-page nav{display:flex;flex-direction:column;margin:0 10px;gap:50px;font-size:22px;font-weight:600;align-items:center}.gallery-page a{transition:transform .3s ease}.gallery-page a:hover{transform:scale(1.2);transition:transform .3s ease;color:#0b642f}.gallery-page .container{display:grid;grid-template-columns:25% 75%;column-gap:40px}.gallery img{width:255px;border-radius:10px;margin:8px;transition:transform .5s ease}.gallery img:hover{transform:scale(1.2);transition:transform .5s ease}.gallery{max-width:68vw;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.welcome-page{display:flex;flex-direction:column;width:60vw;height:50vh;align-items:center;justify-content:center;text-align:center;margin-left:8vw}.gallery-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px}.gallery-images img{opacity:0;transition:opacity .6s ease}.gallery-images img.loaded{opacity:1}@media (max-width: 600px){.gallery,.gallery-images{grid-template-columns:repeat(1,1fr);gap:8px;justify-items:center}.gallery img{width:255px;height:auto}}@media (min-width: 601px) and (max-width: 900px){.gallery,.gallery-images{grid-template-columns:repeat(2,1fr);gap:10px;justify-items:center}.gallery img{width:255px;height:auto}}@media (min-width: 901px) and (max-width: 1200px){.gallery,.gallery-images{grid-template-columns:repeat(3,1fr);gap:12px;justify-items:center}.gallery img{width:255px;height:auto}}@media (min-width: 1201px){.gallery,.gallery-images{grid-template-columns:repeat(4,1fr);gap:15px;justify-items:center}.gallery img{width:255px;height:auto}}.music-page:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100dvh;background:linear-gradient(to bottom,#ffd280,#ffacba);z-index:-1}.banner img{width:100vw;height:35vh;object-fit:cover;object-position:60% 60%;-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,rgb(0,0,0) 80%,transparent 100%)}.home{position:fixed;z-index:1;margin:28px 0 0 28px;font-size:22px;transition:transform .25s ease}.home img{height:120px}.video-container{max-width:1000px;margin:0 auto;padding:0 20px}.video-description{text-align:left;margin-bottom:30px;color:#fff}.video-description h1{font-size:40px;font-weight:700;margin-bottom:15px;color:#994e3a;font-family:Ma Shan Zheng,cursive}.video-description p{font-size:16px;line-height:1.6;color:#994e3a;max-width:800px}.main-video{height:480px;margin-bottom:40px;border-radius:20px;box-shadow:0 10px 30px #0000001a;position:relative}.video-icon{position:absolute;z-index:10;width:120px}.video-icon img{width:100%;height:100%;object-fit:cover}.thumbnails-container{position:relative;display:flex;align-items:center;gap:30px;margin:5px auto 60px;max-width:1200px;padding:0 20px;justify-content:center;width:100%}.nav-button{background:rgba(255,255,255,.8);border:none;border-radius:50%;width:50px;height:50px;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10;box-shadow:0 4px 12px #0000001a}.nav-button:hover{background:rgba(255,255,255,1);transform:scale(1.1);box-shadow:0 6px 16px #00000026}.thumbnails-scroll{flex:1;position:relative;max-width:960px;display:flex;justify-content:center;margin:0 auto;overflow:hidden}.thumbnails-wrapper{display:flex;gap:12px;transition:transform .3s ease;padding-left:20px;width:100%}.video-thumbnail{position:relative;width:200px;height:120px;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s ease;flex-shrink:0}.video-thumbnail:hover{transform:scale(1.05);box-shadow:0 8px 20px #00000026}.video-thumbnail.active{border:6px solid #d8717d;transform:scale(1.05)}.video-thumbnail img{width:100%;height:100%;object-fit:cover}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;background:rgba(255,255,255,.9);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#333;opacity:0;transition:opacity .3s ease}.video-thumbnail:hover .play-button{opacity:1}@media (max-width: 768px){.video-container{padding:20px 10px}.main-video{height:300px}.video-description h2{font-size:24px}.video-description p{font-size:14px}.video-thumbnail{width:150px;height:90px}.nav-button{width:40px;height:40px;font-size:20px}}.project-container{background-color:#25344f;color:#d1fad0;font-family:Yeseva One,serif;height:100vh;width:100vw;position:relative;overflow-y:auto}.project-container:before{content:"";position:fixed;top:0;left:0;width:100vw;height:100dvh;background-color:#25344f;z-index:-1}.banner{margin-top:0;position:relative;width:100%;top:0}.banner img{width:100vw;height:30vh;object-fit:cover;-webkit-mask-image:linear-gradient(to bottom,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,rgb(0,0,0) 80%,transparent 100%)}.home{position:fixed;z-index:1;margin:28px 0 0 28px;font-size:22px}.home img{height:80px;transition:transform .25s ease}.home:hover{transform:scale(1.15);transition:transform .25s ease}.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:20px;padding:100px 40px 40px;height:calc(100vh - 40px);max-width:1400px;margin:0 auto}.project-card{background:rgba(255,255,255,.1);border-radius:15px;padding:25px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);transition:all .3s ease;position:relative;overflow:hidden}.project-card:hover{transform:translateY(-5px);box-shadow:0 10px 30px #0000004d;background:rgba(255,255,255,.15)}.project-card.large{grid-column:span 2;grid-row:span 2}.project-card.medium{grid-column:span 1;grid-row:span 2}.project-card.small{grid-column:span 1;grid-row:span 1}.project-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px}.project-header h3{font-size:1.5rem;margin:0;color:#d1fad0;font-weight:600}.project-link{color:#d1fad0;font-size:1.2rem;transition:all .3s ease;opacity:.7}.project-link:hover{opacity:1;transform:scale(1.1)}.project-card:hover .project-image img{transform:scale(1.05)}.project-images{display:flex;flex-wrap:wrap;gap:15px;margin-bottom:10px;justify-content:flex-start}.project-images .project-image{margin-bottom:0;flex:0 0 auto;min-width:120px;border-radius:5px;overflow:hidden}.project-images .project-image img{border-radius:5px}.project-description{font-size:.9rem;line-height:1.5;margin-bottom:10px;opacity:.9;font-family:Arimo,sans-serif}.skills-container{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}.skill-tag{background:rgba(209,250,208,.2);color:#d1fad0;padding:4px 12px;border-radius:20px;font-size:.75rem;border:1px solid rgba(209,250,208,.3);font-family:Roboto Mono,monospace;transition:all .3s ease}.skill-tag:hover{background:rgba(209,250,208,.3);transform:scale(1.05)}@media (max-width: 768px){.projects-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:15px;padding:80px 20px 20px}.project-card.large,.project-card.medium,.project-card.small{grid-column:span 1;grid-row:span 1}.project-header h3{font-size:1.2rem}.project-description{font-size:.8rem}}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Yeseva One,serif}.App{min-height:100vh}