.navbar {

  background: rgba(34, 40, 49, 1); 
  backdrop-filter: blur(10px); 
  border-right: 1px solid rgba(217, 185, 155, 0.2);
  
  height: 100vh;
  width: 60px;
  position: fixed;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
  z-index: 1000;
  justify-content: center;
}

.icon-btn {
  margin: 30px 0;
  transition: transform 0.3s ease;
  filter: sepia(50%) saturate(100%) hue-rotate(10deg);
}

.icon-btn:hover {
  transform: scale(1.2);
  filter: sepia(0%) saturate(100%) brightness(1.2);
}

.nav-icon {
  width: 30px;
  height: auto;
}

@media (max-width: 768px) {
  .navbar {
    width: 100%;       
    height: 60px;     
    flex-direction: row; 
    justify-content: space-around; 
    padding-top: 0;   
    border-right: none;
    border-bottom: 1px solid rgba(217, 185, 155, 0.2);
    /* Make the background solid so content doesn't bleed through when scrolling */
    background: rgba(34, 40, 49, 0.98); 
  }

  .icon-btn {
    margin: 0; 
  }
}