.navbar {
  background-image: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,0));
  position: relative;
  top: 0;
  width: 100%;
  z-index: 9;
}

.navbar-home {
  position: absolute !important;
}

.navbar ul {
  width: 100%;
  display: flex;
  align-items: center;
  list-style: none;
}
.navbar li {
  height: 80px;
}
.navbar .logo {
  margin-right: 10px;
  margin-left: auto;
  display: flex;
  align-items: center;
}

.navbar a {
  height: 100%;
  padding: 0 30px;
  text-decoration: none;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  transition: all 0.1s ease-out;
}

.navbar a:hover {
  text-decoration: underline;
  translate: 0 -1px;
  color: #EFE8B9;
}

.navbar .sidebar {
  background-color: #365b6d71;
  backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 300px;
  z-index: 10;
  display: none;
  flex-direction: column;
}

.navbar .sidebar li {
  width: 100%;
}

.navbar .menu-button {
  display: none;
}

@media(max-width: 940px) {
  .hide-on-mobile {
    display: none;
  }

  .navbar .menu-button {
    display: block;
  }
}

@media(max-width: 600px) {
  .navbar .sidebar {
    width: 100%;
  }
}