body {
  font-family: Avenir, sans-serif;
  color: #222;
  background-color: #fdfdfd;
  line-height: 1.6;
  margin: 2rem;
}

a {
  color: #32688a;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  text-decoration: underline;
}

.navbar {
  background-color: #32688a !important;
}

.navbar a,
.navbar .navbar-brand {
  color: white !important;
}

.navbar a:hover {
  color: #ffe083 !important;  /* optional hover color */
}

.navbar-brand img {
  height: 6em !important;   /* Make it 4× larger */
  max-height: none;
}

.link-subtext {
  display: block;
  font-size: 0.95em;
  color: #32688a;
  margin-bottom: 1.5em;
}

<style>
  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }

  .navbar-brand-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: white;
    margin-left: 5px;
  }
  
  .navbar .navbar-brand span {
  font-size: 2.8rem;     /* Increase this number for bigger text */
  font-weight: bold;
  color: white;          /* Optional: keep it visible */
  margin-left: 0.5rem;   /* Optional: spacing from logo */
}

/* Push navbar links (right side) to the far right */
.navbar-nav {
  margin-left: auto;
  display: flex;
  gap: 1.5rem;
}

/* Optional: improve vertical alignment */
.navbar .navbar-collapse {
  align-items: center;
}

</style>

<script>
  document.addEventListener("DOMContentLoaded", function () {
    const brand = document.querySelector(".navbar-brand");
    if (brand && !document.querySelector(".navbar-brand-title")) {
      const title = document.createElement("span");
      title.textContent = "Oyster Analytics";
      title.className = "navbar-brand-title";
      brand.appendChild(title);
    }
  });
</script>