:root {
  --drawer-bg:#0f172a;
  --drawer-text:#c3d9f4;
  --drawer-sep:rgba(148,163,184,.25);
  --drawer-hover:rgba(147,197,253,.12);
  --fab-bg:#1f2937;
  --fab-fg:#ffffff;

  --topbar-h:64px;
  --sbw: 0px;
}

.fab{
  position:fixed;
  top:calc((var(--topbar-h) - 46px)/2);
  right:20px;
  z-index:60;
  width:46px;
  height:46px;
  border-radius:50%;
  border:none;
  cursor:pointer;
  background:var(--fab-bg);
  color:var(--fab-fg);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.18),
             inset 0 0 0 1px rgba(255,255,255,.06);
}

.icon-bars{
  position:relative;
  width:20px;
  height:14px;
}
.icon-bars span{
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--fab-fg);
  border-radius:2px;
  transition:.25s;
}
.icon-bars span:nth-child(1){ top:0; }
.icon-bars span:nth-child(2){ top:6px; }
.icon-bars span:nth-child(3){ top:12px; }

.fab.open .icon-bars span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.fab.open .icon-bars span:nth-child(2){
  opacity:0;
}
.fab.open .icon-bars span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

.drawer{
  position:fixed;
  top:0;
  right:var(--sbw);
  height:100%;
  width:86vw;
  max-width:420px;
  background:var(--drawer-bg);
  color:var(--drawer-text);
  transform:translateX(100%);
  transition:transform .32s cubic-bezier(.2,.9,.2,1);
  z-index:40;
  display:flex;
  flex-direction:column;
  padding:calc(var(--topbar-h) + 40px) 22px 28px;
  box-shadow:-12px 0 30px rgba(0,0,0,.25);
  overflow-y:auto;
}

.drawer.open{
  transform:translateX(0);
}

.drawer .label{
  color:rgba(226,232,240,.8);
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:12px 0 6px;
}

.drawer a{
  display:block;
  color:#ffffff;
  text-decoration:none;
  padding:12px 4px;
  border-bottom:1px solid var(--drawer-sep);
}
.drawer a:hover{
  background:var(--drawer-hover);
}

.backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: var(--sbw);
  bottom: 0;
  background: rgba(0,0,0,.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 30;
}
.backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 520px){
  .drawer {
    width: 92vw;
    max-width: 380px;
  }
  .backdrop {
    right: 0;
  }
  .fab {
    right: 12px;
    top: calc((var(--topbar-h) - 46px)/2);
  }
}

/* html,
body {
  max-width: 100%;
  overflow-x: hidden;
} */