.bonenav {
  position: fixed;
  display: flex;
  padding: 10px;
  margin-left: 10px;
  border: 2px rgba(250, 250, 250, 0.1) solid;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
  color: white;
  backdrop-filter: blur(10px);
  opacity: 0.6;
  user-select: none;
  left: 0;
  border-image: linear-gradient(to right,#3d3d3d, #4d5263, #adadad, #505463, #3d3d3d);
  border-image-slice: 1;
  animation: nav-gradient 5s linear infinite;
  display: flex;
  flex-direction: column;


}
  
.bonenav:hover {
  animation: expand 0.5s 1 forwards;
  user-select: all;

}
.bonenav:active {
  user-select: all;
  opacity: 1;
  transform:scale(1.1);
}

.bonenav:focus {
animation: bonefocus 0.5s 1 forwards;
  user-select: all;
}

nav button:hover {
  background-color: transparent;
  border: none;
  animation: expund 0.5s 1 forwards;
}