body,html{height:100vh;width:100vw;margin:0;padding:0;overflow:hidden}.app-width{width:90vw}.bottomSpace{margin-bottom:15px}.fade-enter-active,.fade-leave-active{transition:opacity .5s}.fade-enter,.fade-leave-to{opacity:0}.slide-fade-enter-active{transition:all .3s ease}.slide-fade-leave-active{transition:all .8s cubic-bezier(1,.5,.8,1)}.slide-fade-enter,.slide-fade-leave-to{transform:translateX(10px);opacity:0}*,:after,:before{position:relative;box-sizing:border-box;transition:all .3s cubic-bezier(.5,0,.5,1)}.ui-nav{overflow:hidden;position:fixed;bottom:.4rem;width:90vw;left:5vw;height:10vh;display:flex;align-items:stretch;text-align:center;border-radius:.75rem .75rem 1.25rem 1.25rem;z-index:3}.ui-bg{position:absolute;top:0;left:0;width:100%;height:100%}.ui-bg .ui-dot{background:#f0f0f0;border-top:2px solid #fff;position:absolute;top:0;z-index:2;transform:scale(.85);box-shadow:0 .5vh 1vh rgba(0,0,0,.3)}.ui-bg .ui-dot,.ui-bg>.ui-cutout{width:9vh;height:9vh;border-radius:50%;left:calc((33.3333% - 9vh)/2)}.ui-bg>.ui-cutout{z-index:3;box-shadow:4.5vh 4.5vh 0 #f0f0f0,-4.5vh 4.5vh 0 #f0f0f0,0 9vh 0 #f0f0f0}.ui-bg>.ui-cutout:after,.ui-bg>.ui-cutout:before{content:"";position:absolute;width:90vw;height:130%;background-color:#fff;top:30%;background:#f0f0f0;border-top:2px solid #fff}.ui-bg>.ui-cutout:before{right:100%;border-top-right-radius:1vh}.ui-bg>.ui-cutout:after{left:100%;border-top-left-radius:1vh}.ui-label{flex:1;align-items:center;justify-content:center;cursor:pointer;z-index:2;top:20%;font-size:3.6vh}.ui-label,.ui-page,.ui-pages{display:flex}.ui-page{width:100%;margin-right:-100%;flex-direction:column;justify-content:center;align-items:center;font-family:monospace;text-shadow:0 1px 0 rgba(0,0,0,.3)}input[name=choice]{position:absolute;top:0;opacity:0}#nav-1:checked~* label[for=nav-1],#nav-2:checked~* label[for=nav-2],#nav-3:checked~* label[for=nav-3]{transform:translateY(-20%);color:#76b371}[data-page]{opacity:0;transform:translateX(-100%)}#nav-1:checked~* [data-page="1"],#nav-2:checked~* [data-page="2"],#nav-3:checked~* [data-page="3"]{opacity:1;transform:translateX(0)}#nav-1:checked~* [data-page="1"]~[data-page],#nav-2:checked~* [data-page="2"]~[data-page],#nav-3:checked~* [data-page="3"]~[data-page]{transform:translateX(100%)}.ui-bg{transform:translateX(calc(var(--x)*33.3333%))}#nav-1:checked~#app{--x:0}#nav-2:checked~#app{--x:1}#nav-3:checked~#app{--x:2}