/*Navbar elements*/
.navbar {
  background-color: var(--nbbc);
  text-align: center;
}

.navbar h1 {
  color: var(--ac);
  opacity: 50%;

  display: inline-block;

  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

/*Active page tab*/
.navbar .active {
  font-size: 215%;
  color: var(--tc);
  opacity: 100%;
}

.navbar .active::after {
  content: "";
  background: var(--ac);


  margin-top: 0.1rem;
  margin-left: 50%;

  height: 0.3rem;
  width: 50%;

  transform: translate(-50%);
  border-radius: 5rem;
  display: block;
}

/*Hover on page tab*/
.hover {
  transition: all 0.5s;
}

.navbar .hover:hover {
  transition: all 0.5s;
  cursor: pointer;
  opacity: 100%;
  color: var(--tc);
  font-size: 215%;
}

.hover::after {
  content: "";
  background: var(--ac);
  transition: 0.5s;

  margin-top: 0.1rem;
  margin-left: 50%;

  height: 0.3rem;
  width: 0%;

  transform: translate(-50%);
  border-radius: 5rem;
  display: block;
}

.navbar .hover:hover::after {
  width: 25%;
}

/*Dropdown button*/
.dropdownButton {
  cursor: pointer;
  float: left;
}

.dropdownButton * {
  float: left;
  display: inline-block;
  transition: all 0.3s;
}

/*Dropdown Button Icon*/
.dropdownButton img {
  margin-left: 1rem;
  margin-top: 1rem;
  max-width: 4rem;
}

/*Dropdown Button Text*/
.dropdownButton .dropdownButtonText {
  margin-top: 2rem;
  color: var(--tc);
  opacity: inherit;
}

.dropdownButton .dropdownButtonText::after {
  content: "";
  background: var(--ac);
  transition: 0.5s;

  margin-top: 0.1rem;
  margin-left: 50%;

  height: 0.3rem;
  width: 0%;

  transform: translate(-50%);
  border-radius: 5rem;
  display: block;
}

.dropdownButton:hover .dropdownButtonText {
  margin-top: 1.5rem;
}

.dropdownButton:hover .dropdownButtonText::after {
  width: 25%;
}

.dropdownButton .dropdownButtonTextActive {
  opacity: inherit;
  color: var(--ac);
  margin-top: 1.5rem;
}

.dropdownButton:hover .dropdownButtonTextActive::after {
}

.dropdownButton .dropdownButtonTextActive::after {
  content: "";
  background: var(--ac);
  transition: 0.5s;

  margin-top: 0.1rem;
  margin-left: 50%;

  height: 0.3rem;
  width: 50%;

  transform: translate(-50%);
  border-radius: 5rem;
  display: block;
}