:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

html,
body {
  max-width: 100vw;
  overflow-x: hidden;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

@media (prefers-color-scheme: dark) {
  html {
    color-scheme: dark;
  }
}

/* Existing global styles might be here */

.login-container {
  display: flex;
  flex-direction: column;
  /* Arrange items vertically */
  justify-content: center;
  /* Center items vertically in the container */
  align-items: center;
  /* Center items horizontally in the container */
  min-height: 100vh;
  /* Make the container take up at least the full viewport height */
  width: 100%;
  /* Make the container take up the full width */
  /* You might want to add other styles like padding, background, etc. */
}

/* You might also need to style the form and input elements further */
form {
  /* Example form styling - adjust as needed */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  /* 可選：讓表單在容器中置中 */
  margin-right: auto;
  /* 可選：讓表單在容器中置中 */
  /* Adjust the width of the form as needed */
}

/* 在 globals.css 或 page.module.css 中添加 */
.login-form {
  /* 假設您在 HTML 中為登入表單添加了 class="login-form" */
  width: 100%;
  max-width: 100%;
  /* 您也可以移除 globals.css 中 form 的 width: 400px; 樣式 */
}

.member-package-form {
  /* Example form styling - adjust as needed */
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  width: 450px;
  margin-left: auto;
  /* 可選：讓表單在容器中置中 */
  margin-right: auto;
  /* 可選：讓表單在容器中置中 */
  /* Adjust the width of the form as needed */
}


.admin-package-form {
  width: 500px;
  /* 設定您想要的寬度 */
  /* 可以再加上 max-width: 90%; 來確保在小螢幕上不會超出範圍 */
  max-width: 90%;
  margin-left: left;
  /* 可選：讓表單在容器中置中 */
  margin-right: auto;
  /* 可選：讓表單在容器中置中 */
}

form>div {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-sizing: border-box;
}

button[type="submit"] {
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button[type="submit"]:hover {
  background-color: #0056b3;
}