.navbar {
  --navbar-bg: var(--color-primary);
  --navbar-color: #fff;
  --navbar-padding-y: .75rem;

  background: var(--navbar-bg);
  color: var(--navbar-color);
  padding: var(--navbar-padding-y) 0;
  margin-bottom: 3rem;
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

body.variant-phone .navbar {
  margin-bottom: 1rem;
}

.navbar a:not(.button) {
  color: var(--navbar-color);
}

.navbar-brand {
  line-height: inherit;
  margin: 0;
  font-size: 1.4rem;
}

.navbar-brand a {
  color: var(--navbar-color);
  text-decoration: none;
}

@media (max-width: 768px) {
  .navbar-brand {
    font-size: 1rem;
  }
}