:root{--primary-color: #4CAF50;--secondary-color: #ff6347;--background-color: #ffffff;--font-main: "Josefin Slab", serif}body,html{margin:0;padding:0;height:100%;font-family:var(--font-main);background-color:var(--background-color);overflow-x:hidden}.App{display:flex;height:100vh}.navBar{position:fixed;top:7%;left:2%;width:5%;height:15%;background-color:transparent;padding:2vw;display:flex;flex-direction:column;justify-content:start;font-size:clamp(13px,1vw,16px);line-height:3vh;z-index:10}.navBar a{color:#000;text-decoration:none}.navBar ul{list-style:none;padding:0}.navBar li{margin-bottom:10px;cursor:pointer}.app-logo{position:absolute;top:10px;right:10px;width:100px;height:auto}@media (max-width: 820px){.App{flex-direction:column;height:auto;min-height:100vh}.navBar{position:sticky;top:0;left:0;width:100%;height:auto;flex-direction:row;justify-content:center;padding:10px 12px;box-sizing:border-box;font-size:15px;line-height:normal;background-color:#ffffff73;backdrop-filter:blur(12px) saturate(160%);-webkit-backdrop-filter:blur(12px) saturate(160%);border-bottom:1px solid rgba(0,0,0,.06)}.navBar ul{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 18px;margin:0}.navBar li{margin-bottom:0}.app-logo{display:none}}.profile{flex-grow:1;background:var(--background-color);background-size:cover;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:absolute;height:60%;width:30%;left:3%;bottom:4%}.profile h1{font-family:Josefin Slab,serif;font-optical-sizing:auto;font-weight:400;font-size:clamp(22px,1.8vw,48px);margin-bottom:.2em}.name-alt{font-family:Josefin Slab,serif;font-weight:300;color:#666;font-size:clamp(12px,.95vw,18px);margin-top:0;margin-bottom:.6em}.profile-picture{width:clamp(140px,20vw,520px);height:clamp(140px,20vw,520px);object-fit:cover;object-position:center;border-radius:10%;margin-bottom:2vh}.introduction{font-family:Josefin Slab,serif;font-optical-sizing:auto;font-weight:100;max-width:26vw;font-size:clamp(14px,1.15vw,30px)}.quote{font-family:Josefin Slab,serif;font-optical-sizing:auto;font-weight:300;font-style:normal;max-width:20vw;font-size:clamp(13px,1vw,26px)}.author{font-style:italic;color:#666;font-size:clamp(11px,.85vw,22px)}@media (max-width: 820px){.profile{position:static;width:100%;height:auto;box-sizing:border-box;padding:24px 20px 8px;left:auto;bottom:auto}.introduction,.quote{max-width:90%}}.media-carousel{position:relative;width:100%;height:100%;overflow:hidden;border-radius:8px}.media-carousel__track{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.media-carousel__track::-webkit-scrollbar{display:none}.media-carousel__slide{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start}.media-carousel__slide img,.media-carousel__slide video{display:block;width:100%;height:100%;object-fit:cover;object-position:center}.media-carousel__arrow{position:absolute;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;border-radius:50%;background:#00000059;color:#fff;font-size:20px;line-height:1;cursor:pointer;opacity:0;transition:opacity .2s ease,background .2s ease;z-index:2}.media-carousel:hover .media-carousel__arrow{opacity:1}.media-carousel__arrow:hover{background:#0009}.media-carousel__arrow--prev{left:8px}.media-carousel__arrow--next{right:8px}.media-carousel__dots{position:absolute;bottom:8px;left:0;right:0;display:flex;justify-content:center;gap:6px;z-index:2}.media-carousel__dot{width:7px;height:7px;padding:0;border:none;border-radius:50%;background:#ffffff8c;box-shadow:0 0 2px #00000080;cursor:pointer;transition:background .2s ease,transform .2s ease}.media-carousel__dot.is-active{background:#fff;transform:scale(1.25)}@media (max-width: 820px){.media-carousel__arrow{display:none}}.projects-list{list-style:none;padding:0;margin:0}.project-item{display:flex;align-items:flex-start;justify-content:center;margin-bottom:2vw}.project-carousel{position:relative;width:clamp(300px,35vw,760px);height:clamp(171px,20vw,434px);flex-shrink:0;margin-left:2vw;margin-right:2vw;margin-top:5vh;margin-bottom:5vh}.project-details{display:flex;flex-direction:column;max-width:clamp(220px,40vw,480px);width:clamp(200px,20vw,440px);margin-right:4vw}.project-item__title{font-size:clamp(16px,1.4vw,36px);font-weight:700;color:#333;margin-bottom:.5vw}a.project-item__title{text-decoration:none;color:#333;cursor:pointer}a.project-item__title:hover{text-decoration:underline}.project-item__year{font-size:clamp(13px,1vw,26px);color:#666;margin-bottom:.5vw}.project-item__description,.project-item__details{font-size:clamp(13px,.9vw,24px);color:#444;margin-bottom:.5vw}.project-item__details{font-style:italic}.best-paper{color:#cc2d27;font-weight:700}.me{color:#000;font-weight:700}@media (max-width: 820px){.project-item{flex-direction:column;width:100%;box-sizing:border-box;min-width:0;margin-bottom:28px}.project-carousel{width:100%;height:auto;aspect-ratio:16 / 9;margin:0 0 12px}.project-carousel__arrow{display:none}.project-details{width:100%;max-width:100%;min-width:0;margin-right:0}.project-item__title,.project-item__details{overflow-wrap:anywhere}.project-item__title{font-size:18px}.project-item__year,.project-item__description,.project-item__details{font-size:14px}}.panel{position:absolute;right:0;top:0;width:65%;height:100vh;background-color:var(--background-color);padding:1vw;overflow-y:auto}@media (max-width: 820px){.panel{position:static;width:100%;height:auto;box-sizing:border-box;padding:8px 12px 32px;overflow-y:visible}}.works-page{display:flex;flex-direction:column;align-items:center;text-align:center;background:transparent;position:relative}.works-banner{background-color:#fff0;text-align:center;width:100%;padding:10px 0;position:fixed;top:0;z-index:1}.works-title{font-size:2rem;color:#333;text-align:center;margin-bottom:.5rem;font-family:Tangerine,cursive;transition:opacity .3s ease}.works-title.hidden{opacity:0;transition:opacity .3s ease}.search-bar{margin-top:1rem;padding:.5rem 1rem;border-radius:25px;background-color:#c5c5c5;box-shadow:0 2px 5px #0000001a;display:inline-block}.search-bar input{border:none;outline:none;font-size:1rem;width:200px;background-color:#c5c5c5;color:#000;padding:.5rem}.works-list{list-style:none;padding-top:15vh;width:100vw;overflow-y:auto;display:flex;flex-direction:column;align-items:center;row-gap:8vh;box-sizing:border-box;z-index:0}.work-row{display:flex;justify-content:center;max-width:70vw;gap:8vw}.work-item{flex:0 0 48%;font-size:1.1rem;display:flex;margin:0;text-align:left;align-items:flex-start;flex-direction:column}.work-carousel{position:relative;width:100%;aspect-ratio:16 / 9;margin-bottom:2vw}.work-title{font-size:clamp(15px,1.1vw,18px);font-weight:700;color:#333;margin-bottom:0vw}.work-year{font-size:.9rem;color:#666;margin-bottom:1vw}.work-description,.work-details{font-size:.9rem;color:#444;margin-bottom:5px}.work-details{font-style:italic}@media (max-width: 820px){.works-list{padding-top:80px;row-gap:36px}.work-row{flex-direction:column;max-width:88vw;gap:36px}.work-item{flex:1 1 100%;width:100%}.work-item img{margin-bottom:12px}}.art-banner{background-color:#fff0;text-align:center;width:100%;padding:10px 0;position:fixed;top:0;z-index:1;font-family:Tangerine,cursive;font-weight:200;font-style:normal;font-size:2.5rem;color:#000}.art-container{display:flex;flex-direction:column;align-items:center;overflow-y:scroll;height:80vh;margin:0 auto;width:100vw;padding-top:15vh;z-index:0}.art-row{display:flex;flex-wrap:wrap;justify-content:center;margin-bottom:20px;width:100%;max-width:80vw;gap:3vw}.art-item{text-align:center}.art-item img{max-width:100%;height:auto;width:auto;max-height:40vw;object-fit:contain;margin:0 1vw}.art-item p{margin-top:10px;font-size:14px;color:#333}@media (max-width: 820px){.art-banner{font-size:2rem}.art-container{height:auto;overflow-y:visible;padding-top:80px;padding-bottom:32px}.art-row{max-width:92vw;gap:16px;margin-bottom:16px}.art-item img{max-height:80vw;margin:0}}.container{width:100%;margin:0 auto;text-align:center;overflow:auto}.header{margin-top:10vw;margin-bottom:10vw}.title{font-family:Tangerine,cursive;font-weight:700;font-style:normal;font-size:clamp(40px,4.5vw,80px);color:#000;margin-right:20vw}.content{font-size:clamp(15px,1.2vw,18px);color:#333;line-height:1.6;margin:0 auto;max-width:35vw;text-align:left;margin-left:40vw;margin-bottom:2vw}.content p{margin-bottom:0%}@media (max-width: 820px){.header{margin-top:100px;margin-bottom:40px}.title{margin-right:0}.content{max-width:90%;margin:0 auto 20px;padding:0 20px;box-sizing:border-box}}.contact-container{width:100%;margin:0 auto;text-align:left;font-size:clamp(15px,1.2vw,18px);color:#333;line-height:1.6;max-width:35vw;margin-left:40vw;margin-top:10vw;margin-bottom:10vw;font-family:Josefin Slab,serif}.contact-title{font-family:Tangerine,cursive;font-size:clamp(32px,3vw,56px);margin-bottom:2vw;color:#000}.contact-intro{margin-bottom:2vw}.contact-info p{margin-bottom:1vw;font-size:clamp(14px,1.1vw,17px)}.contact-info a{color:#333;text-decoration:none;font-weight:700}.contact-info a:hover{text-decoration:underline}@media (max-width: 820px){.contact-container{max-width:90%;margin:90px auto 48px;padding:0 20px;box-sizing:border-box}.contact-intro,.contact-info p{margin-bottom:16px}.contact-title{margin-bottom:18px}}
