#navbar{
  padding: 1rem 2rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  
  background-color: var(--primary-color);
  overflow: hidden;

  display: flex;
  justify-content: space-between;
  align-items: center;
  
  border-right: 1px solid var(--border-color);
}


.fab {
  position: relative;
  width: 80px;
  height: 80px;
}

/* Main Button */
#show-btn {
  height: 80px;
  width: 80px;
  position: absolute;
  inset: 0;
  border: none;
  border-radius: 40px;
  background: #1e1f2a;
  color: #cfcfe7;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.35s, background-color 0.35s, box-shadow 0.35s, color 0.35s;
}
#show-btn:hover,
.fab.active #show-btn {
  background-color: rgba(177, 9, 255, 1);
  box-shadow: 0 0 10px 4px rgba(177, 9, 255, 0.4);
  color: white;
  transform: scale(1.06);
}
/* container centered behind the main button */
.btns-container{
  position: absolute; inset: 0;
  display: flex; justify-content: center; align-items: center;
  z-index: 1;
}

/* style anchors as buttons */
.reveal-btns{
  position: absolute; inset: 0; margin: auto;
  height: 80px; width: 80px; border-radius: 40px;
  background: #1e1f2a; color: #cfcfe7; text-decoration: none;
  display: flex; justify-content: center; align-items: center;
  cursor: pointer; z-index: 1;

  --y: 0px;                      /* offset var */
  transform: translateY(var(--y));
  opacity: 0; pointer-events: none;
  transition: transform .35s, opacity .25s,
              background-color .35s, box-shadow .35s, color .35s;
}
.reveal-btns:hover{
  transform: translateY(var(--y)) scale(1.06);
  background-color: rgba(177, 9, 255, 1);
  box-shadow: 0 0 10px 4px rgba(177, 9, 255, 0.4);
  color: white;
}

/* show state */
.fab.active .reveal-btns{ opacity: 1; pointer-events: auto; }

/* split: up for first half, down for second half */
.fab.active .btns-container > a:nth-child(1){ --y: -100px; }
.fab.active .btns-container > a:nth-child(2){ --y: -200px; }
.fab.active .btns-container > a:nth-child(3){ --y:  100px; }
.fab.active .btns-container > a:nth-child(4){ --y:  200px; }

/* rotate + keep hover look when active */
#show-btn{ transition: transform .35s, background-color .35s, box-shadow .35s, color .35s; }
#show-btn:hover,
.fab.active #show-btn{
  background-color: rgba(177, 9, 255, 1);
  box-shadow: 0 0 10px 4px rgba(177, 9, 255, 0.4);
  color: white;
  transform: scale(1.06);
}
.fab.active #show-btn{ transform: rotate(90deg) scale(1.06); }

.icons{ width: 30px; height: 30px; }