.navbar,
.sidebar {
  background: var(--bg-2);
  color: #fff;
  visibility: visible;
  opacity: 1;
}

.sidebar:not(.show) {
  opacity: 1;
}

.header {
  background-color: var(--bg-4);
  padding: 0.5rem 0;
}

.toggler {
  color: grey;
  background-color: var(--bg-8);
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.toggler:hover {
  color: white;
  background-color: var(--accent-color);
}

.outside {
  position: fixed;
  z-index: 1100;
}

.navbar a,
.sidebar a {
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  color: #c6c6c6;
}

.navbar a:hover,
.navbar a:active,
.navbar a:focus,
.sidebar a:hover,
.sidebar a:active,
.sidebar a:focus {
  color: white;
}

.navbar ul li a:hover,
.navbar ul li a:active,
.navbar ul li a:focus,
.sidebar ul li a:hover,
.sidebar ul li a:active,
.sidebar ul li a:focus {
  color: white;
  background-color: var(--bg-7);
}

.show {
  opacity: 1;
}

/**
 * Hide/Show navitems in desktop-mode
 */
@media (min-width: 900px) {
  .outside {
    display: none;
  }
}

@media (max-width: 900px) {
  .desktop,
  .listAllText {
    display: none;
  }
  /*
  .navbar .toggler {
    margin-left: auto;
  }*/
}

/**
 * Hide username on smaller screens
 */
@media (max-width: 1200px) {
  .username,
  .services {
    display: none;
  }
}

@media (max-width: 992px) {
  .services {
    display: none;
  }
}

/**
 * Manage toggle visibility on small screens
 */
@media (max-width: 600px) {
  .listAll,
  .navbar .toggler:not(.show),
  .outside .toggler:not(.show) {
    display: none;
  }
}
