html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}


/* 確保所有的導航連結都有按鈕的形狀 */
.navbar-nav .nav-item .nav-link {
    border-radius: 0.25rem; /* 圓角 */
    padding: 0.5rem 1rem; /* 增加內邊距 */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* 平滑過渡效果 */
    border: 1px solid #dee2e6; /* 輕微邊框 */
	width:300px;
	text-align:center;
}

/* 1. 非活躍按鈕的樣式 (全白) */
.nav-btn-white {
    background-color: white !important; /* 白色底色 */
    color: #343a40 !important; /* 深灰色文字 */
}

/* 非活躍按鈕的滑鼠懸停效果 (Hover) */
.nav-btn-white:hover {
    background-color: #f8f9fa !important; /* 輕微變灰，表示可點擊 */
    color: #343a40 !important;
    border-color: #adb5bd;
}

/* 2. 活躍按鈕的樣式 (持續綠色) */
.nav-btn-green-active {
    background-color: #6c757d !important; /* 綠色底色 (Bootstrap Success) */
    color: white !important; /* 白色文字 */
    border-color: #6c757d !important;
}

/* 確保活躍按鈕在滑鼠懸停和點擊時，仍然保持綠色樣式 (輕微變深以顯示互動) */
.nav-btn-green-active:hover,
.nav-btn-green-active:active {
    background-color: #218838 !important; 
    border-color: #1e7e34 !important;
    color: white !important;
}