.navbar {
  padding: 0;

  transition: all 0.5s;
}

.nav-container {
  padding: 0.5rem;
  color: #f0f0f0;

  display: flex;
}

.logo-text {
  color: #fdfdfd;
  position: relative;
}

.hover-highlight {
  position: relative;
}

.hover-highlight:hover, .logo-text:hover {
  color: var(--secondary-color);
  transition: all 0.5s;
  transition-timing-function: ease-out;
}

.hover-highlight::after, .logo-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.1em;
  background-color: var(--secondary-color);
  opacity: 0;
  transition: opacity 300ms, transform 300ms;
  opacity: 1;
  transform: scale(0);
  transform-origin: center;
}

.hover-highlight:hover::after, .hover-highlight:focus::after,
.logo-text:hover::after, .logo-text:focus::after {
  transform: scale(1);
}

.navbar-scrolled {
  background-color: var(--primary-color);
  border-bottom: 5px solid var(--secondary-color);
}