.side-nav-bar {
  position: fixed;
  top: 60px;
  bottom: 0;
  left: 0;

  width: 64px;
  padding: 0 4px;

  /* background-color: lemonchiffon; */
  z-index: 2000;
}

.side-nav-bar .buttons-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.side-nav-bar button {
  height: 74px;
  width: 64;
  border-radius: 10px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0);
}

.side-nav-bar button:hover {
  background-color: rgba(0, 0, 0, .05);
}

.side-nav-bar .nav-icon {
  width: 24px;
  aspect-ratio: 1/1;
  margin-inline: auto;
  border: none;
}

.side-nav-bar .nav-icon.home {
  width: 36px;
  aspect-ratio: 1/1;
}

.nav-icon svg {
  width: 100%;
  height: 100%;
}

.side-nav-bar p {
  margin: 4px 0 0;
  font-size: 1rem;
  /* font-weight: 400; */
}

.home.icon {
  /*  NOTE: You can move these variables to your main CSS file under what ever specific class you give the icon. Just make sure you give the icon's CONTAINER a unique identifying class and paste these variables under that.*/
  --icon-size: 36; /* Change this value to change entire icon size scalably (square) */
  --unit: 1px; /* Use this to decide what the size of the icon is measured in. (ex. "1%", "1px", 1vw" etc.) */
  --icon-color: #0f0f0f; /* Change this too, self explanitory */
}

@media(max-width: 791px) {
  .side-nav-bar {
    display: none;
  }
}