@import "https://fonts.googleapis.com/css2?family=Fuzzy+Bubbles:wght@400;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap";*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,sans-serif}html,body,#root{width:100%;height:100%;min-height:100%;overflow:hidden}body{background-color:tomato;background-repeat:no-repeat;font-family:system-ui,sans-serif}canvas{width:100%;height:100%;display:block;position:fixed;inset:0}.hamburger{z-index:200;cursor:pointer;background:0 0;border:none;padding:6px;display:none;position:fixed;top:1.25rem;left:1.25rem}.hamburger-icon,.hamburger-icon:before,.hamburger-icon:after{background:#fff;border-radius:2px;width:24px;height:2px;transition:transform .3s,opacity .3s;display:block}.hamburger-icon{position:relative}.hamburger-icon:before,.hamburger-icon:after{content:"";position:absolute;left:0}.hamburger-icon:before{top:-7px}.hamburger-icon:after{top:7px}.hamburger-icon.open{background:0 0}.hamburger-icon.open:before{transform:translateY(7px)rotate(45deg)}.hamburger-icon.open:after{transform:translateY(-7px)rotate(-45deg)}.navbar{z-index:100;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:flex-start;padding:.75rem 1rem;display:flex;position:fixed;top:3rem;left:7rem}.nav-backdrop{display:none}.nav-links{color:#fdfdfd;text-align:right;margin:0;padding:0;list-style:none;display:block}.nav-links li{margin-bottom:1.25rem;font-size:1rem;display:block}.nav-links li:last-child{margin-bottom:0}.nav-links a{color:#fff;text-decoration:none;display:inline-block}.main-content{color:#fff;-webkit-user-select:none;user-select:none;flex-direction:column;width:calc(100% - 15rem);display:flex;position:fixed;top:3rem;left:20rem}.introduction>img{width:clamp(200px,30vw,450px);margin-left:-30px}.about-me ul{margin:0;padding:0;list-style:none}.about-me li{align-items:center;gap:.75rem;margin:1.25rem 0;font-size:clamp(.8rem,1.4vw,1rem);line-height:1.6;display:flex}.about-me li:before{content:"";background-image:url(/images/star.png);background-position:50%;background-repeat:no-repeat;background-size:contain;flex-shrink:0;width:1.15rem;height:1.15rem;display:inline-block}.music-player{justify-content:center;margin-top:40px;display:flex}.ipod-img{z-index:1;background-repeat:no-repeat;background-size:70%;width:300px;height:600px;margin-left:-100px;position:relative}.album-cover{z-index:1;object-fit:cover;border-radius:6px;width:160px;position:absolute;top:15px;left:25px}.ipod-frame{object-fit:contain;z-index:2;pointer-events:none;width:70%;position:absolute}.btn{cursor:pointer;z-index:3;background:0 0;border:none;position:absolute}.play,.next,.prev{border-radius:50%;width:50px;height:50px}.play{top:245px;left:80px}.next{top:205px;left:120px}.prev{top:205px;left:40px}.btn:active{transform:scale(.95)}@keyframes pageEnter{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.page-transition{animation:.45s cubic-bezier(.22,1,.36,1) both pageEnter}.projects-grid{flex-wrap:wrap;align-items:flex-start;gap:2rem;margin-top:1rem;padding-right:4rem;display:flex}.sticky-note{filter:drop-shadow(2px 4px 6px #00000059);background-image:url(/images/sticky-note.png);background-repeat:no-repeat;background-size:cover;width:300px;height:300px;text-decoration:none;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s;position:relative;transform:rotate(-2deg)}.sticky-note:hover{filter:drop-shadow(6px 12px 16px #00000080);z-index:10;transform:rotate(0)scale(1.12)translateY(-8px)}.sticky-note:nth-child(2n){transform:rotate(1.5deg)}.sticky-note:nth-child(3n){transform:rotate(-1deg)}.sticky-note:nth-child(4n){transform:rotate(2.5deg)}.sticky-note:nth-child(2n):hover,.sticky-note:nth-child(3n):hover,.sticky-note:nth-child(4n):hover{transform:rotate(0)scale(1.12)translateY(-8px)}.sticky-note-inner{flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px 20px 20px 24px;display:flex;position:absolute;inset:0;transform:rotate(-2deg)}.sticky-media{aspect-ratio:16/9;border-radius:3px;width:90%;position:relative;left:12px;overflow:hidden}.sticky-project-img,.sticky-project-video{object-fit:cover;border-radius:3px;width:100%;height:100%;transition:opacity .3s;position:absolute;inset:0}.sticky-project-img{opacity:1;z-index:1}.sticky-project-video{opacity:0;z-index:2}.sticky-note:hover .sticky-project-img.has-video{opacity:0}.sticky-note:hover .sticky-project-video{opacity:1}.sticky-title{color:#3a2e00;text-align:center;z-index:3;font-size:1rem;font-weight:600;line-height:1.3;position:relative;left:.75rem}@media (width<=1024px){.navbar{top:2rem;left:3rem}.main-content{width:calc(100% - 16rem);top:2rem;left:14rem}.sticky-note{width:220px;height:220px}.ipod-img{width:220px;height:440px;margin-left:-60px}.album-cover{width:115px;top:11px;left:18px}.play{top:178px;left:58px}.next{top:148px;left:88px}.prev{top:148px;left:28px}}@media (width<=640px){.hamburger{display:block}.navbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#0009;width:75vw;max-width:280px;height:100%;padding:5rem 2rem 2rem;transition:transform .3s cubic-bezier(.22,1,.36,1);top:0;left:0;overflow-y:auto;transform:translate(-100%)}.navbar--open{transform:translate(0)}.nav-backdrop{z-index:90;background:#0006;display:block;position:fixed;inset:0}.nav-links li{margin-bottom:1.75rem;font-size:1.2rem}.main-content{width:calc(100% - 2.5rem);top:4rem;left:1.25rem}.introduction>img{width:clamp(160px,60vw,280px);margin-left:0}.about-me li{margin:.9rem 0;font-size:.85rem}.projects-grid{grid-template-columns:1fr 1fr;gap:1rem;padding-right:0;display:grid}.sticky-note{width:100%;height:0;padding-bottom:100%}.music-player{margin-top:20px}.ipod-img{width:160px;height:320px;margin-left:-30px}.album-cover{width:84px;top:8px;left:13px}.play{width:38px;height:38px;top:130px;left:42px}.next{width:38px;height:38px;top:108px;left:64px}.prev{width:38px;height:38px;top:108px;left:20px}}