#nav-bar {
  display: inline-block;

  width: 100vw;
  height: var(--nav-bar_height);

  margin: 0;
  padding: 0;

  list-style-type: none;

  box-shadow: 0 0 2vh 0.15vh #333;

  background-color: var(--primColor);
}

#nav-bar > li {
  display: inline-block;

  min-width: var(--nav-bar_height);
  height: var(--nav-bar_height);

  text-align: center;

  float: left;
}

#nav-bar > li:not(.right) {
  float: left;
}

#nav-bar > li.right {
  float: right;
}


#nav-bar > li:not(.logo) {
  border-left: 0.1vh double var(--secColor);
  border-right: 0.1vh double var(--secColor);

  padding-left: calc(var(--nav-bar_height) * 0.05);
  padding-right: calc(var(--nav-bar_height) * 0.05);
}

#nav-bar > li.active {
  background-color: var(--secColor);
}

#nav-bar > li > a {
  display: inline-block;

  width: 100%;
  height: var(--nav-bar_height);

  font-size: calc(var(--nav-bar_height) * 0.35);
  line-height: calc(var(--nav-bar_height));
  text-decoration: none;
  text-align: center;
  color: white;
  
  
  transition: background-color 0.2s, color 0.2s;
}
#nav-bar > li > a:focus {
	outline: none;
}

#nav-bar > li:not(:first-of-type):hover {
  background-color: #fff;
}

#nav-bar > li:not(:first-of-type):hover > a {
  color: var(--primColor);
}