@-webkit-keyframes out{0%{opacity:1;pointer-events:all;touch-action:all}to{opacity:0;pointer-events:none;touch-action:none}}@keyframes out{0%{opacity:1;pointer-events:all;touch-action:all}to{opacity:0;pointer-events:none;touch-action:none}}@-webkit-keyframes in{0%{opacity:0;pointer-events:none;touch-action:none}to{opacity:1;pointer-events:all;touch-action:all}}@keyframes in{0%{opacity:0;pointer-events:none;touch-action:none}to{opacity:1;pointer-events:all;touch-action:all}}#loading{z-index:50;position:absolute;display:grid;place-items:center;height:100vh;max-height:100vh;width:100vw;max-width:100vw;opacity:1;background:#000;background:radial-gradient(circle,#fff 0,#fff 25%,#c7c7c7 100%)}#loading.out{-webkit-animation:out .5s ease-in-out .5s 1 normal;animation:out .5s ease-in-out .5s 1 normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}#loading .content{display:flex;flex-direction:column;align-items:center}#loading button{opacity:0;position:absolute;pointer-events:none;touch-action:none;cursor:pointer;font-family:Major Mono Display,monospace;background-color:transparent;border:1px solid #000;padding:1rem 2rem;transition:background-color .15s ease-in-out}#loading button:hover{background-color:rgba(0,0,0,.1)}#loading button.in{-webkit-animation:in .5s ease-in-out 0s 1 normal;animation:in .5s ease-in-out 0s 1 normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:2s;animation-delay:2s}#loading .text{text-align:center;margin-bottom:5rem}#loading .text h1{font-family:Poppins,sans-serif}#loading .text h3{font-family:Major Mono Display,monospace;font-weight:200}#loading .loadbar{display:grid;place-items:center;position:relative;text-align:center;width:100vw;height:1rem;opacity:1}#loading .loadbar .out{-webkit-animation:out .5s ease-in-out .5s 1 normal;animation:out .5s ease-in-out .5s 1 normal;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-delay:1s;animation-delay:1s;-webkit-animation-duration:1s;animation-duration:1s}#loading .loadbar p{font-family:Major Mono Display,monospace;font-size:1rem;color:#fff}#loading .loadbar .bar{position:absolute;z-index:-1;inset:0;transform:scaleX(1);transition:transform .5s ease-in-out;background-color:#000}#experiments{height:100vh;width:100vw;max-height:100vh;max-width:100vw}#experiments header{position:absolute;z-index:10;display:flex;width:100%;flex-direction:column;align-items:center}.experiment{height:100vh;width:100vw;max-height:100vh;max-width:100vw}.experiment .loadingIndicator{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background-color:#fff;color:#000;opacity:1;font-family:Major Mono Display,monospace;transition:opacity .5s ease-in-out}.experiment .loadingIndicator.out{pointer-events:none;touch-action:none;opacity:0}.experiment .hud{position:fixed;left:2rem;top:2rem;z-index:10;display:flex;flex-direction:column;gap:1rem;font-family:Major Mono Display,monospace}.experiment .hud .back{position:relative;width:-webkit-max-content;width:-moz-max-content;width:max-content}.experiment .hud .back:hover .backdrop{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}.experiment .hud .back .backdrop{pointer-events:none;touch-action:none;z-index:-1;position:absolute;inset:-20% -2%;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);transition:-webkit-clip-path .15s ease-in-out;transition:clip-path .15s ease-in-out;transition:clip-path .15s ease-in-out,-webkit-clip-path .15s ease-in-out}.experiment .hud .codeBtn{position:fixed;bottom:2rem;right:2rem;cursor:pointer;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;transform:scale(1);transition:transform .2s ease-in-out}.experiment .hud .codeBtn:hover{transform:scale(1.125)}.experiment .hud .codeBtn a{font-family:Poppins,sans-serif;font-weight:light;text-decoration:none}#portfolioLink{position:fixed;top:5%;left:5%;z-index:5;padding:.75rem 1rem;background-color:hsla(0,0%,100%,0);color:#000;border:2px solid #000;text-decoration:none}#portfolioLink:hover:after{-webkit-clip-path:inset(0 0 0 0);clip-path:inset(0 0 0 0)}#portfolioLink:after{position:absolute;inset:-2%;content:"My Portfolio";display:grid;place-items:center;color:#fff;background-color:#000;-webkit-clip-path:inset(0 100% 0 0);clip-path:inset(0 100% 0 0);transition:-webkit-clip-path .15s ease-in-out;transition:clip-path .15s ease-in-out;transition:clip-path .15s ease-in-out,-webkit-clip-path .15s ease-in-out}@media(max-width:768px){#portfolioLink{position:absolute;top:5%;left:50%;transform:translate(-50%,-50%);border:none;text-decoration:underline}}*{box-sizing:border-box;padding:0;margin:0}body{height:100vh;width:100vw}#__next,body,html{width:100%;height:100%;margin:0;padding:0;overflow:hidden}