:root{--primary-colour: ##f1f0ef;--secondary-colour: #ffffff;--background-colour: #000000;--card-background: #ffffff;--card-shadow: rgba(0, 0, 0, .1);--button-colour: #000000;--button-text-colour: #ffffff}body{margin:0;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;background-color:var(--background-colour);line-height:1.6}.hero-content{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.5rem 2rem}.hero-left{display:flex;flex-direction:column;gap:.6rem}.hero-title{margin:0;font-size:1.8rem;font-weight:700;line-height:1.2}.hero-pipe{margin:0 .5rem}.hero-subtitle{font-weight:400;font-size:1rem;opacity:.8}.hero-lede{margin:0;font-size:1rem;font-weight:400}.hero-small{margin:0;font-size:.9rem;font-weight:600}.hero-cta{display:inline-block;padding:.8rem 1.2rem;border:2px solid currentColor;border-radius:8px;font-weight:700;text-decoration:none;white-space:nowrap}.cosplay-item{aspect-ratio:4/3;object-fit:cover;object-position:center;display:block}.hcyclebarcentered{overflow:hidden;width:100%;position:relative}.hcyclebarcentered-track{display:flex;flex-direction:row;will-change:transform;transition:transform .4s ease}.hcyclebarcentered-track.is-animating{transition:transform .4s ease}.hcyclebarcentered-item{display:flex;align-items:center;justify-content:center;line-height:0}.hcyclebar{overflow:hidden;width:100%;position:relative}.hcyclebar-track{display:flex;flex-direction:row;will-change:transform;transition:transform .4s ease}.hcyclebar-track.is-animating{transition:transform .4s ease}.hcyclebar-item{display:flex;align-items:flex-start;justify-content:center;line-height:0}.labpic{text-align:center;line-height:1.5}.labpic_inline_landscape{height:130px;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block}.labpic_inline_portrait{height:230px;aspect-ratio:3/4;object-fit:cover;object-position:center;display:block}.testbox{border:1px solid red}.navbar-logo{transition:all .3s ease-in-out}.navbar-logo:hover{transform:scale(1.1)}.navbar-styles{position:fixed;top:10px;left:0;right:0;width:96.5%;padding:.5rem;height:20px;margin:0 auto;background-color:#fff;border-radius:12px;box-shadow:0 3px 4px 3px #0000000d;text-align:left;transition:all .3s ease-in-out}.rounded-button{background-color:#fcfcfc;color:#000;font-weight:600;font-size:16px;padding:12px 24px;border:none;border-radius:12px;box-shadow:0 3px 4px 3px #0000000d;cursor:pointer;transition:all .2s ease-in-out}.rounded-button:hover{background-color:#fcfcfc;transform:scale(1.01);box-shadow:0 3px 5px 4px #0000000f}.rounded-button:active{transform:translateY(0);box-shadow:0 4px 4px 4px #00000012}.scrollFadeBg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity .12s linear}.p-6,.self{text-align:center}.self img{max-width:100%;height:auto;border-radius:8px}.song-hover{transform:translate(0);color:#fff;transition:all .3s ease-in-out}.song-hover:hover{transform:translate(10px);color:#55da95;transition:all .3s ease-in-out}.project-card{width:90%}.big-zoom{transition:all .5s ease-in-out}.big-zoom:hover{transform:scale(2) translateY(-50px) translate(75px)}.zoom{transition:all .5s ease-in-out;height:270px;overflow:hidden;border-radius:12px}.zoom:hover{height:600px}.glass-effect{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(255,255,255,.06);border:2px solid rgba(255,255,255,.06);border-radius:12px;box-shadow:0 3px 4px 3px #9696960d;cursor:pointer;transition:all .2s ease-in-out,opacity .5s ease-in-out;color:#fff;font-family:Helvetica;font-weight:100;text-align:left;text-shadow:2px 2px 5px rgba(0,0,0,.5)}.glass-effect:hover{transform:scale(1.01);box-shadow:0 3px 5px 4px #0000000f}.glass-effect-2{border-radius:12px;cursor:pointer;transition:all .2s ease-in-out,opacity .5s ease-in-out;color:#fff;font-family:Helvetica;font-weight:100;text-align:left}.blinker{animation:blinkColor .7s infinite alternate}@keyframes blinkColor{0%{color:#fff}to{color:#333}}.navblinker{animation:navblinkColor 1s infinite alternate}@keyframes navblinkColor{0%{color:#d4d4d4}to{color:#000}}.glass-effect-2:hover{transform:scale(1.01);box-shadow:0 3px 5px 4px #0000000f}.nav-hover-child{opacity:0;transition:all .5s ease-in-out}.nav-hover-parent:hover .nav-hover-child{opacity:1;transition:all .5s ease-in-out}.hoverchild{opacity:0;transition:all .5s ease-in-out}.hoverparent:hover .hoverchild{opacity:1;transition:all .5s ease-in-out}.contact-hover-parent:hover .contact-hover-child{opacity:1;transform:translate(10px);transition:all .5s ease-in-out}.contact-hover-parent:hover{transform:translate(10px);transition:all .5s ease-in-out}.contact-hover-parent{transition:all .5s ease-in-out;transform:translate(0)}.contact-hover-child{opacity:0;transform:translate(0);transition:all .5s ease-in-out}.navbar{background-color:var(--primary-colour);color:#fff;padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.navbar-title{font-size:1.5rem;font-weight:700;margin:0}.navbar-links{display:flex;gap:1rem}.navbar-links a{color:#000;text-decoration:none;font-weight:600;transition:opacity .2s ease}.navbar-links a:hover{opacity:.8}.main-content{display:flex;padding:2rem 1rem;max-width:1200px;justify-content:center;justify-items:center;margin:0 auto}.project-card{background-color:var(--card-background);border-radius:8px;box-shadow:0 2px 6px var(--card-shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s ease}.project-card:hover{transform:translateY(-2px)}.project-image-wrapper{position:relative;width:100%;padding-top:56.25%;overflow:hidden}.project-image-wrapper img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.image-controls{position:absolute;bottom:.5rem;right:.5rem;display:flex;gap:.5rem}.image-controls button{background-color:#00000080;border:none;color:#fff;padding:.25rem .5rem;font-size:.9rem;border-radius:4px;cursor:pointer;transition:background-color .2s ease}.image-controls button:hover{background-color:#000000b3}.project-content{padding:1rem 1.25rem;flex:1;display:flex;flex-direction:column}.project-content h2{margin:0 0 .5rem;font-size:1.35rem;color:var(--primary-colour)}.project-content h3{margin:0;font-size:1rem;font-weight:600;color:var(--secondary-colour);margin-bottom:.5rem}.project-content p{flex:1;margin:0 0 1rem}.project-content a.button{align-self:flex-start;text-decoration:none;background-color:var(--button-colour);color:var(--button-text-colour);padding:.5rem 1rem;border-radius:4px;font-weight:600;transition:background-color .2s ease}.project-content a.button:hover{background-color:#1b2e54}
