:root {
  --neon-green: #b6e24d;
  --bg-color: #3b3d58;
  --body-text-color: #eee;
  --nav-item-color: #eee;
  --nav-item-hover-color: #aff4ff;
}

.text-neon-green {
  color: var(--neon-green);
}

body{
  font-family: 'Noto Sans TC', "Microsoft JhengHei", "Heiti TC","Helvetica Neue",Helvetica,Arial,sans-serif;
  background-color: var(--bg-color);
  color: var(--body-text-color);
}

/* Navbar */
.sport-navbar {
  background-color: transparent;
}

.sport-navbar .navbar-brand {
  color: var(--nav-item-color);
}

.sport-navbar .navbar-toggler{
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--nav-item-color);
}

.sport-navbar .nav-item {

}

.sport-navbar .nav-link {
  /* transition: color .4s ease; */
  color: var(--nav-item-color);
}

.sport-navbar .nav-link:hover {
  color: var(--nav-item-hover-color);
}

@media (min-width: 992px) {
  .sport-navbar .navbar-toggler{
    display: none;
  }

  .sport-navbar .nav-item {
    padding: 0 15px;
    border-radius: 999px;
  }

  .sport-navbar .nav-item.active {
    background-color: var(--neon-green);
  }

  .sport-navbar .nav-item.active .nav-link {
    color: var(--bg-color);
  }

  .sport-navbar .nav-item.active .nav-link:hover {
    color: var(--bg-color);
  }

  .sport-navbar .navbar-nav {
    justify-content: flex-end;
    margin-left: auto;
  }
}

/* page common */
.page-title {
  margin-top: 2rem;
  font-size: 2rem;
}

@media (min-width: 992px) {
  .page-title {
    font-size: 4rem;
    letter-spacing: 3px;
  }
}