nav#sidebar{background:#222;transition:.3s;height:100vh;min-width:150px;width:20vw;padding-inline:8px;position:relative}nav#sidebar>li{display:none}nav#sidebar li{padding-inline:12px;padding-block:6px;border-radius:6px}nav#sidebar li.cursor{transition:.3s;cursor:pointer}nav#sidebar li.cursor:hover{background:hsla(0,0%,100%,.2)}nav#sidebar li.active{background-color:hsla(0,0%,100%,.2666666667) !important}nav#sidebar ol{list-style:none;display:flex;flex-direction:column;gap:2px}nav#sidebar>ol{padding-left:0px;list-style:none}nav#sidebar>ol>li{counter-increment:list-counter}nav#sidebar>ol>li::before{content:counter(list-counter) ". "}nav#sidebar>ol>ol{counter-reset:nested-counter;padding-left:16px}nav#sidebar>ol>ol>li{counter-increment:nested-counter}nav#sidebar>ol>ol>li::before{content:counter(list-counter) "." counter(nested-counter) " "}nav#sidebar.hidden{margin-left:calc(-20vw - 16px)}button#hide-sidebar{z-index:1;position:absolute;top:16px;right:0px;transform:translateX(calc(100% + 16px));background:#222;color:#fff;border:none;font-size:26px;cursor:pointer;height:40px;transition:.3s;aspect-ratio:1/1;border-radius:8px}button#hide-sidebar:hover{background:#333}@media(max-width: 1200px){nav#sidebar{left:0;z-index:2;width:max(350px,40vw);position:absolute}nav#sidebar.hidden{margin-left:calc(-1*max(350px,40vw) - 16px)}}@media(max-width: 800px){nav#sidebar{width:calc(100vw - 16px);left:0;position:absolute}nav#sidebar.hidden{margin-left:-100vw}}