@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap");
body {
  font-family: 'Noto Sans TC', sans-serif;
  background-color: #e2e2e0;
}

.navbar-top {
  background-color: #31315f;
}

nav, .navbar {
  padding: 0;
}
nav .navbar-collapse, .navbar .navbar-collapse {
  background-color: #34956c;
}
nav img, .navbar img {
  height: 45px;
  margin-left: 45px;
}
nav .navbar-text, .navbar .navbar-text {
  font-size: 27px;
  color: white !important;
  text-shadow: 0.1em 0.1em 0.2em black;
  padding: 15px;
}
nav .nav-item, .navbar .nav-item {
  margin-right: 15px;
}
nav .nav-link, .navbar .nav-link {
  font-size: 18px;
  color: #333333;
  font-weight: 500;
}
.navbar-top a {
  color: #ffffff;
}
.navbar-top a:hover {
  color: #cccccc;
  text-decoration: none;
}
nav .logout {
  border: solid 1px #F8B62A;
  padding: 6px 12px;
  border-radius: 19px;
  margin-left: 15px;
}
nav .logout:hover {
  background-color: #F8B62A;
  color: #31315f;
  text-decoration: none;
  font-weight: 500;
}
nav .passwordChange {
  border: solid 1px #21dd50;
  padding: 6px 12px;
  border-radius: 19px;
  margin-left: 15px;
}
nav .passwordChange:hover {
  background-color: #21dd50;
  color: #31315f;
  text-decoration: none;
  font-weight: 500;
}
@media (min-width: 1232px) {
  .bottomLogout {
    display: none;
  } 
}
@media (max-width: 1420px) {
  .topLogout {
    margin-left: 15% !important;
  }
}
@media (max-width: 1200px) {
  .topLogout {
    margin-left: 15% !important;
  }
}
@media (max-width: 1232px) {
  .topLogout {
    display: none;
    margin: 0 auto;
  } 
  .logout {
    border: none !important;
    border-radius: 0 !important;
    margin-left: 0 !important;
  }
}

.index-page {
  text-align: center;
  margin: 190px auto;
  color: white;
}
.index-page h1 {
  font-size: 100px;
  font-weight: 400;
  text-shadow: 3px 3px 0.2em #1d1d1d;
}
.index-page .btn-group {
  margin-right: 15px;
}
.index-page .btn-group button {
  margin-top: 80px;
  padding: 25px 40px;
  font-size: 26px;
  border-radius: 0.6rem;
  color: white;
  background-image: url(../img/btnBg_00index.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.index-page .btn-group button:hover, .index-page .btn-group button:focus {
  border: 1px solid white;
}
.index-page .btn-group .dropdown-menu {
  text-align: center;
  width: 100%;
  background-color: #e2e2e0;
  border: 1px solid #0f4fb5;
  border-radius: 0;
}
.index-page .btn-group .dropdown-menu .dropdown-item {
  font-size: 20px;
  font-weight: 500;
  margin-top: 8px;
  margin-bottom: 8px;
  color: #0f4fb5;
}
.index-page .btn-group .dropdown-menu .dropdown-item:hover {
  background-color: #fff;
}

footer {
  text-align: center;
  /* color: #ffffff;
  background-color: #31315f; */
  padding: 4px 0;
  border-top: 1px solid rgb(189, 189, 189);
  padding: 1rem 0 2.5rem 0;
}
footer p {
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 3px;
}

.btn-logout {
  border: solid #333333 1px;
  border-radius: 20px;
  padding: 3px 15px !important;
  margin-top: 35px;
}

.btn-logout:hover {
  background-color: #ffffff;
  border: solid #ffffff 1px;
}