:root{--page-tx:10%;--page-ty:5%;--page-tx-mobile:8%;--page-ty-mobile:4%;--menu-transition:.3s ease}.center{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.menu{width:100%;height:100%;position:relative}#toggle{display:none}.page{width:100%;height:100%;transition:transform var(--menu-transition),left var(--menu-transition);flex-direction:column;justify-content:center;align-items:center;font-family:poppins;display:flex;position:absolute;top:0;left:0}.head{width:100%;height:60px;font-size:18px;font-family:500;align-items:center;display:flex}.title{opacity:0;visibility:hidden;margin-left:5px;transition:opacity .25s,transform .25s,visibility 0s .25s}.content{flex-grow:1;justify-content:center;align-items:center;width:100%;transition:all .2s ease-out;display:flex}#toggle:checked~.menu .page{transform:translate(var(--page-tx),var(--page-ty));border-radius:3mm}#toggle:checked~.menu .page .head .title{opacity:1;visibility:visible;transition:opacity .25s,transform .25s,visibility}#toggle:checked~.menu .page .content{opacity:0}@media (max-width:480px){:root{--page-tx:var(--page-tx-mobile);--page-ty:var(--page-ty-mobile)}@media (max-width:375px){:root{--page-tx-mobile:6%;--page-ty-mobile:3%}}}