﻿/* Please see documentation at https://learn.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

/* a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

a {
  color: #0077cc;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 60px;
} */

:root {
  --primary-color: #5B9B9B;
  --secondary-color: #8ED1D1;
  --background-color: #F0F7F7;
  --text-color: #2C4F4F;
}

body {
font-family: 'Arial', 'Helvetica', '微軟正黑體', sans-serif; /* 設定字體 */
background-color: var(--background-color); /* 設定背景顏色 */
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}

h2 {
color: var(--primary-color); /* 設定標題顏色 */
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
font-size: 28px; /* 放大標題字體 */
font-weight: bold; /* 加粗標題 */
}

form {
background-color: #fff; /* 設定表單背景顏色 */
padding: 30px 40px; /* 設定表單內距 */
border-radius: 20px; /* 設定表單圓角 */
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* 設定表單陰影 */
width: 90%;
max-width: 500px;
}

label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(--text-color); /* 深綠色文字 */
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"] {
width: 95%;
padding: 12px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box; /* 避免padding撐大元素 */
}

/* 調整日期 */
input[type="date"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  background-color: #eee;
  padding: 5px;
  cursor: pointer;
  border-radius: 3px;
}

input[type="submit"] {
background-color: var(--primary-color); /* 設定按鈕背景顏色 */
color: #fff; /* 設定按鈕文字顏色 */
padding: 15px 25px;
border: none;
border-radius: 20px; /* 修改按鈕圓角 */
cursor: pointer;
font-size: 18px;
display: block;
width: 100%;
margin-top: 20px;
font-weight: bold; /* 加粗按鈕文字 */
transition: background-color 0.3s, transform 0.2s; /* 新增: 滑順效果 */
}

a {
  background-color: var(--secondary-color); /* 設定按鈕背景顏色 */
  text-align:center;
  color: #fff; /* 設定按鈕文字顏色 */
  padding: 15px 25px;
  border: none;
  border-radius: 20px; /* 修改按鈕圓角 */
  cursor: pointer;
  font-size: 18px;
  display: block;
  width: 100%;
  margin-top: 20px;
  font-weight: bold; /* 加粗按鈕文字 */
  transition: background-color 0.3s, transform 0.2s; /* 新增: 滑順效果 */
  }

input[type="submit"]:hover {
background-color: var(--secondary-color); /* 設定按鈕懸停背景顏色 */
transform: scale(1.05); /* 新增: 放大效果 */
}

#output {
margin-top: 20px;
text-align: center;
font-size: 16px;
color: #333;
}

#output a {
color: var(--primary-color);
text-decoration: none;
}

#output a:hover {
text-decoration: underline;
}

/* 針對小螢幕的調整 */
@media (max-width: 600px) {
  input[type="text"],
  input[type="email"],
  input[type="date"],
  input[type="submit"] {
      font-size: 18px; /* 放大按鈕文字 */
  }
  input[type="submit"] {
      padding: 18px 30px;
  }
  form {
      padding: 30px 20px; /* 縮小表單內距 */
      width: 95%;
  }
  h2 {
      font-size: 24px; /* 放大標題文字 */
  }
}