.container{width:100vw;height:100svh;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.header{width:100%;background:var(--bg-color-2)}.title{display:flex;align-items:center;justify-content:center;gap:.5rem}.title .span{text-transform:uppercase;padding:.2rem .5rem;color:var(--white);background-color:var(--accent);border-radius:.5rem}.wrapper{width:100%;max-width:40rem;margin-inline:auto;padding:.8rem 1.5rem}.footer{margin-top:auto;padding-bottom:1rem}.footer .wrapper{display:flex;justify-content:center;align-items:center;gap:1rem}.icon-arrow-left,.icon-arrow-right{height:1rem;font-size:1rem}.icon-arrow-left{margin-right:auto}.icon-arrow-right{margin-left:auto}.btn{width:100%;max-width:8rem;height:3rem;padding:1rem;font-size:1rem;display:flex;align-items:center;color:var(--btn-text-color);background-color:var(--btn-bg-color);border:none;border-radius:1rem;cursor:pointer;opacity:1}.btn:not([disabled]):hover{background-color:var(--btn-bg-color-hover)}.btn:note([disabled]):active{opacity:1;background-color:var(--btn-bg-color-active);color:var(--btn-text-color-active)}.btn[disabled]{opacity:.2;cursor:auto}.btn-close{width:fit-content}.icon-close{height:1.5rem;font-size:1rem}.menu{flex-grow:1;width:fit-content;height:100%;margin:2rem calc(2rem * 210 / 297);display:flex;justify-content:center}.menu-container{position:relative;height:100%;aspect-ratio:210/297;display:flex;justify-content:center;align-items:center;perspective:1500px}.menu-container.mobile{margin:1rem}.menu.mobile .menu-container.desktop,.menu.desktop .menu-container.mobile{display:none}.menu-page{position:absolute;height:100%;aspect-ratio:210/297;border-radius:0 .5rem .5rem 0;overflow:hidden;top:0;left:0;transform-origin:center left;transform:rotateY(0);transition:transform .5s ease-in-out}.menu-page.hidden{display:none}.menu-page.cover{display:block}.menu-page.flipped{transform:rotateY(-180deg);transition:transform .5s ease-in-out}@keyframes flip-left{0%{transform:rotateY(0)}to{transform:rotateY(-180deg)}}@keyframes flip-right{0%{transform:rotateY(-180deg)}to{transform:rotateY(0)}}.menu-page-face{flex-grow:1;width:100%;height:100%;aspect-ratio:210/297}.menu-page-face.front{position:absolute;top:0;left:0;z-index:1;backface-visibility:hidden}.menu-page-face.back img{transform:rotateY(180deg)}.menu-page-face img{opacity:0;width:100%}.menu-page-face img.loaded{opacity:1}.menu-page .menu-page-face.front{opacity:1;transition:opacity .5s cubic-bezier(1,0,0,1)}.menu-page.flipped .menu-page-face.front{opacity:0;transition:opacity .5s cubic-bezier(1,0,0,1)}.loading-animation{position:absolute;z-index:-1;width:100%;height:100%;top:0;left:0;background:var(--bg-color-2);border:1px solid var(--bg-color-4);border-radius:0 .5rem .5rem 0;display:flex;justify-content:center;align-items:center}.loading-animation .spinner{width:2.5rem;height:2.5rem;border:.3rem solid var(--bg-color-3);border-bottom-color:var(--accent);border-radius:50%;display:inline-block;animation:rotation 1s linear infinite}@keyframes hide-page-face{0%{opacity:1}49%{opacity:1}50%{opacity:0}to{opacity:0}}@keyframes show-page{0%{opacity:0}49%{opacity:0}50%{opacity:1}to{opacity:1}}@keyframes rotation{0%{transform:rotate(0)}to{transform:rotate(360deg)}}