body{background-color:#000;margin:0;padding:0;height:100%;overflow:hidden}#overlay{position:absolute;width:100%;height:100%}#image{width:100%;height:100vh;display:block;background-position:center;background-size:cover;overflow:hidden}.hidden{display:none}#menu{position:fixed;inset:0 0 auto 0;translate:0 -100%;background:#000000b3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:translate .45s cubic-bezier(.4,0,.2,1);z-index:20}#menu.open{translate:0 0}.menu__inner{max-width:28rem;margin:0 auto;padding:1.5rem;display:flex;gap:1rem;justify-content:center}.menu__link{padding:.75rem 1rem;border-radius:.375rem;text-align:center;font:500 1.125rem/1.4 system-ui;color:#f3f4f6;background:linear-gradient(45deg,#aaa 50%,#ffffff26 0) 100%/200% 100%;text-decoration:none;transition:background-position .3s}.menu__link:hover{background-position:0 0}.loop-btn{margin-left:auto;padding:.6rem 1rem;border:2px solid #f87171;background:transparent;color:#f87171;font:500 1rem/1.2 system-ui;cursor:pointer;transition:all .25s}.loop-btn.active{border-color:#4ade80;color:#4ade80}