*{margin:0;padding:0}.app{display:flex;justify-content:center;align-items:center;height:100svh;width:100svw;color:#fff;position:relative;font-family:Roboto,sans-serif;background:#242424;transition:background-color .5s ease}.app.page-active .background{filter:blur(5px)}.app .pages{z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;transition:all .5 ease}.app .pages>*{margin:.5rem}.app .pages.gapped>*{margin:0rem}.app .pages>button{position:relative;width:30%;font-family:inherit;font-weight:500;font-size:18px;letter-spacing:.05em;border-radius:.3em;cursor:pointer;border:none;padding:1rem;background:linear-gradient(to right,var(--gradient-start),var(--gradient-end));color:#f8f8ff;overflow:hidden;transition:all .4s cubic-bezier(.5,1,.8,1);box-shadow:0 0 2px var(--gradient-start)}.app .pages>button span{position:relative;transition:text-shadow .4s cubic-bezier(.5,1,.8,1)}.app .pages>button.full{width:100%;border-radius:0;box-shadow:none}.app .pages>button:hover{box-shadow:0 0 20px var(--gradient-start)}.app .pages>button:hover span{text-shadow:0 0 20px var(--gradient-start)}.app .pages>button:hover~.background .symbol{filter:blur(5px)}.app .pages>button:before,.app .pages>button:after{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0}.app .pages>button:before{content:"";background:#000;width:120%;left:-10%;transform:skew(30deg);transition:transform 1s cubic-bezier(.4,1.2,.8,1)}.app .pages>button:hover:before{transform:translate3d(100%,0,0)}.app .pages>button:active{transform:scale(.95)}.app .pages .page{background:#0000002c;width:100%;height:0%;overflow:hidden;transition:height .5s ease;display:flex;justify-content:center;align-items:center}.app .pages .page.open{height:100%}:root{--background-color: black;--text-color: #973f00}.projects-container{height:100%;width:100%;background:#00000080;display:flex;justify-content:center;align-items:center}.projects-container .projects-nav{margin-top:1rem;width:100%;height:100%;background:#3333331a;padding:1rem;overflow-y:auto;display:flex;flex-direction:column;gap:.2rem}.projects-container .projects-nav .projectList{display:flex;flex-direction:column;gap:.2rem}.projects-container .projects-nav .projectList button{--main-color: #ff6a00;--main-bg-color: #973f00;--pattern-color: #4e2100;filter:hue-rotate(0deg);cursor:pointer;text-transform:uppercase;letter-spacing:.2rem;background:radial-gradient(circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95%),linear-gradient(var(--pattern-color) 1px,transparent 1px),linear-gradient(to right,var(--pattern-color) 1px,transparent 1px);background-size:cover,15px 15px,15px 15px;background-position:center center,center center,center center;border-image:radial-gradient(circle,var(--main-color) 0%,rgba(0,0,0,0) 100%) 1;border-width:1px 0 1px 0;color:var(--main-color);padding:.75rem 0;font-weight:700;font-size:1rem;transition:background-size .2s ease-in-out}.projects-container .projects-nav .projectList button:hover{background-size:cover,10px 10px,10px 10px}.projects-container .projects-nav .projectList button:active{filter:hue-rotate(-.25turn)}.projects-container .projects-nav .projectList button.reset-button{--main-color: #ee0979;--main-bg-color: #680133a4;--pattern-color: #38011b71;font-weight:700;font-size:.7rem}.projects-container .projects-display{--main-color: #ff6a00;--main-bg-color: #973f0073;--pattern-color: #4e2100;position:fixed;top:0;width:100%;height:100%;background:#fffc;overflow:hidden;background:radial-gradient(circle,var(--main-bg-color) 0%,rgba(0,0,0,0) 95%),linear-gradient(var(--pattern-color) 1px,transparent 1px),linear-gradient(to right,var(--pattern-color) 1px,transparent 1px);background-size:cover,15px 15px,15px 15px;background-position:center center,center center,center center;border-image:radial-gradient(circle,var(--main-color) 0%,rgba(0,0,0,0) 100%) 1;border-width:1px 0 1px 0;display:flex;justify-content:center;align-items:center}.projects-container .projects-display .proCloseBtn{position:absolute;top:0;right:0;width:3rem;height:3rem;border:2px solid black;overflow:hidden;transition:border-color .5s ease-in-out;background:#973f0073;color:#fff}.projects-container .projects-display .proCloseBtn:hover{border-color:#ff6a00}.projects-container .projects-display .project-iframe{width:100%;height:100%;scale:.9;border-radius:10px;border:none}.projects-container .wrapper{display:grid;place-content:center;font-family:Oswald,sans-serif;font-size:2.5rem;font-weight:700;text-transform:uppercase;color:var(--text-color)}.projects-container .wrapper>div{grid-area:1/1/-1/-1}.projects-container .wrapper .top{clip-path:polygon(0% 0%,100% 0%,100% 48%,0% 58%)}.projects-container .wrapper .bottom{clip-path:polygon(0% 60%,100% 50%,100% 100%,0% 100%);color:transparent;background:-webkit-linear-gradient(177deg,black 53%,var(--text-color) 65%);background:linear-gradient(177deg,black 53%,var(--text-color) 65%);background-clip:text;-webkit-background-clip:text;transform:translate(-.02em)}.background{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle,#000000d3,#000);transition:1s all}.background .symbol{position:absolute;color:#ffffff80;text-shadow:0 0 10px rgba(0,0,0,.5);animation:float 5s infinite linear,rotate3d 5s infinite linear}.background .symbol[style*="font-weight: bold"]{text-shadow:0 0 20px rgba(0,0,0,.8)}@keyframes float{0%{transform:translateZ(0)}to{transform:translate3d(calc(200px * var(--direction-x)),calc(200px * var(--direction-y)),calc(200px * var(--direction-z)))}}@keyframes rotate3d{0%{transform:rotate3d(1,1,1,0)}to{transform:rotate3d(1,1,1,360deg)}}