.navbar {
  background: #212529;
  width: 250px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 8px hsla(0, 0%, 0%, 0.3), 0px 2px 8px hsla(0, 0%, 100%, 0.2);

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  position: fixed;
  top: 25px;
  left: 50%;
  transform: translate(-50%);
  transition: top 0.4s ease-in-out;
  z-index: 10;
}

.nav-hidden {
  top: -70px;
}

.navbar a {
  height: 35px;
  width: 35px;
  padding: 5px;
  text-decoration: none;

  display: flex;
  justify-content: center;
  align-items: center;

  transition: 0.2s;
}

.navbar a:hover {
  border: 1px solid white;
  border-radius: 5px;
  padding: 5px;
  transform: translateY(-2px);

  transition: 0.2s;
}

.navbar img {
  width: 25px;
}