@import "https://fonts.cdnfonts.com/css/pp-neue-montreal";
:root{--bg:#fff;--fg:#1a1a1a}*{box-sizing:border-box;margin:0;padding:0}::-webkit-scrollbar{display:none}body{color:var(--fg);background-color:#000;font-family:PP Neue Montreal,sans-serif}img{object-fit:cover;width:100%;height:100%}.navbar{z-index:2;justify-content:space-between;align-items:flex-start;width:100%;padding:1rem;display:flex;position:fixed;top:0;left:0}.navbar-items{gap:clamp(1rem,4vw,2rem);display:flex}.navbar-item{padding:1.5rem}.navbar-item a{color:var(--fg);font-weight:500;text-decoration:none}.home{background-color:var(--bg);text-align:center;justify-content:center;align-items:center;width:100%;height:100svh;display:flex;position:relative}.home h1{text-transform:uppercase;width:100%;color:var(--fg);clip-path:polygon(0 0,100% 0,100% 100%,0% 100%);font-size:20vw;font-weight:bolder;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.projects{width:100%;height:100svh;overflow-y:auto}.projects-container{background-color:var(--bg);text-align:center;justify-content:center;align-items:center;width:100%;min-height:100svh;padding:15rem 2rem;display:flex}.projects-container h1{text-transform:uppercase;color:var(--fg);font-size:15vw;font-weight:bolder}.info{background-color:var(--bg);text-align:center;justify-content:center;align-items:center;width:100%;height:100%;min-height:100svh;display:flex}.col{flex:1;justify-content:center;align-items:center;display:flex}.col h1{text-transform:uppercase;color:var(--fg);font-size:15vw;font-weight:bolder}.col p{color:var(--fg);font-size:2rem;font-weight:500}@media (max-width:1000px){.info{flex-direction:column}.info p{font-size:1.25rem}}::view-transition-group(navbar){z-index:100;animation:none}::view-transition-old(.page-exit){animation:1.6s cubic-bezier(.65,0,.35,1) both page-out}::view-transition-new(.page-enter){animation:1.5s cubic-bezier(.65,0,.35,1) .25s both page-in}@keyframes page-out{0%{opacity:1;transform:translate(0%)translateY(0%)rotate(0)scale(1)}40%{opacity:.5;transform:translate(0%)translateY(0%)rotate(0)scale(.8)}to{opacity:.25;transform:translate(-50%)translateY(20%)rotate(-10deg)scale(.65)}}@keyframes page-in{0%{clip-path:polygon(50% 50%,100% 50%,100% 100%,50% 100%);transform:translate(100%)translateY(20%)}to{clip-path:polygon(0% 0%,100% 0%,100% 100%,0% 100%);transform:translate(0%)translateY(0%)}}