body:before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  background-image: url('img/kyoseikan.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

/*
  for jump to in-page anchor
  https://github.com/twbs/bootstrap/issues/1768#issuecomment-46519033
*/
*[id]:before {
  display: block;
  content: " ";
  margin-top: -4rem;
  height: 4rem;
  visibility: hidden;
}

#title {
  /* Move down content because we have a fixed navbar that is 3.5rem tall */
  padding-top: 5rem;
  padding-bottom: 3rem;
}

#title_text {
  background-color: rgba(255,255,255,0.90);
}

nav {
  background-color: rgba(255,255,255,0.90);
}

/* In your custom CSS file (e.g., style.css) */
.navbar-nav .nav-link {
    color: black; /* Default text color */
    transition: color 0.3s ease, background-color 0.3s ease; /* Smooth transition */
    border-radius: .375rem;
}

.navbar-nav .nav-link:hover {
    color: white; /* Text color on hover */
    background-color: #767676; /* Background color on hover (Bootstrap primary color) */
}